Nuxt build directory

The .nuxt directory is the so-called build directory. It is dynamically generated and hidden by default. Inside the directory you can find automatically generated files when using nuxt dev or your build artifacts when using nuxt build. Modifying these files is great for debugging but remember that they are generated files and once you run the dev or build command again, anything that was saved here will be regenerated.

Nuxt build directory - 图1

The .nuxt directory should not be committed to your version control system and should be ignored through your .gitignore as it will be generated automatically when executing nuxt dev or nuxt build.

The buildDir Property

By default, many tools assume that .nuxt is a hidden directory, because its name starts with a dot. You can use the buildDir option to prevent that. If you do change the name remember to add the new name to your .gitignore file.

nuxt.config.js

  1. export default {
  2.   buildDir: 'nuxt-dist'
  3. }

Inside the .nuxt folder:

  • The router.js file is the generated router file that Nuxt generates for you when you put .vue files inside the pages folder. You can use this file for debugging for when you want to look up which routes are generated for vue-router and find out the names of a specific route.
  • The router.scrollBehavior.js which is your Router ScrollBehavior
  • The Components folder has all your Nuxt components such as NuxtChild and NuxtLink. It also contains the nuxt-build-indicator which is the page we see when your application is building and nuxt-loading which is your loading component that gets seen when we are waiting for your page to load. You will also find the nuxt-error page in here which contains the Nuxt default error page.
  • The mixins folder has the files needed for the Nuxt $fetch method.
  • The views folder contains your app template and your server error page.
  • The app.js is your main application file.
  • The client.js file is your client file needed for everything that happens client side.
  • The empty file is intentionally left empty for no-op aliases
  • The index.js file bootstraps your application.
  • The loading.html is the file that is used when the page is loading.
  • The middleware file is where your middleware is kept
  • The server.js file is all the code that is ran on the server
  • the utilities contains the utilities that Nuxt needs for it to work.

Deploying

The .nuxt folder is part of the files needed to deploy your SSR application. It is not needed for deploying your static Nuxt app though because we use the dist folder for that.