VueJS: Cấu trúc thư mục
The default Nuxt.js directory structure providing good start point for small and large app. Of course, you can liberty contructure your app with the way you want.
Directories
The assets directory
The assets directory contains your uncompilation assets, such as Stylus or Sass files, images or fonts.
More documentation about assets intergrated
The components directory
The components directory contains your Vue.js components. You can not use either asyncData or fetch in these components.
The layouts directory
The layouts directory include your app layouts. Layouts are used to change your page UI (example: by include an aside bar).
More documentation about layouts intergrated
This directory can not be renamed without need add config.
The middleware directory
The middleware directory contains your app's Middleware. Middleware accept you defined custom functions can run before rendering page or group pages (layout).
More documentation about Middleware intergated
The pages directory
The pages directory contains view and routes of your app. This view read all of the .vue files in this directory and create app router.
This directory can not renamed without need more config.
More documentation about pages intergrated
The plugins directory
The plugins directory contains JavaScript plugins you want to run before starting root Vue.js app. This is where to register components global and to injects functions or constants.
More documentation about Plugins intergrated
The static directory
The static directory is directly mapped to root folder of server (/static/robots.txt accessible under http://localhost:3000/robots.txt) and contains files will not be able changed (ex: favicon)
Example: /static/robots.txt is mapped to /robots.txt
Thi directory can not be renamed without need more config.
More documentation about static intergrated
The store directory
The store contains your Vuex Store files. Vuex Store is attacted with Nuxt.js but it is not turn off by default. Creating an index.js file in this folder will accept store.
This directory can not be renamed without need more config.
More documentation about store intergrated
The nuxt.config.js file
nuxt.config.js file contains your custom config Nuxt.js.
This file can not be renamed without need more config.
More documentation about nuxt.config.js intergrated
The pack.json file
package.json file contains your dependencies app and commands.
This file can not be renamed.
Aliases
| Alias | Directory |
|---|---|
~ or @ |
srcDir |
| ~~ or @@ | rootDir |
By default, srcDir is same rootDir.
Info: Inside your vue templates, if you need link to your assets directory or static directory, using ~/assets/your_image.png and ~/static/your_image.png.