Nuxt.js Craft Boilerplate

Basic front-end and back-end boilerplate for Nuxt.js together with Craft 3 and Tailwind CSS.

Nuxt.js

Can be found in the frontend directory.

Build Setup

Copy .env.example to .env and fill in the environmental variables (for GraphQL token see Craft 3 - Installation).

To enable GraphQL IDE support copy graphql.config.example.json to graphql.config.json and execute npm run graphql-schema. This will also generate fragmentTypes.json which will add support for Craft Matrix fields to Apollo.

Sometimes CSS changes may not be visible, this is a weakness of PurgeCSS. To make sure you specific CSS is not purged, add a keyword used in the not visible CSS the whitelist in postcss.config.js.

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project (may require extra attention)
$ npm run generate

# generate Tailwind IDE CSS file
$ npm run tailwind-schema

# generate GraphQLs schema
$ npm run graphql-schema

# generate both GraphQLs schema and Tailwind IDE CSS file
$ npm run schemas

Modules

This installation comes pre-installed with the following Nuxt.js modules:

• @nuxtjs/apollo: Nuxt.js module to use Vue-Apollo to integrate GraphQL.
• @nuxtjs/axios: Secure and easy axios integration with Nuxt.js.
• @nuxtjs/dotenv: Loads your .env file into your application context.
• @nuxtjs/proxy: The one-liner node.js http-proxy middleware solution for Nuxt.js using http-proxy-middleware.
• @nuxtjs/redirect-module: Carrying over Craft redirects configuration.

Craft 3

Can be found in the backend directory.

Installation

Requires your own PHP server.

Copy .env.example to .env and fill in the environmental variables.

# install dependencies
$ composer install

To get your GraphQL token, go to Settings → CraftQL → Generate new token → Settings... and make sure that entries, globals and the relevant entry types (News, News Index and Navigation for the default boilerplate) are enabled.

Plugins

Comes pre-installed with CraftQL, SEOmatic, Redactor and Redirect.

For detailed explanation on how things work, checkout Nuxt.js docs.