Configuration

There's a lot of configuration in nuxt! But, it is much easier than configuring webpack and other common tools. We will try to cover the most important parts here.

.env

We use dotenv configuration files to configure many things at once:

  1. We configure nuxt loader at build time inside nuxt.config.ts

  2. We configure nuxt app with the help of dotenv-module

  3. We configure our docker image with the help of env_file option

It is possible that you may miss config/.env file because it is ignored and excluded from git. In this case, you will just need to copy config/.env.template and fill in all values that you need:

cp config/.env.template config/.env

Make sure that config/.env is kept secret!

API_URL

Variable API_URL represent your API server base url. It is used as a base url for all relative urls we use to make axios calls.

There are situations when you need to switch between different versions of your API: development or production, first version of your API or second version. The are multiple use-cases!

In this case, modify this single value inside your config/.env file.

nuxt.config.ts

As it was already said nuxt requires a lot of configuration.

Parts that you will need the most:

  1. vendor option, which specifies what packages should be packed as vendor bundle

  2. head option, which specifies meta-data for your html pages

  3. plugins option, which specifies what files should be run before creating root Vue instance

  4. css option, which specifies global css options

  5. build option, which allows extending the default webpack build configuration. Add your own loaders and plugins here in case you need them

axios

We use axios-module for nuxt instead of a regular axios because there are tons of goodies that are already included: retries, loading indicators, server-side proxy calls, https enforcement, and so on.

It is all configured under axios key in nuxt.config.ts. See list of available options here.

build

Currently, we extend build with several rules:

  • enable linting with eslint and stylelint in development

  • settings handy alias for scss imports

  • disabling crazy css classes names during tests

generate

This option is used when we run npm run generate.

Sometimes it is required to provide additional pages to prerender, or provide dynamic values to the dynamic pages.

See routes key for more information.

When using spa mode you will need to add some extra configuration due to router-module usage.

stylelint

stylelint is a linter for your css, scss, and postcss. We use stylelint.config.js to configure our style linter.

Its configuration specifies which styles it should use. Pretty similar to eslint.

Basically we use two configurations: for scss and for css-modules.

Rules defined there are just some hacks and fixes to make our development experience better.

Read more about linting here.

jest

jest is a test runner that is used for unit tests. We use tests/jest.config.js to configure jest.

It has a lot of options:

  • setupFiles is used to specify which files will be executed before all tests

  • moduleFileExtensions specifies which module we can safely import from jest

  • transform specifies which parsers to use when importing different files

  • moduleNameMapper is used to match our webpack aliases in jest

Read more about testing here.

package.json

We also configure several tools inside package.json itself. Here's a list of these tools.

browserslist

This setting is very important. It specifies all the browsers that we use in our project.

It is required for multiple tools that are used in the project:

  • eslint

  • stylelint

  • postcss

To see what browsers are used in your project run: npx browserslist Read more about queries here.

PreviousDevelopmentNextEditors

Last updated