Get Started
Migration
Learn how to upgrade from Nuxt Content V1 to Nuxt Content V2 or V3 with Nuxt 3.
Content V3 Documentation
Read V3 DocumentationContent V1 Documentation
Read V1 DocumentationHow to Migrate
- Make sure your dev server (
nuxt dev
) isn't running and remove any package lock files (package-lock.json
,yarn.lock
, orpnpm-lock.yaml
) - Upgrade to Nuxt 3 (check out the Nuxt 3 migration guide)
- "nuxt": "latest"
+ "nuxt": "^3.0.0"
- Upgrade Content module
- "@nuxt/content": "^1.15.1"
+ "@nuxt/content": "^2.0.0"
- 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 utilssurround
dropped in favor offindSurround
where
utility can be chainedqueryContent() .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 thecontent/
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
Feature / Version | Content 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
Learn more about query methods in the API reference