Documentation

Installation

  • Clone the repository and install the dependencies:

    git clone https://github.com/jsulpis/nuxtjs-template.git && cd nuxtjs-template && yarn

  • Update the package.json metadata with yours.

Configuration

Tailwind CSS

  • You may want to change the theme in tailwind.config.js to use your own color palette.
  • See the documentation for more details.

Purge CSS

  • This plugin, which is bundled with @nuxtjs/tailwindcss, will delete all unused CSS in the final bundle and dramatically reduce its size, but it comes with a few constraints. For example you will lose the css classes that you build dynamically using string concatenation if you don't use some tricks.
  • This article provides some solutions to common issues when working with Purge CSS.

Cypress

  • The project has scripts to run the Cypress tests locally and on the CI.
  • You can use the free plan of the Cypress Dashboard to have commit status checks on your pull requests. To do this, you need to login to the Cypress Dashboard, initialize the project, get the record key and put it as the environment variable CYPRESS_RECORD_KEY in Travis. More information on the documentation.

SonarCloud

  • Create a new project on SonarCloud and note the generated token.
  • Update the project description in sonar-project.properties.
  • See the Travis CI configuration below to trigger the analysis during the build.

Travis CI

  • Activate your repository in your Travis CI settings to trigger the builds on git push.
  • In the repository settings, add an environment variable called SONAR_TOKEN and paste it the token you got when creating the project on SonarCloud.
  • Change the sonarcloud organization in .travis.yml.
  • You should now have your pull requests analyzed and get checks from Travis CI and SonarCloud.

Deployment

The template is ready to be deployed on Netlify so the following instructions target this platform. Of course you can easily deploy it with any other hosting platform like Vercel.

Environment variables

You will need to add some environment variables in your Netlify dashboard (Site Settings > Build & deploy > Environment).

  • NODE_VERSION: 12 (some packages do not support the default node version on Netlify)
  • the 'URL' variable, which is the main url of the site, is used in the social networks meta tags. You can add it to your local .env file, but note that this is a built-in variable on Netlify so you don't have to add it in your settings.

Build settings

  • Build command: yarn generate
  • Publish directory: dist