Content

screenshot of Content
nuxt
vue

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.

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.
nuxt
Nuxt

nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.