get started

Migration

Learn how to upgrade from Nuxt Content V1 to Nuxt Content V2 with Nuxt 3.

Content V1 Documentation

Read V1 Documentation

How to Migrate

  1. Make sure your dev server (nuxt dev) isn't running and remove any package lock files (package-lock.json, yarn.lock, or pnpm-lock.yaml)
  2. Upgrade to Nuxt 3 (check out the Nuxt 3 migration guide)
- "nuxt": "latest"
+ "nuxt": "^3.0.0"
  1. Upgrade Content module
- "@nuxt/content": "^1.15.1"
+ "@nuxt/content": "^2.0.0"
  1. Then, reinstall your dependencies:
npm install

Global Components

The global components directory for Nuxt Content v2 is now ~/components/content.

- components/global
+ components/content

Fetching Content

There is no global $content variable, instead you can use queryContent composable to fetch contents.

- const posts = await this.$content('/blog', { deep: true }).only(['title']).fetch()
+ const { data: posts } = await useAsyncData('posts-list', () => queryContent('/blog').only(['title']).find())

queryContent provides same utilities as legacy $content with some improvements:

  • fetch dropped in favor of new find utils
    • find: retrieve a list of contents
    • findOne: retrieve first matched content
  • surround dropped in favor of findSurround
  • where utility can be chained
    queryContent()
      .where({ /* first step conditions */ })
      .where({ /* second step conditions */ })
      .find()
    
  • There is no search utility for full text search.
    const doc = await getContentDocument(post.id)
    
  • There is a new fetchContentNavigation utility is designed to provide a tree of items based on the content/ directory structure.

Rendering Content

<NuxtContent> component removed in favor of a <ContentRenderer> component.

<ContentDoc> component receives a document path and then fetches and renders the document.

<script setup lang="ts">
const route = useRoute()

const { data } = await useAsyncData('get-document', () => queryContent(route.path).findOne())
</script>

<template>
  <ContentRenderer :value="data" />
</template>

You can go even faster if you know that route.path will be the same as your content files, use the <ContentDoc> component:

<template>
  <ContentDoc />
</template>

The <ContentDoc> component will fetch the document for the current route path and use <ContentRenderer> to render it.

Feature comparison

Feature / VersionContent v1Content v2
Nuxt Versionnuxt@2.xnuxt@3.x
Supported files.md, .yaml, .yml, .csv, .json, .json5, .xml.md, .yaml, .yml, .csv, .json, .json5
Full text search
Reactive Composables
FrontMatter
Excerpt
Table Of Contents
MDC Components syntax
Multi Source
Locale Support
Content Navigation

Querying content

Learn more about query methods in the API reference