Content

Overview

Nuxt Content is a powerful tool that reads the content directory in your project, parses various file formats (such as .md, .yml, .csv, or .json), and creates a data layer for your application. It also allows you to use Vue components in Markdown using its unique MDC syntax. With Nuxt Content, you can easily generate navigation, highlight code, build table of contents, and handle various file types like CSV, YAML, and JSON. It is compatible with Nuxt 2 as well as the upcoming Nuxt 3.

Features

• Nuxt 3 support: Nuxt Content is fully compatible with Nuxt 3.
• Markdown syntax made for Vue components (MDC): You can use Vue components within Markdown files using the special MDC syntax.
• Navigation generation: Nuxt Content can generate navigation based on the structure of your content directory.
• Code highlighting with Shikiji: It includes built-in code highlighting using the Shikiji library.
• Blazing fast hot module replacement (HMR) in development: Nuxt Content allows for quick and efficient development with HMR.
• Powerful query builder (MongoDB like): You can build complex queries similar to MongoDB syntax.
• Table of contents generation: Nuxt Content can automatically generate table of contents for your Markdown files.
• Handles CSV, YAML, and JSON: In addition to Markdown, Nuxt Content can also handle CSV, YAML, and JSON file formats.
• Extend with hooks and content plugins: You can extend the functionality of Nuxt Content using hooks and content plugins.

Installation

To install Nuxt Content, follow these steps:

1. Clone the repository:

git clone [repository_url]

2. Install dependencies using pnpm:

pnpm install

3. Prepare the setup:

pnpm prepare

4. Build the project:

pnpm build

5. Try the playground:

pnpm dev

6. Test using the following command:

pnpm test

Summary

Nuxt Content is a powerful data layer tool for your application that can parse and handle various file formats. With its support for Vue components within Markdown, it offers a unique and convenient way to create content. With features like navigation generation, code highlighting, query building, and table of contents generation, Nuxt Content provides a comprehensive solution for managing content in your Nuxt project.