This is a beautiful Blog with Nuxt.js. Nuxt.js is a powerful and simple open-source framework for building websites on the Jamstack using Vue, and we've unlocked that power with AgilityCMS in this starter template. This project is can be very helpful for beginner developers who are learning NuxtJs to improve their skills in web development.
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 React 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 installoryarn install - Rename the
.env.examplefile 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 installyarn dev
npm installnpm 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 buildyarn generateyarn start
npm run buildnpm run generatenpm 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.