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(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 / VersionConvent v1Content v2
Nuxt Versionnuxt@2.xnuxt@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

Learn more about query methods in the API reference