Composables

<script setup>
const { data: post } = await useGetEntry({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123456789',
  referenceFieldPath: ['author', 'category', 'related_posts'],
  jsonRtePath: ['content', 'description'],
  locale: 'en-us'
})
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    
    <!-- Author information -->
    <div v-if="post.author">
      <p>By {{ post.author.name }}</p>
      <img :src="post.author.avatar.url" :alt="post.author.name">
    </div>
    
    <!-- Category -->
    <span v-if="post.category" class="category">
      {{ post.category.title }}
    </span>
    
    <!-- Content with converted rich text -->
    <div v-html="post.content"></div>
    
    <!-- Related posts -->
    <div v-if="post.related_posts?.length">
      <h3>Related Posts</h3>
      <div v-for="related in post.related_posts" :key="related.uid">
        <NuxtLink :to="`/blog/${related.url}`">
          {{ related.title }}
        </NuxtLink>
      </div>
    </div>
  </article>
</template>

<script setup>
const currentYear = new Date().getFullYear()

const { data: result } = await useGetEntries({
  contentTypeUid: 'blog_post',
  referenceFieldPath: ['author', 'tags'],
  limit: 20,
  skip: 0,
  orderBy: 'published_at',
  includeCount: true,
  where: {
    // Exact match
    status: 'published',
    
    // Array contains
    tags: ['vue', 'nuxt'],
    
    // Comparison operators
    view_count: { $gt: 1000 },
    published_at: { 
      $gte: `${currentYear}-01-01`,
      $lt: `${currentYear + 1}-01-01`
    },
    
    // Existence checks
    featured_image: { $exists: true },
    
    // Pattern matching
    title: { $regex: 'nuxt.*contentstack' },
    
    // Not equal
    author: { $ne: 'guest' }
  }
})
</script>

<script setup>
const { data: asset } = await useGetAsset({
  assetUid: 'blt123456789',
  locale: 'en-us'
})
</script>

<template>
  <div v-if="asset">
    <img :src="asset.url" :alt="asset.title">
    <p>{{ asset.description }}</p>
  </div>
</template>

<script setup>
const { data: result } = await useGetAssets({
  locale: 'en-us',
  limit: 20,
  includeCount: true,
  where: {
    content_type: 'image/jpeg'
  }
})

const images = computed(() => result.value?.assets || [])
const totalCount = computed(() => result.value?.count || 0)
</script>

<template>
  <div class="gallery">
    <p>Total: {{ totalCount }}</p>
    <div v-for="image in images" :key="image.uid">
      <img :src="image.url" :alt="image.title">
    </div>
  </div>
</template>

<script setup>
const { data: result } = await useGetAssets({
  locale: 'en-us',
  limit: 50,
  skip: 0,
  orderBy: 'created_at',
  includeCount: true,
  where: {
    content_type: 'image/jpeg',
    // Note: content_type is filtered server-side, other filters are applied client-side
    file_size: { $gt: '10000' },
    title: { $regex: 'hero' }
  }
})

const totalAssets = computed(() => result.value?.assets?.length || 0)
</script>

<script setup>
const { data: page, refresh } = await useGetEntryByUrl({
  contentTypeUid: 'page',
  url: '/about'
})

// refresh() is automatically called when content changes in live preview
</script>

<!-- Both components share the same cache -->
<ComponentA>
  const { data } = await useGetEntry({ contentTypeUid: 'page', entryUid: 'blt123' })
</ComponentA>

<ComponentB>
  const { data } = await useGetEntry({ contentTypeUid: 'page', entryUid: 'blt123' })
</ComponentB>

<script setup>
const { data: page, refresh } = await useGetEntryByUrl({
  contentTypeUid: 'page',
  url: '/about'
})

// Refresh content manually
const handleRefresh = async () => {
  await refresh()
}
</script>

<script setup>
// Automatically refreshes when content changes in Contentstack
const { data: page, refresh } = await useGetEntryByUrl({
  contentTypeUid: 'page',
  url: '/about'
})

// refresh() is called automatically by Live Preview SDK
</script>

// Force refresh all cached data
await refreshCookie('contentstack')

// Or use the composable's refresh method
await refresh()

<script setup>
// Cached automatically, refreshed on navigation
const { data: aboutPage } = await useGetEntryByUrl({
  contentTypeUid: 'page',
  url: '/about'
})
</script>

<script setup>
const { data: posts, refresh } = await useGetEntries({
  contentTypeUid: 'blog_post',
  limit: 10
})

// Refresh every 5 minutes
const interval = setInterval(() => {
  refresh()
}, 5 * 60 * 1000)

onUnmounted(() => clearInterval(interval))
</script>

<script setup lang="ts">
// Type-safe usage
const { data: post } = await useGetEntry<BlogPost>({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123456789',
})

// TypeScript knows the structure of post.value
if (post.value) {
  console.log(post.value.title) // ✅ Type-safe
  console.log(post.value.author?.name) // ✅ Type-safe with optional chaining
}
</script>

npm install -g @contentstack/cli

csdx auth:login

csdx plugins:install @contentstack/cli-plugin-tsgen

# Generate types for all content types
csdx tsgen --stack-api-key YOUR_API_KEY --output-dir ./types/contentstack

# Generate types for specific content types
csdx tsgen --stack-api-key YOUR_API_KEY --content-types blog_post,page --output-dir ./types/contentstack

# Generate types with specific environment
csdx tsgen --stack-api-key YOUR_API_KEY --environment production --output-dir ./types/contentstack

<script setup lang="ts">
import type { BlogPost } from '~/types/contentstack'

const { data: post } = await useGetEntry<BlogPost>({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123456789',
})
</script>

// ✅ Good - Type-safe
const { data: post } = await useGetEntry<BlogPost>({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123'
})

// ❌ Bad - No type safety
const { data: post } = await useGetEntry({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123'
})

const { data: post } = await useGetEntry<BlogPost>({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123'
})

// ✅ Safe - Check for null
if (post.value) {
  console.log(post.value.title)
}

// ✅ Safe - Use optional chaining
console.log(post.value?.title)

interface BlogPost {
  uid: string
  title: string
  author: {
    uid: string
    name: string
  }
  related_posts?: BlogPost[] // Self-referencing type
}

function isBlogPost(entry: unknown): entry is BlogPost {
  return (
    typeof entry === 'object' &&
    entry !== null &&
    'uid' in entry &&
    'title' in entry &&
    'content' in entry
  )
}

const { data: entry } = await useGetEntry({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123'
})

if (entry.value && isBlogPost(entry.value)) {
  // TypeScript knows entry.value is BlogPost
  console.log(entry.value.title)
}

<script setup>
const { data: post, status, error } = await useGetEntry({
  contentTypeUid: 'blog_post',
  entryUid: 'invalid-uid'
})

// Handle different states
</script>

<template>
  <div>
    <div v-if="status === 'pending'">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else-if="post">{{ post.title }}</div>
    <div v-else>No content found</div>
  </div>
</template>

<script setup>
const { data: post, error, status, refresh } = await useGetEntry({
  contentTypeUid: 'blog_post',
  entryUid: 'blt123456789'
})

// Check for specific error types
const handleError = () => {
  if (!error.value) return
  
  // Network errors - retry logic
  if (error.value.message?.includes('network') || error.value.message?.includes('fetch')) {
    console.warn('Network error, retrying...')
    setTimeout(() => refresh(), 2000)
    return
  }
  
  // Authentication errors - redirect to error page
  if (error.value.statusCode === 401 || error.value.statusCode === 403) {
    throw createError({
      statusCode: 401,
      statusMessage: 'Authentication failed'
    })
  }
  
  // Not found - show 404
  if (error.value.statusCode === 404) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Content not found'
    })
  }
}

watch(error, handleError, { immediate: true })
</script>

<script setup>
const {
  stack,                      // Contentstack Delivery SDK Stack instance
  livePreviewEnabled,         // Whether live preview is active
  editableTags,               // Whether editable tags are enabled
  variantAlias,               // Current personalization variant alias (reactive)
  ContentstackLivePreview,    // Live Preview SDK instance
  personalizeSdk,             // Personalize Edge SDK instance (client-side only, null on server)
  VB_EmptyBlockParentClass,   // CSS class for Visual Builder empty blocks
} = useContentstack()
</script>

const { stack } = useContentstack()

// Create custom queries using the Stack instance
const query = stack.contentType('blog_post')
  .entry()
  .locale('en-us')
  .includeFallback()
  .includeEmbeddedItems()

const result = await query.query().find()

const { livePreviewEnabled, ContentstackLivePreview } = useContentstack()

if (livePreviewEnabled && import.meta.client) {
  // Custom live preview handlers
  ContentstackLivePreview.onEntryChange((data) => {
    console.log('Entry changed:', data)
    // Custom handling
  })
}

const { personalizeSdk, variantAlias } = useContentstack()

if (personalizeSdk) {
  // Set custom attributes
  await personalizeSdk.set({
    custom_attribute: 'value'
  })

  // Get variants
  const variants = personalizeSdk.getVariants()

  // Trigger custom events
  await personalizeSdk.triggerEvent('custom_event')

  // Check current variant alias
  console.log('Current variant:', variantAlias?.value)
}