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.
dotenv configuration files to configure many things at once:
nuxt loader at build time inside
nuxt app with the help of
We configure our
docker image with the help of
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 represent your API server base url. It is used as a base url for all relative urls we use to make
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
As it was already said
nuxt requires a lot of configuration.
Parts that you will need the most:
vendor option, which specifies what packages should be packed as
head option, which specifies meta-data for your
plugins option, which specifies what files should be run before creating root
css option, which specifies global
build option, which allows extending the default
webpack build configuration. Add your own loaders and plugins here in case you need them
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.
Currently, we extend build with several rules:
enable linting with
stylelint in development
settings handy alias for
css classes names during tests
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.
routes key for more information.
spa mode you will need to add some extra configuration due to
stylelint is a linter for your
postcss. We use
stylelint.config.js to configure our style linter.
Its configuration specifies which styles it should use. Pretty similar to
Rules defined there are just some hacks and fixes to make our development experience better.
Read more about linting here.
jest is a test runner that is used for unit tests. We use
tests/jest.config.js to configure
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
transform specifies which parsers to use when importing different files
moduleNameMapper is used to match our
webpack aliases in
Read more about testing here.
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:
To see what browsers are used in your project run:
npx browserslist Read more about queries here.