Follow the steps below to get started with Cosmic to power content for your Nuxt application.

Install a new Nuxt app

npx nuxi@latest init cosmic-nuxt

Install the Cosmic JavaScript SDK

Install the Cosmic JavaScript SDK in the location of the codebase.

npm i @cosmicjs/sdk

Add an Object type in the Cosmic dashboard

Log in to the Cosmic dashboard and create a new Blog Posts Object type in a new or existing Project with the following metafields:

  1. Image: Image type with key image
  2. Content: Rich text with key content

Blog model

Add content

Add a few blog posts to get some content ready to be delivered.

Add the following code to your app.vue file

<!-- // app.vue -->
<script setup lang="ts">
import { createBucketClient } from '@cosmicjs/sdk';
const cosmic = createBucketClient({
  bucketSlug: process.env.BUCKET_SLUG || '',
  readKey: process.env.BUCKET_READ_KEY || '',
const { objects: posts } = await cosmic.objects
    type: 'blog-posts',

  function getImage(URL: string) {
    return `${URL}?w=500&auto=format,compression`

    <div v-for="post in posts" v-bind:key="post.title">
      <div>{{ post.title }}</div>
          alt="{{ post.title }}"
      <div>{{ post.metadata.content }}</div>

Add your Cosmic API keys

In a new file titled .env.local add the following environment variables and make sure to switch out the values with your Cosmic API keys found in Project / API keys.

# .env.local

Start the app

Start your app with the following command, go to http://localhost:3000, and see your blog posts.

npm run dev