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

Develop Components, not Websites

When building a site with Nuxt and Agility, we always recommend developers start by taking a look at our agilitycms-nuxt-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. 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
      • 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 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 get started with Agility CMS and Nuxt.js, Sign Up for a Free Agility CMS account to gain access to an instance. 


Since the Nuxt starter is fairly new, in order to showcase best-practices, evaluate, and help onboard new users when using Agility CMS with Nuxt, we recommend signing up for our pre-configured Next.js Starter Blog, which happens to share the same Content Model with the Nuxt starter.

How to sign up for the Next.js Starter Blog


Get The Code and Set Up your Environment

Once your Next.js Starter Blog template instance is up and running, you'll want to get the Nuxt code for it and configure it to connect to your Agility CMS Instance.

Setting up your Development Environment



1 out of 1 found this helpful



Please sign in to leave a comment.