Nuxt Content Snippet

Easily import snippets in your Nuxt Content documents.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

Features

• Import Code Snippets from any file
• Includes Syntax Highlighting

Installation

Warning: This module requires Nuxt Content to work. Make sure to install it first.

1. Add nuxt-content-snippet dependency to your project

# Using pnpm
pnpm add -D nuxt-content-snippet

# Using yarn
yarn add --dev nuxt-content-snippet

# Using npm
npm install --save-dev nuxt-content-snippet

2. Add nuxt-content-snippet to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-content-snippet'
  ]
})

That's it! You can now use Nuxt Content Snippet in your Nuxt app ✨

Usage

Importing

You can import snippets from any file in your project. The snippet will be highlighted using the file extension.

info: By default, the snippet will be imported from the base directory of your project. You can also specify a relative path to the file.

@@@ ./components/MyComponent.vue

@@@ @/components/MyComponent.vue

@@@ ../src/components/MyComponent.vue 

Highlighting

If you want to highlight a specific section of the file, you can specify the lines to highlight using the following syntax:

@@@ ./components/MyComponent.vue {2-4}

Configuration

Prefix is defined by default (@@@). You can change it in your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    'nuxt-content-snippet'
  ],
  contentSnippet: {
    prefix: '<<<'
  }
})

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Sponsors