wemake-vue-template
  • Introduction
  • Architecture
  • FAQ
  • Development
  • Configuration
  • Editors
  • TypeScript
  • Vue
  • Styles
  • Linting
  • Testing
  • Docker
  • GitLab CI
  • QA
  • Production
Powered by GitBook
On this page
  • .env
  • API_URL
  • nuxt.config.ts
  • axios
  • build
  • generate
  • stylelint
  • jest
  • package.json
  • browserslist

Configuration

PreviousDevelopmentNextEditors

Last updated 5 years ago

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 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

  3. We configure our docker image with the help of 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 .

Parts that you will need the most:

axios

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

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

stylelint

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

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

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

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

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

option, which specifies meta-data for your html pages

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

option, which specifies global css options

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

We use 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 .

is used when we run npm run generate.

See for more information.

When using spa mode you will need to add some extra configuration due to .

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

Basically we use two configurations: for and for .

Read more about linting .

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

moduleNameMapper is used to match our in jest

Read more about testing .

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

dotenv
dotenv-module
env_file
configuration
vendor
head
plugins
css
build
axios-module
here
This option
routes key
router-module usage
stylelint
scss
css-modules
jest
webpack aliases
here
queries here
here