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.
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 & Gatsby Starter, sign up for a FREE account and create a new Instance using the Blog Template.
- Clone this repository
- Run
npm install
oryarn install
- Rename the
.env.example
file to.env
- 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.
yarn install
yarn dev
npm install
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.
yarn build
yarn generate
yarn start
npm run build
npm run generate
npm run start
Nuxt.js allows you to deploy your site as a statically generated
site or as a server-side rendered
site.
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>
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.