// Access results
console.log(data.value?.entries); // Article[]
console.log(data.value?.count); // number (if includeCount: true)
`

$3

Fetch single asset by UID.

`ts
const { data } = await useGetAsset({
assetUid: "your_asset_uid",
locale: "en-us",
});
`

$3

Fetch multiple assets with filtering.

`ts
const { data } = await useGetAssets({
locale: "en-us",
limit: 20,
orderBy: "created_at",
includeCount: true,
where: {
content_type: "image/jpeg",
// Note: Most asset filters are applied client-side
},
});
`

$3

Supported in where clause for entry composables:

- Exact match: field: "value"
- Array contains: tags: ["tech", "news"]
- Comparison: field: { $gt: 100, $gte: 50, $lt: 200, $lte: 150, $ne: "value" }
- Existence: field: { $exists: true }
- Regex: field: { $regex: "pattern" }

$3

Transform Contentstack images programmatically.

`ts
const { transformedUrl, updateTransform, resetTransform } = useImageTransform(
imageUrl,
{
width: 800,
height: 600,
quality: 80,
format: "webp",
fit: "crop",
blur: 5,
saturation: 10,
brightness: 5,
overlay: {
relativeURL: "/watermark.png",
align: "bottom-right",
width: "20p",
},
sharpen: {
amount: 5,
radius: 2,
threshold: 0,
},
}
);

// Update reactively
updateTransform({ width: 1200, quality: 90 });
`

Components

$3

Renders Contentstack modular blocks as Vue components with optional auto-fetch capability. Auto-fetch is disabled by default. To enable auto-fetch, provide both contentTypeUid and url props. When using pre-fetched blocks, pass blocks via the blocks prop without providing contentTypeUid or url.

Pattern 1: Auto-fetch Entry

`vue



`

Pattern 2: Pre-fetched Blocks

`vue



`

$3

| Prop | Type | Default | Description |
| ---------------------- | ----------------------------------- | -------------------------------------- | ---------------------------------------------------------- |
| blocks | ContentstackBlock[] | [] | Array of modular blocks |
| componentMap | ComponentMapping | {} | Block type → Vue component mapping |
| fallbackComponent | Component | ContentstackFallbackBlock | Component for unmapped blocks |
| contentTypeUid | string | undefined | Content type for auto-fetch (required if using auto-fetch) |
| url | string | undefined | URL for auto-fetch (required if using auto-fetch) |
| blocksFieldPath | string | 'components' | Field path to extract blocks |
| referenceFieldPath | string[] | [] | Reference fields to include |
| jsonRtePath | string[] | [] | JSON RTE field paths |
| locale | string | 'en-us' | Locale |
| replaceHtmlCslp | boolean | editableTags | Replace HTML CSLP tags |
| seoMeta | SeoMetaInput | - | SEO metadata (passed to useSeoMeta) |
| autoSeoMeta | boolean \| Record | false | Auto-generate SEO from entry |
| containerClass | string | 'contentstack-modular-blocks' | Container CSS class |
| emptyBlockClass | string | 'visual-builder__empty-block-parent' | Empty block CSS class |
| showEmptyState | boolean | true | Show empty state |
| keyField | string | '_metadata.uid' | Key field for blocks |
| autoExtractBlockName | boolean | true | Auto-extract block name |

$3

Manual SEO:

`vue
:seo-meta="{
title: 'Page Title',
description: 'Page description',
ogImage: 'https://example.com/image.jpg',
}"
/>
`

Auto-generate SEO:

`vue




:auto-seo-meta="{
title: 'seo_title|title|name',
description: 'meta_description|description',
ogImage: 'featured_image.url',
}"
/>
`

Default auto-SEO mapping:

- title: seo_title → title → name
- description: seo_description → description → summary
- ogImage: featured_image.url → og_image.url → image.url

$3

- loading - Custom loading state (auto-fetch mode)
- error - Custom error state (auto-fetch mode)
- empty - Custom empty state

$3

Built-in fallback component for unmapped block types. Displays block title, type badge, and props as formatted JSON.

@nuxt/image Integration

> Note: This module requires @nuxt/image version 2.0.0 or higher. Make sure you have it installed before using the Contentstack image provider.

$3

The @nuxt/image module should already be installed as a peer dependency. If not, install it:

`bash
npm install @nuxt/image@^2.0.0
`

`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-contentstack", "@nuxt/image"],

image: {
providers: {
contentstack: {
name: "contentstack",
provider:
"node_modules/nuxt-contentstack/dist/runtime/providers/contentstack",
},
},
provider: "contentstack", // Optional: set as default
},
});
`

$3

`vue

`

$3

- auto: 'webp' | 'webp,compress'
- quality: number
- format: 'webp' | 'png' | 'jpg' | 'jpeg' | 'gif' | 'auto'
- width, height, dpr: number
- fit: 'bounds' | 'crop'
- blur, brightness, contrast, saturation: number
- sharpen: { amount, radius, threshold }
- overlay: { relativeURL, align, repeat, width, height, pad }

Development

`bash


Install dependencies

[npm-version-src]: https://img.shields.io/npm/v/nuxt-contentstack/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-contentstack
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-contentstack.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-contentstack
[license-src]: https://img.shields.io/npm/l/nuxt-contentstack.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-contentstack
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com