Contentstack Kickstart: NuxtJS

Contentstack Kickstarts are the minimum amount of code needed to connect to Contentstack. This kickstart covers the following items:

• SDK initialization
• Live preview and Visual building setup

More details about this codebase can be found on the Contentstack docs.

How to get started

Before you can run this code, you will need a Contentstack "Stack" to connect to. Follow the following steps to seed a Stack that this codebase understands.

If you installed this Kickstart via the Contentstack Markertplace or the new account onboarding, you can skip this step.

Install the CLI

npm install -g @contentstack/cli

Using the CLI for the first time?

It might ask you to set your default region. You can get all regions and their codes here or run csdx config:get:region.

Beware, Free Contentstack developer accounts are bound to the EU region. We still use the CDN the API is lightning fast.

Set your region like so:

csdx config:set:region EU

Log in via the CLI

csdx auth:login

Get your organization UID

In your Contentstack Organization dashboard find Org admin and copy your Organization ID (Example: blt481c598b0d8352d9).

Create a new stack

Make sure to replace <YOUR_ORG_ID> with your actual Organization ID and run the below.

csdx cm:stacks:seed --repo "contentstack/kickstart-stack-seed" --org "<YOUR_ORG_ID>" -n "Kickstart Stack"

Create a new delivery token.

Go to Settings > Tokens and create a delivery token. Select the preview scope and turn on Create preview token

Fill out your .env file.

Now that you have a delivery token, you can fill out the .env file in your codebase.

You can find the API key, Delivery Token and Preview Token in Settings > Tokens > Your token.

NUXT_CONTENTSTACK_API_KEY=<YOUR_API_KEY>
NUXT_CONTENTSTACK_DELIVERY_TOKEN=<YOUR_DELIVERY_TOKEN>
NUXT_CONTENTSTACK_PREVIEW_TOKEN=<YOUR_PREVIEW_TOKEN>
NUXT_CONTENTSTACK_REGION=EU
NUXT_CONTENTSTACK_ENVIRONMENT=preview
NUXT_CONTENTSTACK_PREVIEW=true

Regions and endpoint configuration

Set NUXT_CONTENTSTACK_REGION to the region your Contentstack account is on. The value is case-insensitive.

Region	Value
AWS North America	NA or US
AWS Europe	EU
AWS Australia	AU
Azure North America	AZURE-NA
Azure Europe	AZURE-EU
GCP North America	GCP-NA
GCP Europe	GCP-EU

Not sure which region you're on? Check your Contentstack dashboard URL — eu-app.contentstack.com means EU, app.contentstack.com means NA. Free developer accounts are on EU.

All API endpoints (content delivery, live preview, Visual Builder) are automatically resolved from your region. You do not need to set them manually.

The following endpoint keys are resolved per region and available if you ever need them directly via getContentstackEndpoint from @contentstack/utils:

Key	NA value
contentDelivery	cdn.contentstack.io
preview	rest-preview.contentstack.com
application	app.contentstack.com
graphqlDelivery	graphql.contentstack.com
graphqlPreview	graphql-preview.contentstack.com
images	images.contentstack.io
assets	assets.contentstack.io
contentManagement	api.contentstack.io
auth	auth-api.contentstack.com

Custom or dedicated environments

If your Contentstack account runs on a dedicated or private cloud instance, the standard region-based endpoints may not apply. In that case, override each endpoint individually using these environment variables. Only set these if instructed by Contentstack support — standard accounts should leave them unset.

NUXT_CONTENTSTACK_CONTENT_DELIVERY=your-custom-cdn.example.com
NUXT_CONTENTSTACK_PREVIEW_HOST=your-custom-preview.example.com
NUXT_CONTENTSTACK_CONTENT_APPLICATION=your-custom-app.example.com

Turn on Live Preview

Go to Settings > Live Preview. Click enable and select the Preview environment in the drop down. Hit save.

Install the dependencies

npm install

Run your app

npm run dev

See your page visually

In the browser

Go to http://localhost:3000.

In the CMS

Go to Entries and select the only entry in the list. In the sidebar, click on the live preview icon. Or, see your entry in the visual builder