Get Started With Contentstack and TwicPics on Nuxt

This guide will walk you through using TwicPics to optimize your Contentstack images.

Our demo project will use:

• Contentstack as headless Content Management System
• TwicPics to optimize images and videos
• Nuxt.js 2 (with TypeScript support) as front-end app

This tutorial requires using Node.js 12 or above. If you get stuck at any point, you can take a look at the example repository.

Oh, we just announced our partnership with Contentstack–read the announcement. 🎉

Setup Contentstack CLI

First, install the Contentstack CLI that will be used to interact with your Contenstack account.

npm install -g @contentstack/cli

Next, configure your Contentstack region. The CLI uses North America by default, so changing is not necessary for North American region users.

csdx config:set:region EU # for Europe
csdx config:set:region AZURE-NA # for Azure North American

Create your Contentstack stack

On Contentstack, your projects are named “stacks.” In this step, we will login to your Contentstack account and create a stack with some testing data.

First let’s login with the following command:

csdx auth:login

After successful authentication, run the following command to seed a project with testing data:

csdx cm:seed -r "contentstack/stack-starter-app"

This command will prompt you to select an organization and a destination stack to seed data. To avoid any errors, we recommend creating a new stack.

📌 Save your delivery token for later

Finally, navigate to your Contentstack settings to create a delivery token for the ‘development’ environment. This will be needed to retrieve data from localhost.

Scaffold your Nuxt.js project

In this step, we will clone the Contenstack Nuxt.js starter app. It comes packaged with the Nuxt TypeScript module. If you don’t use TypeScript, removing it should be straightforward.

Start by cloning the project:

git clone https://github.com/contentstack/contentstack-nuxtjs-starter-app/

The Nuxt.js app comes with dotenv support, and you can see your Contentstack configuration making use of it in nuxt.config.ts.

Open an .env file and add the necessary environment variables values:

CONTENTSTACK_REGION = <your_contentstack_region>
CONTENTSTACK_API_KEY = <api_key_of_your_stack>
CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_for_development>
CONTENTSTACK_ENVIRONMENT = <environment_name>

Install TwicPics components

Install the TwicPics components by running the following command:

npm install @twicpics/components

Update your nuxt.config.ts to add the TwicPics module:

export default {
  modules: [
      // add this at the end of the modules array
      "@twicpics/components/nuxt2"
    ],
    // Add a configuration entry for TwicPics
  twicpics: {
    "https://<your-domain>.twic.pics"
  }
}

Your configuration needs to reference your TwicPics domain. You can create one from your TwicPics dashboard, eg. nuxt-contentstack-demo.twic.pics. This is where your optimized assets will be served from.

You should also create a path, which will be used to retrieve your optimized assets later on. Paths allows a mapping between your domain (where the optimized assets will be served) and a source storage (where the original assets are stored.)

Here is an example path configuration:

• Path URL: / (empty)
• Path Source: https://eu-images.contentstack.com/ (where my Contentstack images are stored)

Using the configuration above, we can optimize images like following:

<template>
  <TwicImg :src="imageUrl" :alt="alt" />
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    props: {
      src: { required: true, type: String }
      // removed for clarity
    },
    computed: {
      imageUrl() {
        // TwicPics components don't need the full URL
        // It uses the domain from configuration to retrieve assets
        return this.src.replace('https://eu-images.contentstack.com/', '')
      }
    }
  })
</script>

Deploying to production

In this tutorial, we will use Vercel to deploy our project. You will need a Vercel account for this (it’s free.)

In Vercel, you can configure environment variables to be available at build time in your Project Settings > Environment Variables menu. Make sure that your environment variables have the correct configuration for production:

CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_for_production>
CONTENTSTACK_ENVIRONMENT = <environment_name>

You’re ready to hit Deploy. 🚀 Congrats!

For reference, your project should look something like the example repository. If you encounter any problems, do not hesitate to open an issue.

Until next time,