Configuring Your Content
Nuxtent converts all your content files to json
so that they can be used flexibly within Nuxt pages.
There are two places where you can configure how your content is parsed and compiled: inside the nuxtent.config.js
file or under the nuxtent
property inside nuxt.config.js
. For complex configurations, the preferred approach is placing the configuration under its own file.
Content Options
All content options are configured under the content
property.
Here are the possible options:
page
, String that specifies page directory where dynamic content is being requested. This is required so that the page’s route path can be changed to match the content’s permalink configuration.permalink
, String that specifies dynamic url path parameters. The possible options are:slug
,:section
,:year
,:month
,:day
.isPost
, Boolean that specifies whether the content requires a date. The default is true.anchorLevel
, Number that specifies the heading level that you wish to be converted to link anchors for navigation within the content’s body. Defaults to 1, so anyH1
in amd
file will be converted.data
, Object that specifies that additional data that you would like injected into your content’s component.generate
, Array that specficies the API requestmethod
being used inside pages, so that the appropriate content data can be generated for static builds.
Here’s an example nuxt.content.js
file:
module.exports = {
// content/HelloWorld.md --> posts/hello-world
content: {
page: '/posts/_slug',
permalink: ':slug',
isPost: false,
generate: [
'get',
'getAll'
]
}
}
Content url path considerations
It is important to notice that the complete content path will be prefixed by the Nuxt page’s parent route.
For example:
- In
pages/_posts
, the content path would not be prefixed since it is a top level dynamic route. - In
pages/guide/_slug
, the content path would be prefixed by ‘/guide’ since it is a nested dynamic route.
Thus, when fetching content, you must use Nuxt’s route.path
or route.params
appropriately to grab the content’s permalink.
Multiple Content Types
You can specifiy multiple content types by passing an array of registered directories and their respective options:
module.exports = {
content: [
["posts", {
page: '/_slug'
permalink: ':year/:slug'
}],
["projects", {
page: '/projects/_slug',
permalink: ":slug",
isPost: false
}]
]
}
API Options
For custom environments, you must configure the browserBaseURL
, so that the content’s serverMiddleware
API and axios
request helpers can be setup appropriately.
browserBaseURL
, String that specifies the site’s base url when content is requested from the browser.
Note: You can specify the api
option as a function receiving an isStatic
parameter to dynamically set the api options depending on whether you’re making a static build (‘nuxt generate’) or not.
module.exports = {
api: function(isStatic) {
return {
browserBaseURL: isStatic ? 'http://production-url.com' : ''
}
}
}
API options are also passed down to axios
if you need a specific configuration (see axios options).
Note: Remember not to alter the baseUrl
parameter in a way that would prevent nuxtent from accessing the content server (i.e. by specifying a remote url).
Parser Options
You can also configure additional processing to be used by Nuxtent parsers.
Currently, this is only exposed for the markdown
parser, exposed via parser.md
.
There are three ways to configure the parser:
extend
the default options passed to the parser.- Add
plugins
to the parser. customize
the parser after it was created.
Here’s an example setup:
// nuxtent.config.js
const Prism = require('prismjs')
const externalLinks = require('markdown-it-link-attributes')
const emoji = require('markdown-it-emoji')
const twemoji = require('twemoji')
module.exports = {
parsers: {
md: {
extend(config) {
config.highlight = (code, lang) => {
return `<pre class="language-${lang}"><code class="language-${lang}">${Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)}</code></pre>`
}
},
plugins: [
emoji,
[ externalLinks, { target: '_blank', rel: 'noopener' } ]
],
customize(parser) {
parser.linkify.tlds('onion')
parser.linkify.add(... custom code to recognize and handle twitter handles ...)
parser.renderer.rules['emoji'] = (token, idx) => {
return twemoji.parse(token[idx].content);
}
}
}
},
...
css: [
'prismjs/themes/prism-coy.css'
]
}
See the markdown-it API for more details.