1.from-v1.md

title	description
From Content v1	Learn how to upgrade from Nuxt Content V1 to Nuxt Content V2 for Nuxt 3.

Migration from Content V1

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

• Upgrade Content module

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

• Then, reinstall your dependencies:

  yarn 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 provide same utilities as legacy $content with some improvements:

• fetch dropped in favor of new find utils

  • find: retrieve a list of contents
  • findOne: retrive 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.

• Find utilities does not contains body of documents and they only include meta information of parsed contents. You can fetch contents body using getContentDocument(non-reactive) or useContentDocument(reactive) composables

  const doc = await getContentDocument(post.id)

• There is new findNavigation utility to retrieve navigation object

Rendering Content

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

<ContentDoc> component receive document path then fetch and render 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 / Version	Convent v1	Content v2
Nuxt Version	nuxt@2.x	nuxt@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

::alert Learn more about query methods in the API reference ::