This is sample Nuxt.js starter site that uses Agility CMS and aims to be a foundation for building websites using Nuxt.js and Agility CMS.

Live Website Demo

New to Agility CMS? Sign up for a FREE account

• Uses @agility/agilitycms-nuxt-module - Agility CMS integration for Nuxt.js that supports Content Sync for ultra-fast build times, full page routing and static rendering, and easy async data loading for additional components.
• Supports full Page Management.
• Supports Preview Mode.
• Provides a functional structure that loads a Page Templates dynamically, and also dynamically loads and renders appropriate Agility CMS Page Modules (as Vue components).

This starter uses Tailwind CSS, a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

It also comes equipped with Autoprefixer, a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you.

To start using the Agility CMS & Nuxt.js Starter, sign up for a FREE account and create a new Instance using the Blog Template.

1. Clone this repository
2. Run npm install or yarn install
3. Rename the .env.example file to .env
4. Retrieve your GUID & API Keys (Preview/Fetch) from Agility CMS by going to Settings > API Keys.

How to Retrieve your GUID and API Keys from Agility

When running your site in development mode, you will see the latest content in from the CMS.

1. yarn install
2. yarn dev

1. npm install
2. npm run dev

When running your site in production mode, you will see the published from the CMS.

• build => This will build your site with webpack and minify the JS and CSS for production.
• generate => This will build your site and generate every route as an HTML file (used for static hosting).
• start => This will spin up a production server for your site.

1. yarn build
2. yarn generate
3. yarn start

1. npm run build
2. npm run generate
3. npm run start

Nuxt.js allows you to deploy your site as a statically generated site or as a server-side rendered site.

• Vercel - Optimized for Nuxt.js with best-in-class SSR and static generation. Deploy to Vercel
• Netlify - Great support for static generation with native redirect handling. Deploy to Netlify
• Azure Static Web Apps - Enterprise option with serverless functions for dynamic features. See Azure Static Web Apps Setup below.

Deploying your Nuxt.js Site

This starter includes optional support for deploying to Azure Static Web Apps with dynamic URL redirects handled by serverless Azure Functions.

If you plan to deploy to Azure Static Web Apps:

1. Install the SWA CLI and dependencies (optional, only if using Azure Static Web Apps):

   npm install -D @azure/static-web-apps-cli concurrently dotenv

2. The pre-build script will automatically generate redirects from Agility CMS:

   • api/redirects.json - Generated list of all redirects from your CMS
   • api/redirect/index.js - Azure Function that handles redirect matching
   • staticwebapp.config.json - Azure SWA routing configuration (already included in the starter)

This starter includes advanced GitHub Actions caching to dramatically speed up builds:

• Smart Dependency Caching: node_modules is cached and only reinstalled when package-lock.json changes
• Content-aware Build Cache: Build artifacts are cached with keys that include source file hashes
• Agility CMS Content Sync Cache: Downloaded content is preserved between builds
• Conditional Installation: Dependencies are skipped entirely when unchanged

• Content-only updates: ~1-1.5 minutes (down from 2-3 minutes)
• Code changes: ~2-2.5 minutes (still benefits from partial caching)
• Full rebuild: ~3 minutes (when dependencies change)

When you publish content changes in Agility CMS:

1. Webhook triggers GitHub Actions
2. node_modules restored from cache (~5s)
3. Agility content cache restored (~10s)
4. Nuxt generate runs with cached dependencies (~30-60s)
5. Site deployed (~30s)

Result: Most content updates deploy in under 90 seconds!

See the Build Status Page for real-time deployment monitoring.

3. Important: Add your Agility CMS credentials to .env:

   AGILITY_GUID=your-guid
   AGILITY_API_FETCH_KEY=your-api-key
   

To test your site locally with Azure Static Web Apps emulation:

# Terminal 1: Start Nuxt dev server
npm run dev

# Terminal 2: Start SWA CLI (in a new terminal)
npm run dev:swa

Then visit http://localhost:4280 to see your site with Azure Static Web Apps routing rules applied.

Note: The pre-build script runs automatically before npm run build or npm run generate and fetches all redirects from Agility CMS. This handles the 20KB size limit of staticwebapp.config.json by storing redirects in a separate JSON file and using an Azure Function to serve them dynamically at runtime.

To create a new Page Module, create a new Vue component within the src/components/agility-pageModules directory. Make sure the Vue component for the Page Module matches the name of the Page Module in the CMS.

Example of RichTextArea.vue Page Module:

<template>
  <div class="relative px-8">
    <div class="max-w-2xl mx-auto my-12 md:mt-18 lg:mt-20">
      <div class="prose max-w-full mx-auto" v-html="item.fields.textblob" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    contentID: Number,
    item: Object,
    page: Object,
    pageInSitemap: Object,
    dynamicPageItem: Object,
  },
};
</script>

To create a new Page Template, create a new Vue component within the src/components/agility-pageTemplates directory. Make sure the Vue component for the Page Template matches the name of the Page Template in the CMS.

Example of MainTemplate.vue Page Template:

<template>
  <ContentZone
    name="MainContentZone"
    :page="page"
    :pageInSitemap="pageInSitemap"
    :dynamicPageItem="dynamicPageItem"
    :moduleData="moduleData"
  />
</template>

<script>
import ContentZone from "../../AgilityContentZone";
export default {
  props: {
    page: Object,
    moduleData: Object,
    pageInSitemap: Object,
    dynamicPageItem: Object,
  },
  components: {
    ContentZone,
  },
};
</script>

• Official site
• Documentation

• Official site
• Documentation

• Official site
• Documentation

• Official Slack
• Blog
• GitHub
• Forums
• Facebook
• Twitter

If you have feedback or questions about this starter, please use the Github Issues on this repo, join our Community Slack Channel or create a post on the Agility Developer Community.