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
.