Nuxt Content vs Sanity: Setup Comparison and Getting Started Guide

1export default defineNuxtConfig({
2  modules: ['@nuxt/content'],
3  content: {
4    highlight: {
5      theme: 'github-dark'
6    }
7  }
8})

1---
2title: Hello World
3description: My first blog post
4author: John Doe
5publishedAt: 2025-01-15
6tags:
7  - getting-started
8  - nuxt
9---
10
11# Hello World
12
13This is my first blog post using Nuxt Content!
14
15## Why Nuxt Content?
16
17Nuxt Content makes it easy to create content-driven websites.

1<template>
2  <div>
3    <h1>Blog</h1>
4    <ul>
5      <li v-for="post in posts" :key="post._path">
6        <NuxtLink :to="post._path">
7          {{ post.title }}
8        </NuxtLink>
9        <p>{{ post.description }}</p>
10      </li>
11    </ul>
12  </div>
13</template>
14
15<script setup lang="ts">
16const { data: posts } = await useAsyncData('blog-posts', () =>
17  queryContent('blog')
18    .only(['title', 'description', '_path', 'publishedAt'])
19    .sort({ publishedAt: -1 })
20    .find()
21)
22</script>

1<template>
2  <article>
3    <ContentDoc v-slot="{ doc }">
4      <h1>{{ doc.title }}</h1>
5      <p>By {{ doc.author }} • {{ formatDate(doc.publishedAt) }}</p>
6      <ContentRenderer :value="doc" />
7    </ContentDoc>
8  </article>
9</template>
10
11<script setup lang="ts">
12const formatDate = (date: string) => {
13  return new Date(date).toLocaleDateString('en-US', {
14    year: 'numeric',
15    month: 'long',
16    day: 'numeric'
17  })
18}
19</script>

1import { createClient } from '@sanity/client'
2import imageUrlBuilder from '@sanity/image-url'
3
4export const client = createClient({
5  projectId: 'your-project-id',
6  dataset: 'production',
7  useCdn: true,
8  apiVersion: '2024-01-01'
9})
10
11const builder = imageUrlBuilder(client)
12export const urlFor = (source: any) => builder.image(source)

1export default {
2  name: 'post',
3  title: 'Post',
4  type: 'document',
5  fields: [
6    {
7      name: 'title',
8      title: 'Title',
9      type: 'string',
10      validation: (Rule: any) => Rule.required()
11    },
12    {
13      name: 'slug',
14      title: 'Slug',
15      type: 'slug',
16      options: { source: 'title' }
17    },
18    {
19      name: 'author',
20      title: 'Author',
21      type: 'reference',
22      to: [{ type: 'author' }]
23    },
24    {
25      name: 'publishedAt',
26      title: 'Published At',
27      type: 'datetime'
28    },
29    {
30      name: 'body',
31      title: 'Body',
32      type: 'array',
33      of: [{ type: 'block' }]
34    }
35  ]
36}

1<template>
2  <div>
3    <h1>Blog</h1>
4    <ul>
5      <li v-for="post in posts" :key="post._id">
6        <NuxtLink :to="`/blog/${post.slug.current}`">
7          {{ post.title }}
8        </NuxtLink>
9      </li>
10    </ul>
11  </div>
12</template>
13
14<script setup lang="ts">
15import { client } from '~/lib/sanity'
16
17const { data: posts } = await useAsyncData('posts', () =>
18  client.fetch(`
19    *[_type == "post"] | order(publishedAt desc) {
20      _id,
21      title,
22      slug,
23      publishedAt,
24      "author": author->name
25    }
26  `)
27)
28</script>

1<template>
2  <article v-if="post">
3    <h1>{{ post.title }}</h1>
4      <p>By {{ post.author }} • {{ formatDate(post.publishedAt) }}</p>
5    <SanityContent :blocks="post.body" />
6  </article>
7</template>
8
9<script setup lang="ts">
10import { client } from '~/lib/sanity'
11
12const route = useRoute()
13const { data: post } = await useAsyncData(`post-${route.params.slug}`, () =>
14  client.fetch(`
15    *[_type == "post" && slug.current == $slug][0] {
16      title,
17      body,
18      publishedAt,
19      "author": author->name
20    }
21  `, { slug: route.params.slug })
22)
23
24const formatDate = (date: string) => {
25  return new Date(date).toLocaleDateString('en-US', {
26    year: 'numeric',
27    month: 'long',
28    day: 'numeric'
29  })
30}
31</script>