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:
- Image: Image type with key
image - Content: Rich text with key
content
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
.find({
type: 'blog-posts',
})
.props('title,metadata.image,metadata.content')
function getImage(URL: string) {
return `${URL}?w=500&auto=format,compression`
}
</script>
<template>
<div>
<div v-for="post in posts" v-bind:key="post.title">
<div>{{ post.title }}</div>
<div>
<img
:src="getImage(post.metadata.image.imgix_url)"
alt="{{ post.title }}"
/>
</div>
<div>{{ post.metadata.content }}</div>
</div>
</div>
</template>
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
BUCKET_SLUG=add_your_bucket_slug_here
BUCKET_READ_KEY=add_your_bucket_read_key_here
Start the app
Start your app with the following command, go to http://localhost:3000, and see your blog posts.
npm run dev