Guides & Tutorials

How to Use Nuxt Content v2 on Netlify

It’s finally here!!! 🎉 The long awaited Nuxt Content v2 module has been released, which marks another important milestone in the journey for Nuxt 3.

What is Nuxt Content?

Nuxt Content is a plugin for Nuxt that enables your app to ingest Markdown, YAML, CSV and JSON files into your app. And while that might sound fairly basic at first glance, this unlocks a world of possibility with the ability to empower developers to:

  • Use local content files within their codebase as their content management system (CMS). In other words, you don’t need a third party CMS!
  • Utilize Vue Components within your Markdown files that automatically get rendered correctly by Nuxt Content
  • Enhanced Markdown syntax for Markdown Components that allows for an improved user experience for writing custom blocks or passing attributes to content
  • Query any content from Nuxt Content so that you have the flexibility to get what you need when you need it
  • Utilize a built-in REST API for every document
  • And much more!

How to Get Started

Starting a new project?

If you’re starting a brand new project, the fastest way to get started is to click on the Deploy to Netlify button to get a starter template that will automatically be deployed and connected to GitHub!

Deploy to Netlify

Have an existing project?

If you already have an existing Nuxt 3 project, you can use your preferred installer to add @nuxt/content as a dependency to your project.

# npm
npm install --save-dev @nuxt/content

# yarn
yarn add --dev @nuxt/content

Then, inside of your nuxt.config.ts file, add @nuxt/content to your modules config.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({ 
  modules: [ 
    '@nuxt/content' 
  ]
})

And just like that, your app is ready to ingest Markdown, YAML, CSV and JSON from the default content directory.

Next Steps

And just like that, you’re now ready to build Nuxt 3 sites using Markdown, YAML, CSV and JSON files to power your content!

We’ll have more content coming your way on how to make the most of Nuxt Content v2, but in the meantime, here are some additional resources for you to check out in the menatime:

Looking forward to seeing what you create with the new Nuxt Content v2!

Keep reading

Recent posts

How do the best dev and marketing teams work together?