Getting Started with Nuxt.js and Agility CMS


This guide is meant for developers. Want to learn why Agility CMS and Nuxt work so well together?

Nuxt paired with Agility CMS is a stack that delivers remarkable Developer Experience (DX), enables lightning-fast User Experiences (UX), and allows for best-in-class Editor Experience (EX). This tutorial is aimed to help you get started with Nuxt and Agility CMS using a starter site.

Here is what we'll cover:

  1. Develop Components, not Websites
  2. Create a Free Agility CMS Account
  3. Get The Code and Set Up your Environment
  4. How the Starter Works
  5. Deploying your Nuxt.js Site

Develop Components, not Websites

When building a site with Nuxt and Agility, we always recommend developers start by taking a look at our agilitycms-nuxtjs-starter, rather than starting from a blank slate. It showcases features such as our native Page Management and shows how you should structure your Nuxt.js website. Our Nuxt.js and Agility starter serves as an example based on our recommended best practices.

Editors have fine-grain control with the ability to manage all aspects of their page. They're able to control what pages are on their website, and what is on each page. This means you can focus on building UI Components (i.e. Page Modules and Page Templates) that editors will use/reuse to compose their pages.

What's in a Page?

Page in Agility CMS has the following structure:

  • SEO Fields - title, url slug, description, keywords
  • Page Template - the layout of the page, which defines Content Zones
    • Content Zones {} - the areas where editors can add/manage Modules
      • Page Modules []- self-contained functional UI components representing what is on a page

All of your pages will be dynamically composed at build time, and incrementally updated as content changes.

Your entire website's look and feel will be dictated by the Page Templates and Page Modules you have available to your editors.

Page Templates and Modules

These will correspond to module Vue components in your source code and will automatically be rendered for you.

Sign up for a Free Agility CMS Account

In order to source content from Agility CMS, you'll need an account and access to an instance. When getting started with Agility CMS and Nuxt, we recommend using our Blog Template to get you comfortable and to view an example based on best practices.

How to sign up for the Blog Template

Get The Code and Set Up your Environment

Once you have your Blog Template instance up and running, you'll want to get the Nuxt.js site code for it and configure it to connect to your Agility CMS instance.

Setting up your Development Environment

How it Works

Your Nuxt.js site is configured and structured in a specific way to help you take full advantage of both Agility CMS and Nuxt.js development. 

How Pages Work

How Page Modules Work

How to Fetch Additional Data in Page Modules

How Page Templates Work

Deploying your Nuxt.js Site

Nuxt.js allows you to deploy your site as a Statically Generated site (SSG) or as a Server-Side Rendered Site (SSR).

Deploying your Nuxt.js Site


1 out of 1 found this helpful



Please sign in to leave a comment.