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 any H1 in a md 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 request method 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.

Seamlessly use content files in your Nuxt.js sites

Featured Lesson:

Use Vue Components in Your Markdown Files!