Migration

Content V3 Documentation

Content 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"

3. Upgrade Content module

- "@nuxt/content": "^1.15.1"
+ "@nuxt/content": "^2.0.0"

3. 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

Querying content