NuxtJS
lastmod 2022-09-29created 2020-12-239 edits
Build reliable Vue.js applications with NuxtJS. An open-source framework that makes web development simple and powerful.
Features
- Automatic transpilation and bundling (with webpack and babel)
- Hot code reloading
- Server-side rendering OR Single Page App OR Static Generated, you choose fire
- Static file serving.
./static/is mapped to/ - Configurable with a nuxt.config.js file
- Custom layouts with the
layouts/directory - Middleware
- Code splitting for every
pages/ - Loading just the critical CSS (page-level)
Commands
- dev - runs the development server with hot-reloading at localhost:3000.
- build - builds the application with Webpack.
- start - starts the server in production (nuxt deployment) mode. (Run after build.)
- generate - builds the application and generates every route as an HTML file. (Static hosting)
Directory structure
- assets
- Contains resources such as css, images, and fonts.
- components
- Contains the components used in the application. Components located in this path cannot use asyncData or fetch, the asynchronous data functions of Nuxt.js.
- content
- content lets you extend the application using the @nuxt/content module. You can fetch and manage files such as Markdown, JSON, YAML, XML, and CSV. See nuxt/contents for more information.
- layouts
- Contains the layouts for the whole application. default.vue is created by default, and you can create layouts as needed. This directory cannot be renamed.
- middleware
- Contains the middleware used in the application. Middleware runs before a page or layout is rendered, and if middleware is bound to a page or layout, it runs every time before that page or layout runs.
- module
- Nuxt Modules can extend, integrate, and add to the core functionality of the Nuxt framework. Users can write their own modules, and many modules are already published in the Nuxt community.
- pages
- Contains the actual page structure of the application, and the router is generated automatically according to the structure of this directory. This directory cannot be renamed.
- plugins
- Contains external or internal plugins to be bound to the application. Plugins run before the application is instantiated, and can register components globally and inject functions or constants.
- static
- This directory contains static files. Depending on the configuration, html and Javascript files can also be included. This directory cannot be renamed.
- store
- Contains the vuex store files used in the application. It is disabled by default, and the store is enabled by creating an index.js file in the store directory. Depending on the configuration, a modular store can be formed. This directory cannot be renamed.