Nuxt

The @astracms/nuxt package provides a Nuxt module for seamless AstraCMS integration with auto-imports and composables.

Installation

npm install @astracms/nuxt

pnpm add @astracms/nuxt

yarn add @astracms/nuxt

bun add @astracms/nuxt

Environment Variables

Create a .env file in your Nuxt project:

.env

ASTRACMS_API_KEY=your_api_key_here

Configuration

Add the module to your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@astracms/nuxt'],

  astracms: {
    apiKey: process.env.ASTRACMS_API_KEY,
  },
})

Composables

useAstraCMSPosts

Fetch posts with automatic reactivity:

pages/blog.vue

<script setup>
const { data: posts, pending, error } = await useAstraCMSPosts()
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

useAstraCMSPost

Fetch a single post:

pages/blog/[slug].vue

<script setup>
const route = useRoute()
const { data: post } = await useAstraCMSPost(route.params.slug)
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

useAstraCMSCategories

Fetch all categories:

<script setup>
const { data: categories } = await useAstraCMSCategories()
</script>

useAstraCMSTags

Fetch all tags:

<script setup>
const { data: tags } = await useAstraCMSTags()
</script>

Filtering Posts

The useAstraCMSPosts composable supports filtering options:

pages/blog.vue

<script setup>
const { data: posts, pending } = await useAstraCMSPosts({
  categories: ['technology', 'tutorials'],  // Filter by categories
  excludeCategories: ['internal'],          // Exclude categories
  tags: ['javascript', 'react'],            // Filter by tags
  excludeTags: ['draft'],                   // Exclude tags
  query: 'search term',                     // Search query
  format: 'html',                           // Content format
  limit: 10,                                // Max posts
  page: 1,                                  // Pagination
})
</script>

<template>
  <div v-if="pending">Loading...</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

Available Options:

Option	Type	Description
`categories`	`string[]`	Filter by category slugs
`excludeCategories`	`string[]`	Exclude category slugs
`tags`	`string[]`	Filter by tag slugs
`excludeTags`	`string[]`	Exclude tag slugs
`query`	`string`	Search query
`format`	`'html' \| 'markdown'`	Content format
`limit`	`number`	Max posts to return
`page`	`number`	Page number

On this page