Nuxt Layer Starter

Create Nuxt extendable layer with this GitHub template.

Setup

Make sure to install the dependencies:

npm install

Working on your layer

Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.

The .playground directory should help you on trying your layer during development.

Running npm dev will prepare and boot .playground directory, which imports your layer itself.

Distributing your layer

Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.

To do so, you only have to check if files in package.json are valid, then run:

npm publish --access public

Once done, your users will only have to run:

npm install --save your-layer

Then add the dependency to their extends in nuxt.config:

defineNuxtConfig({
  extends: 'your-layer'
})

Link validation

The layer includes internal link validation for generated sites. It is disabled by default so upgrading the layer does not change existing builds.

Enable it when generating a downstream application in CI:

SDS_LINK_CHECK=true npm run generate

Generation exits with a nonzero status when a rendered page contains a broken internal route or fragment. Remote URLs are not fetched, and trailing-slash style is not enforced, so third-party availability and URL formatting do not make pull requests fail. Add this command to each downstream application's pull request workflow and make that workflow a required status check before merging.

Development Server

Start the development server on http://localhost:3000

npm dev

Production

Build the application for production:

npm build

Or statically generate it with:

npm generate

Locally preview production build:

npm preview

Checkout the deployment documentation for more information.

Google Analytics

We use the nuxt-gtag package to integrate with Google Tag Manager. See their documentation for details.

Instead of hard-coding your Google tag ID in your Nuxt configuration, you can set your desired option in your project's .env file, leveraging automatically replaced public runtime config values by matching environment variables at runtime.

# Overwrites the `gtag.id` module option
NUXT_PUBLIC_GTAG_ID=G-XXXXXXXXXX