Cloak

Opinionated Nuxt boilerplate with support for Craft and Contentful.

Install

The recommended way to use Cloak is to install it with yarn create cloak-app. This command use create-cloak-app and will scaffold a new Nuxt app that uses Cloak.

Usage

From your project's nuxt.config.coffee:

# Make boilerplate, setting some options
{ mergeConfig, makeBoilerplate } = require '@bkwld/cloak'
boilerplate = makeBoilerplate
  siteName: 'My Site'
  cms: 'craft'
  pageTypes: ['towers_towers_Entry']

# Merge project specific config with cloak boilerplate
module.exports = mergeConfig boilerplate,

  # Append additional internal routes for vue-routing-anchor-parser
  anchorParser: internalUrls: [
    /^https?:\/\/(www)?\.domain\.com/
  ]

  # Customize routes
  router: extendRoutes: (routes, resolve) ->

    # Make all path params required in detail routes
    detailRoutes = ['blog-tag-tag', 'blog-category-article']
    routes.filter ({ name }) -> name in detailRoutes
    .forEach (route) -> route.path = route.path.replace /\?/g, ''

    # Append routes from boilerplate
    return boilerplate.router.extendRoutes routes, resolve

Options

These are options you can pass to makeBoilerplate. See the source code for defaults.

General

| Property | Description | | -------- | ----------- | | siteName | Name of site gets prepended to the <title> and used in PWA manifest. | | polyfills | Array of polyfill.io keywords, for example URL. |

CMS

| Property | Description | | -------- | ----------- | | cms | May be empty, craft, or contentful. | | pageTypes (if Craft) | An array of Craft _typename values. | | pageTypes (if Contentful) | An array of objects with the following properties: contentType (a Contentful contentType string), routeField (the field that holds the value you'll use in your route, defaults to "slug"), and route (a function that is passed the value from the routeField and which should return a route path). | | generateOnlyRoutes | Craft only. Typically we generate a gql query per pageType that fetches the data for all entries, passing their data into the page components as the payload. Set this to true to disable this. You would do this on sites with many entries because this query becomes very expensive for Craft to execute. |

Visual

| Property | Description | | -------- | ----------- | | imgixUrl | For example, https://project.imgix.net. | | srcsetWidths | Array of integer widths that are used to make the Visual srcSet. | | placeholderColor | The default placeholder color for Visual. |

Other Config

Contentful

The following ENV variables are expected to use Contentful

| Property | Description | | -------- | ----------- | | CONTENTFUL_SPACE | The space id. | | CONTENTFUL_ACCESS_TOKEN | The Delivery API access token. | | CONTENTFUL_PREVIEW_ACCESS_TOKEN | The Preview API access token. | | CONTENTFUL_PREVIEW | Set to true use the Preview API rather than the Delivery API. Aka, to return draft/changed entries. |

Sentry

To enable Sentry logging, you'll need to set the following ENV variables:

| Property | Description | | -------- | ----------- | | SENTRY_DSN | This will be provided when you create a new project in Sentry. | | SENTRY_AUTH_TOKEN | Get this from your user API settings. You need the org:read and project:releases permissions for the token (per authToken docs from sentry-webpack-plugin). |

You also need to create a .sentryclirc as described here. create-cloak-app will have already created this. Example:

[defaults]
org=bukwild
project=my-project

Libraries

Besides providing a bunch of nuxt.config boilerplate, this project also provides these shared resources:

• components - Vue components that are already setup for autodiscovery with no prefixing.
• fragments - GraphQL fragments for common objects
• mixins - Vue mixins
• services - Libraries of methods that can be imported into your code and which are also injected globally. For example, @$craft and @$defer are available in all components.

Notes

• Using cjs module syntax for to make developing via yarn link simpler. I tried using esm package but it ran into issues with imports of imports.
• Using a fork of webpack-graphql-loader to work around issues with the loader not being found from the root package. I think because it referenced some old and unecessary deps.
• Use the Page View dataLayer event for firing Page View style tags from GTM