feat(vue-app): Add docs for nuxt/nuxt.js#4574

de/api/configuration-dev.md

@@ -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}`)
 })
 ```
 

de/api/nuxt-render.md

@@ -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()

en/api/configuration-build.md

@@ -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`
@@ -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.
@@ -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: {}
 }
 ```
@@ -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).
@@ -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`):

en/api/configuration-dev.md

@@ -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}`)
 })
 ```
 

en/api/configuration-generate.md

@@ -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`

en/api/configuration-modern.md

@@ -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
 {
@@ -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.

en/api/configuration-router.md

@@ -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`

en/api/menu.json

@@ -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" },
@@ -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" }

en/api/nuxt-render.md

@@ -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()

en/api/pages-scrolltotop.md

@@ -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>
@@ -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).

en/guide/plugins.md

@@ -197,7 +197,6 @@ export const actions = {
 ```
 
 
-
 ## Client-side only
 
 Some plugins might work **only in the browser** because they lack SSR support.
@@ -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
+  ]
+}

es/api/configuration-dev.md

@@ -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

es/api/nuxt-render.md

@@ -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

fr/api/configuration-dev.md

@@ -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}`)
 })
 ```
 

fr/api/nuxt-render.md

@@ -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()

id/api/configuration-dev.md

@@ -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}`)
 })
 ```
 

id/api/nuxt-render.md

@@ -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()

ja/api/configuration-dev.md

@@ -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}`)
 })
 ```
 

ja/api/nuxt-render.md

@@ -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()

ko/api/configuration-dev.md

@@ -39,10 +39,6 @@ app.use(nuxt.render)
 // 개발 모드에서만 사용되는 빌드입니다.
 if (config.dev) {
   nuxt.build()
-  .catch((error) => {
-    console.error(error)
-    process.exit(1)
-  })
 }
 
 // Listen the server

ko/api/nuxt-render.md

@@ -31,10 +31,6 @@ app.use(nuxt.render)
 // dev 모드를 위해 핫-로딩 빌드를 합니다.
 if (config.dev) {
   nuxt.build()
-  .catch((error) => {
-    console.error(error)
-    process.exit(1)
-  })
 }
 
 // 서버