Vue

The @astracms/vue package provides Vue 3 composables for fetching data from AstraCMS.

Installation

npm install @astracms/vue

pnpm add @astracms/vue

yarn add @astracms/vue

bun add @astracms/vue

Environment Variables

Create a .env file in your Vue project:

.env

VITE_ASTRACMS_API_KEY=your_api_key_here

Setup

Install the plugin in your Vue app:

main.ts

import { createApp } from 'vue'
import { createAstraCMSPlugin } from '@astracms/vue'
import App from './App.vue'

const app = createApp(App)

app.use(createAstraCMSPlugin({
  apiKey: import.meta.env.VITE_ASTRACMS_API_KEY,
}))

app.mount('#app')

Composables

usePosts

Fetch all posts:

<script setup>
import { usePosts } from '@astracms/vue'

const { posts, loading, error } = usePosts()
</script>

<template>
  <div v-if="loading">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>

usePost

Fetch a single post:

<script setup>
import { usePost } from '@astracms/vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const { post, loading, error } = usePost(route.params.slug)
</script>

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

useCategories

Fetch all categories:

<script setup>
import { useCategories } from '@astracms/vue'

const { categories } = useCategories()
</script>

<template>
  <ul>
    <li v-for="category in categories" :key="category.id">
      {{ category.name }}
    </li>
  </ul>
</template>

useTags

Fetch all tags:

<script setup>
import { useTags } from '@astracms/vue'

const { tags } = useTags()
</script>

<template>
  <div class="tag-cloud">
    <span v-for="tag in tags" :key="tag.id">
      {{ tag.name }}
    </span>
  </div>
</template>

Filtering Posts

The usePosts composable supports filtering options:

<script setup>
import { usePosts } from '@astracms/vue'

const { data: posts, loading } = usePosts({
  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="loading">Loading...</div>
  <ul v-else>
    <li v-for="post in data" :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