Tobias Dossinger

Content v2 and Nuxt 3 are two powerful technologies that can be combined to create modern web applications. One use case for this combination is building a blog. In this blog post, we will discuss how Content v2 can be used as the headless CMS backend for a Nuxt 3-based-blog. To install Content v2 in an existing project, use one of the following commands:

pnpm add -D @nuxt/content

# or

npm install --save-dev @nuxt/content

To get started, we need to create a Content v2 project and define the content types that we want to use for our blog. For example, we may define a "Post" content type that has fields for the title, body, author, and date.

Once we have our content types defined, we can use the Content v2 API to fetch the content and use it in our Nuxt 3 application. Here's an example code snippet that shows how to fetch and display a list of blog posts:

 <template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="(index, post) in posts" :key="index">
        <h2>{{ post.title }}</h2>
        <p>{{ post.body }}</p>
        <p>By {{ post.author }} on {{ post.date }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const posts = await queryContent().find();

definePageMeta({
  layout: 'blog'
});
</script>

With this setup, we can easily create new blog posts in our Content v2 project and they will automatically appear in our Nuxt 3 application.

If you're interested in a more detailed blog post about how I built til, contact me :)

Sources

Content v2 with Nuxt 3