forked from nuxt/website-v2
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
93847fd
commit 31b3218
Showing
65 changed files
with
5,910 additions
and
5,828 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
{ | ||
"*.(js|ts|html|css|vue)":[ | ||
"*.(js|ts|html|css|vue|md)":[ | ||
"prettier --write" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,46 @@ | ||
--- | ||
title: Nuxt build directory | ||
description: 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. | ||
navigation.title: .nuxt | ||
category: directory-structure | ||
--- | ||
# 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. | ||
|
||
--- | ||
|
||
::alert{type="warning"} | ||
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. | ||
|
||
```js{}[nuxt.config.js] | ||
export default { | ||
buildDir: 'nuxt-dist' | ||
} | ||
``` | ||
|
||
### 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. | ||
--- | ||
title: Nuxt build directory | ||
description: 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. | ||
navigation.title: .nuxt | ||
category: directory-structure | ||
--- | ||
|
||
# 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. | ||
|
||
--- | ||
|
||
::alert{type="warning"} | ||
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. | ||
|
||
```js{}[nuxt.config.js] | ||
export default { | ||
buildDir: 'nuxt-dist' | ||
} | ||
``` | ||
|
||
### 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. |
227 changes: 114 additions & 113 deletions
227
content/en/docs/6.internals-glossary/6.internals-module-container.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,113 +1,114 @@ | ||
--- | ||
title: The ModuleContainer class | ||
navigation.title: Module Container | ||
description: Nuxt ModuleContainer Class | ||
category: internals-glossary | ||
--- | ||
# The ModuleContainer class | ||
|
||
--- | ||
|
||
- Source: **[core/module.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/core/src/module.js)** | ||
|
||
All [modules](/docs/directory-structure/modules) will be called within context of `ModuleContainer` instance. | ||
|
||
## Tapable plugins | ||
|
||
We can register hooks on certain life cycle events. | ||
|
||
```js | ||
nuxt.moduleContainer.plugin('ready', async moduleContainer => { | ||
// Do this after all modules where ready | ||
}) | ||
``` | ||
|
||
Inside [modules](/docs/directory-structure/modules) context we can use this instead: | ||
|
||
```js | ||
this.plugin('ready', async moduleContainer => { | ||
// Do this after all modules where ready | ||
}) | ||
``` | ||
|
||
| Plugin | Arguments | When | | ||
| ------- | --------------- | ---------------------------------------------------- | | ||
| `ready` | moduleContainer | All modules in `nuxt.config.js` has been initialized | | ||
|
||
## Methods | ||
|
||
### addVendor (vendor) | ||
|
||
**Deprecated as `vendor` isn't used anymore** | ||
|
||
Adds to `options.build.vendor` and apply unique filter. | ||
|
||
### addTemplate (template) | ||
|
||
- **template**: `String` or `Object` | ||
- `src` | ||
- `options` | ||
- `fileName` | ||
|
||
Renders given template using [lodash template](https://lodash.com/docs/4.17.4#template) during build into project `buildDir` (`.nuxt`). | ||
|
||
If `fileName` is not provided or `template` is string, target file name defaults to `[dirName].[fileName].[pathHash].[ext]`. | ||
|
||
This method returns final `{ dst, src, options }` object. | ||
|
||
### addPlugin (template) | ||
|
||
- **template**: Object properties (`src`, `options`, `fileName`, `mode`). | ||
|
||
Registers a plugin using `addTemplate` and prepends it it to `plugins[]` array. | ||
|
||
```js | ||
this.addPlugin({ | ||
src: path.resolve(__dirname, 'templates/foo.js'), | ||
fileName: 'foo.server.js' // [optional] only include in server bundle | ||
options: moduleOptions | ||
}) | ||
``` | ||
|
||
**Note:** You can use `mode` or `.client` and `.server` modifiers with `fileName` option to use plugin only in client or server side. (See [plugins](/docs/directory-structure/plugins#name-conventional-plugin) for all available options) | ||
|
||
If you choose to specify a `fileName`, you can configure a custom path for the `fileName` too, so you can choose the folder structure inside `.nuxt` folder in order to prevent name collisioning: | ||
|
||
```js | ||
{ | ||
fileName: path.join('folder', 'foo.client.js'), // will result in `.nuxt/folder/foo.client.js` | ||
} | ||
``` | ||
|
||
### addServerMiddleware (middleware) | ||
|
||
Pushes middleware into [options.serverMiddleware](/docs/configuration-glossary/configuration-servermiddleware). | ||
|
||
### extendBuild (fn) | ||
|
||
Allows easily extending webpack build config by chaining [options.build.extend](/docs/configuration-glossary/configuration-build#extend) function. | ||
|
||
### extendRoutes (fn) | ||
|
||
Allows easily extending routes by chaining [options.build.extendRoutes](/docs/configuration-glossary/configuration-router#extendroutes) function. | ||
|
||
### addModule (moduleOpts, requireOnce) | ||
|
||
_Async function_ | ||
|
||
Registers a module. `moduleOpts` can be a string or an array (`[src, options]`). If `requireOnce` is `true` and the resolved module exports `meta`, it prevents registering same module twice. | ||
|
||
### requireModule (moduleOpts) | ||
|
||
_Async function_ | ||
|
||
Is a shortcut for `addModule(moduleOpts, true)` | ||
|
||
## Hooks | ||
|
||
We can register hooks on certain life cycle events. | ||
|
||
| Hook | Arguments | When | | ||
| ---------------- | -------------------------- | ------------------------------------------------------------------------------------- | | ||
| `modules:before` | (moduleContainer, options) | Called before creating ModuleContainer class, useful to overload methods and options. | | ||
| `modules:done` | (moduleContainer) | Called when all modules have been loaded. | | ||
--- | ||
title: The ModuleContainer class | ||
navigation.title: Module Container | ||
description: Nuxt ModuleContainer Class | ||
category: internals-glossary | ||
--- | ||
|
||
# The ModuleContainer class | ||
|
||
--- | ||
|
||
- Source: **[core/module.js](https://github.com/nuxt/nuxt.js/blob/dev/packages/core/src/module.js)** | ||
|
||
All [modules](/docs/directory-structure/modules) will be called within context of `ModuleContainer` instance. | ||
|
||
## Tapable plugins | ||
|
||
We can register hooks on certain life cycle events. | ||
|
||
```js | ||
nuxt.moduleContainer.plugin('ready', async moduleContainer => { | ||
// Do this after all modules where ready | ||
}) | ||
``` | ||
|
||
Inside [modules](/docs/directory-structure/modules) context we can use this instead: | ||
|
||
```js | ||
this.plugin('ready', async moduleContainer => { | ||
// Do this after all modules where ready | ||
}) | ||
``` | ||
|
||
| Plugin | Arguments | When | | ||
| ------- | --------------- | ---------------------------------------------------- | | ||
| `ready` | moduleContainer | All modules in `nuxt.config.js` has been initialized | | ||
|
||
## Methods | ||
|
||
### addVendor (vendor) | ||
|
||
**Deprecated as `vendor` isn't used anymore** | ||
|
||
Adds to `options.build.vendor` and apply unique filter. | ||
|
||
### addTemplate (template) | ||
|
||
- **template**: `String` or `Object` | ||
- `src` | ||
- `options` | ||
- `fileName` | ||
|
||
Renders given template using [lodash template](https://lodash.com/docs/4.17.4#template) during build into project `buildDir` (`.nuxt`). | ||
|
||
If `fileName` is not provided or `template` is string, target file name defaults to `[dirName].[fileName].[pathHash].[ext]`. | ||
|
||
This method returns final `{ dst, src, options }` object. | ||
|
||
### addPlugin (template) | ||
|
||
- **template**: Object properties (`src`, `options`, `fileName`, `mode`). | ||
|
||
Registers a plugin using `addTemplate` and prepends it it to `plugins[]` array. | ||
|
||
```js | ||
this.addPlugin({ | ||
src: path.resolve(__dirname, 'templates/foo.js'), | ||
fileName: 'foo.server.js' // [optional] only include in server bundle | ||
options: moduleOptions | ||
}) | ||
``` | ||
|
||
**Note:** You can use `mode` or `.client` and `.server` modifiers with `fileName` option to use plugin only in client or server side. (See [plugins](/docs/directory-structure/plugins#name-conventional-plugin) for all available options) | ||
|
||
If you choose to specify a `fileName`, you can configure a custom path for the `fileName` too, so you can choose the folder structure inside `.nuxt` folder in order to prevent name collisioning: | ||
|
||
```js | ||
{ | ||
fileName: path.join('folder', 'foo.client.js'), // will result in `.nuxt/folder/foo.client.js` | ||
} | ||
``` | ||
|
||
### addServerMiddleware (middleware) | ||
|
||
Pushes middleware into [options.serverMiddleware](/docs/configuration-glossary/configuration-servermiddleware). | ||
|
||
### extendBuild (fn) | ||
|
||
Allows easily extending webpack build config by chaining [options.build.extend](/docs/configuration-glossary/configuration-build#extend) function. | ||
|
||
### extendRoutes (fn) | ||
|
||
Allows easily extending routes by chaining [options.build.extendRoutes](/docs/configuration-glossary/configuration-router#extendroutes) function. | ||
|
||
### addModule (moduleOpts, requireOnce) | ||
|
||
_Async function_ | ||
|
||
Registers a module. `moduleOpts` can be a string or an array (`[src, options]`). If `requireOnce` is `true` and the resolved module exports `meta`, it prevents registering same module twice. | ||
|
||
### requireModule (moduleOpts) | ||
|
||
_Async function_ | ||
|
||
Is a shortcut for `addModule(moduleOpts, true)` | ||
|
||
## Hooks | ||
|
||
We can register hooks on certain life cycle events. | ||
|
||
| Hook | Arguments | When | | ||
| ---------------- | -------------------------- | ------------------------------------------------------------------------------------- | | ||
| `modules:before` | (moduleContainer, options) | Called before creating ModuleContainer class, useful to overload methods and options. | | ||
| `modules:done` | (moduleContainer) | Called when all modules have been loaded. | |
Oops, something went wrong.