Displaying content in a Nuxt.js front end

You’ve configured your Studio with a post document type and learned how to query from your hosted dataset. Before deploying the Studio, let’s query and display this content on the front-end framework of your choice.

1Install a new Nuxt application

If you have an existing application, skip this first step and adapt the rest of the lesson to install Sanity dependencies to fetch and render content.

Run the following in a new tab or window in your Terminal (keep the Studio running) to create a new Nuxt application using the Nuxt UI template for Tailwind CSS.

You should now have your Studio and Nuxt application in two separate, adjacent folders:

# outside your studio directory
npm create nuxt@latest -- nuxt-hello-world -t ui -M ""
cd nuxt-hello-world
├─ /nuxt-hello-world
└─ /studio-hello-world

2Install Sanity dependencies

Run the following inside the nuxt-hello-world directory to:

  • Install and configure the Nuxt Sanity integration
  • Install @sanity/image-url for generating images from Sanity content
npx nuxi@latest module add sanity
npm install @sanity/image-url @tailwindcss/typography

3Configure the Sanity client

Update the integration configuration with your project details. If you named your Studio directory something other than studio-hello-world, update schemaTypesPath so typegen can read your schema.

export default defineNuxtConfig({
  modules: ['@nuxt/eslint', '@nuxt/ui', '@nuxtjs/sanity'],
  eslint: { ... },
  // 👇 Add these lines
  sanity: {
    projectId: '',
    dataset: '',
    apiVersion: '2025-05-15',
    typegen: {
      enabled: true,
      schemaTypesPath: '../studio-hello-world/schemaTypes',
      queryPaths: ['./app/**/*.{ts,tsx,vue}']
    }
  },
});

4Start the development server

Run the following command and open http://localhost:3000 in your browser.

npm run dev

5Display content on the home page

Nuxt performs data fetching inside script tags at the top of .vue files.

Create a route for a page with a list of posts fetched from your Sanity dataset, and visit http://localhost:3000

<script setup lang="ts">
  const postsQuery = groq`*[
    _type == "post"
    && defined(slug.current)
  ]|order(publishedAt desc)[0...12]{_id, title, slug, publishedAt}`

  const { data: posts } = await useSanityQuery<PostsQueryResult>(postsQuery)
</script>

<template>
  <main class="container mx-auto min-h-screen max-w-3xl p-8">
    <h1 class="text-4xl font-bold mb-8">Posts</h1>
    <ul class="flex flex-col gap-y-4">
      <li v-for="post in posts" :key="post._id" class="hover:underline">
        <nuxt-link :to="`/${post.slug.current}`">
          <h2 class="text-xl font-semibold">{{ post.title }}</h2>
          <p>{{ new Date(post.publishedAt).toLocaleDateString() }}</p>
        </nuxt-link>
      </li>
    </ul>
  </main>
</template>

6Display individual posts

Create a new route for individual post pages.

The dynamic value of a slug when visiting /[slug] in the URL is used as a parameter in the GROQ query used by Sanity Client.

Notice that we’re using Tailwind CSS Typography’s prose class to style the post’s body content. We installed @tailwindcss/typography in the dependencies step. Enable it by adding @plugin "@tailwindcss/typography"; to app/assets/css/main.css below the existing @import "tailwindcss"; line.

<script setup lang="ts">
  import type { SanityDocument } from "@sanity/client";
  import {
    createImageUrlBuilder,
    type SanityImageSource,
  } from "@sanity/image-url";

  const POST_QUERY = groq`*[_type == "post" && slug.current == $slug][0]`;
  const { params } = useRoute();

  const { data: post } = await useSanityQuery<SanityDocument>(POST_QUERY, params);
  const { projectId, dataset } = useSanity().client.config();
  const urlFor = (source: SanityImageSource) =>
    projectId && dataset
      ? createImageUrlBuilder({ projectId, dataset }).image(source)
      : null;
</script>

<template>
  <main
    v-if="post"
    class="container mx-auto min-h-screen max-w-3xl p-8 flex flex-col gap-4"
  >
    <a href="/" class="hover:underline">&larr; Back to posts</a>
    <img
      v-if="post.image"
      :src="urlFor(post.image)?.width(550).height(310).url()"
      :alt="post?.title"
      class="aspect-video rounded-xl"
      width="550"
      height="310"
    />
    <h1 v-if="post.title" class="text-4xl font-bold mb-8">{{ post.title }}</h1>
    <div class="prose">
      <p v-if="post.publishedAt">
        Published: {{ new Date(post.publishedAt).toLocaleDateString() }}
      </p>
      <SanityContent v-if="post.body" :value="post.body" />
    </div>
  </main>
</template>

Was this page helpful?

Previous

Query content with GROQ

Next

Deploying Studio and inviting editors

sanity.ioAll Systems Operational© Sanity 2026
Change site theme