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"
  • 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(
  • 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 / VersionConvent 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