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.- 1.We configure
nuxt
loader at build time insidenuxt.config.ts
- 2.
- 3.
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!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.Parts that you will need the most:
- 1.
- 2.
- 3.
- 4.
- 5.
build
option, which allows extending the defaultwebpack
build configuration. Add your own loaders and plugins here in case you need them
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.Currently, we extend build with several rules:
- enable linting with
eslint
andstylelint
in development - settings handy alias for
scss
imports - disabling crazy
css
classes names during tests
Sometimes it is required to provide additional pages to prerender, or provide dynamic values to the dynamic pages.
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
.Rules defined there are just some hacks and fixes to make our development experience better.
It has a lot of options:
setupFiles
is used to specify which files will be executed before all testsmoduleFileExtensions
specifies which module we can safely import fromjest
transform
specifies which parsers to use when importing different files
We also configure several tools inside
package.json
itself. Here's a list of these tools.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
Last modified 4yr ago