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 and yarn.lock)
• Upgrade to Nuxt 3 (check out the Nuxt 3 migration guide)

  - "nuxt": "latest"+ "nuxt": "^3.0.0-rc.3"

  Copy to clipboard
• Upgrade Content module

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

  Copy to clipboard
• Then, reinstall your dependencies:

  yarn install

  Copy to clipboard

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()

  Copy to clipboard
• There is no search utility for full text search.
• Find utilities does not contain body of documents and they only include meta information of parsed contents. You can fetch the body's contents using getContentDocument(non-reactive) or useContentDocument(reactive) composables

  const doc = await getContentDocument(post.id)

  Copy to clipboard
• There is a new findNavigation utility to retrieve navigation object

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