Getting Started

Introduction

Learn about Nuxt Contentstack, a powerful integration module that brings together Contentstack CMS and Nuxt framework for modern content-driven applications.

Welcome to Nuxt Contentstack - a comprehensive and developer-friendly integration between the Contentstack platform and Nuxt.

New to Contentstack? Get started with a free Contentstack Explorer account - perfect for development and testing! No credit card required.

Community Module: This is an open-source community project maintained by @timbenniks and not an officially maintained package by the Contentstack team. Support is provided through GitHub issues and community channels.

What is Nuxt Contentstack?

Nuxt Contentstack is a Nuxt module that provides a seamless, type-safe integration with Contentstack's platform. It offers a complete set of composables, utilities, and features that make building content-driven applications with Nuxt and Contentstack both powerful and enjoyable.

Requirements

This module requires:

Nuxt 3.20.1 or higher (including Nuxt 4.x)
@nuxt/image ^2.0.0 (only required for image provider functionality)

@nuxt/image: The module can run without @nuxt/image, but it's required if you want to use the Contentstack image provider for image optimization features. Install it with: npm install @nuxt/image@^2.0.0

Key Features

🚀 Easy Setup & Configuration

Simple, intuitive configuration API
Auto-detection of environment settings
Smart defaults that work out of the box
Comprehensive error handling and validation

🔧 Complete TypeScript Support

Full type safety for content models
Intelligent autocomplete and IntelliSense
Generated types for your content structures
Runtime type checking for development

📦 Rich Composables

useContentstack - Access the Contentstack SDK, Live Preview, and Personalize instances
useGetEntry - Fetch single entries by UID
useGetEntryByUrl - Query entries by URL field
useGetEntries - Fetch multiple entries with filtering
useGetAsset & useGetAssets - Asset management
useImageTransform - Dynamic image transformations

⚡ Live Preview & Visual Builder

Real-time content editing experience
Visual Builder integration
Instant preview without page refreshes
Configurable edit buttons and tagging

🎨 Image Optimization

Seamless @nuxt/image integration
Contentstack Image Delivery API support
Responsive images with automatic optimization
Advanced transformation capabilities

🧩 Vue Components

ContentstackModularBlocks - Flexible modular block rendering
Auto-fetch capability for dynamic page building
Built-in SEO metadata support with useSeoMeta integration
Live Preview integration with visual builder support
Fallback components for unmapped block types

🌐 Personalization

Built-in Contentstack Personalize support
Easy attribute setting and event tracking
Variant-based content delivery
Real-time personalization

🌍 Multi-Region & Localization

Support for all Contentstack regions
Comprehensive localization features
Fallback content handling
Multi-branch support

Getting Started

Ready to dive in? Let's get you set up with Nuxt Contentstack:

Quick Installation

Install and configure the module in your Nuxt project in just a few minutes.

Quick Start

Get started quickly with practical examples you can copy and use right away.

Configuration Guide

Learn about all configuration options and best practices for your setup.

Components & Blocks

Learn about ContentstackModularBlocks and building dynamic page layouts.

Need Help?

📖 Documentation: You're reading it! Comprehensive guides and examples
🎓 Academy Courses: Learn Contentstack fundamentals with Contentstack Academy developer courses
🐛 Issues: GitHub Issues for bugs and feature requests
💬 Community: Contentstack Discord for discussions
🐦 Updates: Follow @timbenniks for news and updates

Let's build something amazing with Nuxt and Contentstack! 🚀

Edit this pageorReport an issue

Installation

Learn how to install and set up Nuxt Contentstack in your project with step-by-step instructions and configuration options.