Nuxtent Module

Overview

Nuxtent is a tool designed to make using Nuxt for content-heavy sites as easy as using static site generators like Jekyll or Hugo. It achieves this by compiling data from markdown or YAML files based on configured rules and providing helpers for dynamically accessing this data within Nuxt pages. In addition, Nuxtent offers support for content files in both static sites and dynamic applications, the usage of Vue components inside markdown files, and automatic content navigation between pages and within pages.

Features

• Simple configuration: Allows you to override settings for the markdown parser and use its plugins.
• Support for different content structures: Can handle both flat content structures like blog posts and nested hierarchies of markdown content.
• Meta info and breadcrumbs: Adds useful info to your markdown page’s meta info, including specified data in the config file and a breadcrumbs trail for hierarchical markdown content.
• Vue component integration: Supports using Vue components inside markdown files.
• Access to content and metadata: Adds the $content helper to Nuxt, allowing you to access markdown content and its metadata within Nuxt pages.

Installation

1. Install Nuxtent using npm:

npm install nuxtent

2. Configure the markdown parser in your Nuxt project’s configuration file (nuxt.config.js) by adding the following code:

module.exports = {
  // ...
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true,
    use: [
      // Add any markdown-it plugins you want to use
    ]
  },
  // ...
}

3. Add Nuxtent to your Nuxt project’s modules by updating the modules array in nuxt.config.js:

module.exports = {
  // ...
  modules: [
    'nuxtent'
  ],
  // ...
}

4. Create a folder named “content” in your Nuxt project’s root directory. Inside this folder, create your markdown or YAML content files.

5. Access your markdown content and metadata within Nuxt pages by using the $content helper inside the asyncData method. Here’s an example:

export default {
  asyncData({ app }) {
    const myContent = app.$content('path/to/my/file').fetch()
    return {
      myContent
    }
  }
}

Summary

Nuxtent is a powerful tool that simplifies building content-heavy sites with Nuxt. Its features include simple configuration, support for different content structures, meta info and breadcrumbs, Vue component integration, and easy access to content and metadata within Nuxt pages. By providing these features, Nuxtent enhances the capabilities of Nuxt as a static site generator and offers a flexible API for configuring and fetching content.