From Content v1

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

  • 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)
  • Upgrade to Nuxt 3 (check out the Nuxt 3 migration guide)
    - "nuxt": "latest"
    + "nuxt": "^3.0.0-rc.3"
  • Upgrade Content module
    - "@nuxt/content": "^1.15.1"
    + "@nuxt/content": "^2.0.0"
  • 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
      .where({ /* first step conditions */ })
      .where({ /* second step conditions */ })
  • There is no search utility for full text search.
    const doc = await getContentDocument(
  • 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())

  <ContentRenderer :value="data" />

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

  <ContentDoc />

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, .yaml, .yml, .csv, .json, .json5,, .yaml, .yml, .csv, .json, .json5
Full text search
Reactive Composables
Table Of Contents
MDC Components syntax
Multi Source
Locale Support
Content Navigation

Querying content

Learn more about query methods in the API reference