Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions de/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,11 @@ app.use(nuxt.render)
// Build only in dev mode
if (config.dev) {
new Builder(nuxt).build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Listen the server
app.listen(port, '0.0.0.0').then(() => {
nuxt.showOpen()
console.log(`Server is listening on port: ${port}`)
})
```

Expand Down
4 changes: 0 additions & 4 deletions de/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ app.use(nuxt.render)
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
}
else {
listen()
Expand Down
29 changes: 28 additions & 1 deletion en/api/configuration-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,15 @@ export default {

> Enable cache of [terser-webpack-plugin ](https://github.com/webpack-contrib/terser-webpack-plugin#options) and [cache-loader](https://github.com/webpack-contrib/cache-loader#cache-loader)

## crossorigin

- Type: `String`
- Default: `undefined`

Configure the `crossorigin` attribute on `<link rel="stylesheet">` and `<script>` tags in generated HTML.

More Info: [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)

## cssSourceMap

- Type: `boolean`
Expand All @@ -81,6 +90,15 @@ export default {

See [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) for available options.

## devtools

- Type: `boolean`
- Default: `false`

Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection.

If you already activated through nuxt.config.js or otherwise, devtools enable regardless of the flag.

## extend

> Extend the webpack configuration manually for the client & server bundles.
Expand Down Expand Up @@ -247,6 +265,10 @@ HTML files created during the build process (will be applied for *all modes*).
},
scss: {},
stylus: {},
ts: {
transpileOnly: true,
appendTsSuffixTo: [/\.vue$/]
},
vueStyle: {}
}
```
Expand Down Expand Up @@ -283,6 +305,11 @@ HTML files created during the build process (will be applied for *all modes*).
> See the [Node Sass documentation](https://github.com/sass/node-sass/blob/master/README.md#options) for all available Sass options.
> Note: `loaders.sass` is for [Sass Indented Syntax](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html)

### loaders.ts

> Loader for typescript file and `lang="ts"` Vue SFC.
> More details are in [ts-loader options](https://github.com/TypeStrong/ts-loader#options).

### loaders.vueStyle

> More details are in [vue-style-loader options](https://github.com/vuejs/vue-style-loader#options).
Expand Down Expand Up @@ -377,7 +404,7 @@ export default {
order: 'cssnanoLast'
}
```

Your custom plugin settings will be merged with the default plugins (unless you are using an `Array` instead of an `Object`).

Example (`nuxt.config.js`):
Expand Down
6 changes: 1 addition & 5 deletions en/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,11 @@ app.use(nuxt.render)
// Build only in dev mode
if (config.dev) {
new Builder(nuxt).build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Listen the server
app.listen(port, '0.0.0.0').then(() => {
nuxt.showOpen()
console.log(`Server is listening on port: ${port}`)
})
```

Expand Down
10 changes: 10 additions & 0 deletions en/api/configuration-generate.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@ When launching `nuxt generate` or calling `nuxt.generate()`, Nuxt.js will use th

Directory name created by `nuxt generate`.

## devtools

- Type: `boolean`
- Default: `false`

Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection.

If you already activated through nuxt.config.js or otherwise, devtools enable regardless of the flag.


## fallback

- Type: `String` or `Boolean`
Expand Down
14 changes: 13 additions & 1 deletion en/api/configuration-modern.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ The two versions of bundles are:
1. Modern bundle: targeting modern browsers that support ES modules
1. Legacy bundle: targeting older browsers based on babel config (IE9 compatible by default).

**Info:** you can use commands `nuxt build/start --modern=[type]` or `nuxt build/start -m=[type]` to build/start modern bundles, so you can specify modern commands inside the `package.json` scripts:
**Info:**

- Use command option `[--modern | -m]=[mode]` to build/start modern bundles, for example: in `package.json`:

```json
{
Expand All @@ -30,4 +32,14 @@ The two versions of bundles are:
}
```

- Nuxt will automatically detect `modern` build in `nuxt start` when `modern` is not specified, auto-detected mode is:

| Mode | Modern Mode |
| ------------- |:-------------:|
| universal | server |
| spa | client |

- Modern mode for `nuxt generate` can only be `client`
- Use [`build.crossorigin`](/api/configuration-build#crossorigin) to set `crossorigin` attribute in `<link>` and `<script>`

> Please refer [Phillip Walton's excellent post](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) for more knowledge regarding modern builds.
17 changes: 17 additions & 0 deletions en/api/configuration-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,23 @@ When `base` is set, Nuxt.js will also add in the document header `<base href="{{

> This option is given directly to the vue-router [base](https://router.vuejs.org/api/#base).

## routeNameSplitter

- Type: `String`
- Default: `'-'`

You may want to change the separator between route names that Nuxt.js uses. You can do so via the `routeNameSplitter` option in your configuration file.
Imagine we have the page file `pages/posts/_id.vue`. Nuxt will generate the route name programatically, in this case `posts-id`. Changing the `routeNameSplitter` config to `/` the name will therefore change to `posts/id`.

Example (`nuxt.config.js`):
```js
export default {
router: {
routeNameSplitter: '/'
}
}
```

## extendRoutes

- Type: `Function`
Expand Down
2 changes: 2 additions & 0 deletions en/api/menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
{ "name": "cache", "to": "#cache" },
{ "name": "cssSourceMap", "to": "#csssourcemap" },
{ "name": "devMiddleware", "to": "#devmiddleware" },
{ "name": "devtools", "to": "#devtools" },
{ "name": "extend", "to": "#extend" },
{ "name": "extractCSS", "to": "#extractcss" },
{ "name": "filenames", "to": "#filenames" },
Expand Down Expand Up @@ -79,6 +80,7 @@
"to": "/configuration-generate",
"contents": [
{ "name": "dir", "to": "#dir" },
{ "name": "devtools", "to": "#devtools" },
{ "name": "interval", "to": "#interval" },
{ "name": "minify", "to": "#minify" },
{ "name": "routes", "to": "#routes" }
Expand Down
4 changes: 0 additions & 4 deletions en/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ app.use(nuxt.render)
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
}
else {
listen()
Expand Down
4 changes: 3 additions & 1 deletion en/api/pages-scrolltotop.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ description: The `scrollToTop` property lets you tell Nuxt.js to scroll to the t

- **Type:** `Boolean` (default: `false`)

By default, Nuxt.js scrolls to the top when you go to another page, but with children routes, Nuxt.js keeps the scroll position. If you want to tell Nuxt.js to scroll to the top when rendering your child route, set `scrollToTop: true`:
By default, Nuxt.js scrolls to the top when you go to another page, but with children routes, Nuxt.js keeps the scroll position. If you want to tell Nuxt.js to scroll to the top when rendering your child route, set `scrollToTop` to `true`:

```html
<template>
Expand All @@ -23,4 +23,6 @@ export default {
</script>
```

Conversely, you can manually set `scrollToTop` to `false` on parent routes as well.

If you want to overwrite the default scroll behavior of Nuxt.js, take a look at the [scrollBehavior option](/api/configuration-router#scrollBehavior).
34 changes: 33 additions & 1 deletion en/guide/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,6 @@ export const actions = {
```



## Client-side only

Some plugins might work **only in the browser** because they lack SSR support.
Expand Down Expand Up @@ -229,3 +228,36 @@ In case you need to import some libraries in a plugin only on *server-side*, you
Also, if you need to know if you are inside a generated app (via `nuxt generate`), you can check if `process.static` is set to `true`. This is only the case during and after the generation.

You can also combine both options to hit the spot when a page is being server-rendered by `nuxt generate` before being saved (`process.static && process.server`).

**Note**: Since Nuxt.js 2.4, `mode` has been introduced as option of `plugins` to specify plugin type, possible value are: `client` or `server`. `ssr: false` will be adapted to `mode: 'client'` and deprecated in next major release.

Example:

`nuxt.config.js`:

```js
export default {
plugins: [
{ src: '~/plugins/both-sides.js' },
{ src: '~/plugins/client-only.js', mode: 'client' },
{ src: '~/plugins/server-only.js', mode: 'server' }
]
}
```

### Name conventional plugin

If plugin is assumed to be run only in client or server side, `.client.js` or `.server.js` can be applied as extension of plugin file, the file will be automatically included in corresponding side.

Example:

`nuxt.config.js`:

```js
export default {
plugins: [
'~/plugins/foo.client.js', // only in client side
'~/plugins/bar.server.js', // only in server side
'~/plugins/baz.js' // both client & server
]
}
4 changes: 0 additions & 4 deletions es/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,6 @@ app.use(nuxt.render)
// Build only in dev mode
if (config.dev) {
nuxt.build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Listen the server
Expand Down
4 changes: 0 additions & 4 deletions es/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@ app.use(nuxt.render)
// Build only in dev mode with hot-reloading
if (config.dev) {
nuxt.build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Listen the server
Expand Down
6 changes: 1 addition & 5 deletions fr/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,11 @@ app.use(nuxt.render)
// Build seulement en mode dev
if (config.dev) {
new Builder(nuxt).build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Écouter le serveur
app.listen(port, '0.0.0.0').then(() => {
nuxt.showOpen()
console.log(`Server is listening on port: ${port}`)
})
```

Expand Down
4 changes: 0 additions & 4 deletions fr/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ app.use(nuxt.render)
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
}
else {
listen()
Expand Down
6 changes: 1 addition & 5 deletions id/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,11 @@ app.use(nuxt.render)
// Build only in dev mode
if (config.dev) {
new Builder(nuxt).build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Listen the server
app.listen(port, '0.0.0.0').then(() => {
nuxt.showOpen()
console.log(`Server is listening on port: ${port}`)
})
```

Expand Down
4 changes: 0 additions & 4 deletions id/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@ app.use(nuxt.render)
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
}
else {
listen()
Expand Down
6 changes: 1 addition & 5 deletions ja/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,11 @@ app.use(nuxt.render)
// 開発モードのときのみビルドする
if (config.dev) {
new Builder(nuxt).build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// サーバーを Listen する
app.listen(port, '0.0.0.0').then(() => {
nuxt.showOpen()
console.log(`Server is listening on port: ${port}`)
})
```

Expand Down
4 changes: 0 additions & 4 deletions ja/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ app.use(nuxt.render)
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
}
else {
listen()
Expand Down
4 changes: 0 additions & 4 deletions ko/api/configuration-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ app.use(nuxt.render)
// 개발 모드에서만 사용되는 빌드입니다.
if (config.dev) {
nuxt.build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// Listen the server
Expand Down
4 changes: 0 additions & 4 deletions ko/api/nuxt-render.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@ app.use(nuxt.render)
// dev 모드를 위해 핫-로딩 빌드를 합니다.
if (config.dev) {
nuxt.build()
.catch((error) => {
console.error(error)
process.exit(1)
})
}

// 서버
Expand Down
Loading