diff --git a/ja/api/components-nuxt-child.md b/ja/api/components-nuxt-child.md new file mode 100644 index 000000000..5cdb900d9 --- /dev/null +++ b/ja/api/components-nuxt-child.md @@ -0,0 +1,48 @@ +--- +title: "API: The Component" +description: Display the current page +--- + +# The <nuxt-child> Component + +> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes). + +Example: + +```bash +-| pages/ +---| parent/ +------| child.vue +---| parent.vue +``` + +This file tree will generate these routes: +```js +[ + { + path: '/parent', + component: '~pages/parent.vue', + name: 'parent', + children: [ + { + path: 'child', + component: '~pages/parent/child.vue', + name: 'parent-child' + } + ] + } +] +``` + +To display the `child.vue` component, I have to insert `` inside `pages/parent.vue`: + +```html + +``` + +To see an example, take a look at the [nested-routes example](/examples/nested-routes). diff --git a/ja/api/components-nuxt-link.md b/ja/api/components-nuxt-link.md new file mode 100644 index 000000000..910a18504 --- /dev/null +++ b/ja/api/components-nuxt-link.md @@ -0,0 +1,23 @@ +--- +title: "API: The Component" +description: Link the pages between them with nuxt-link. +--- + +# The <nuxt-link> Component + +> This component is used to link the page components between them. + +At the moment, `` is the same as [``](https://router.vuejs.org/en/api/router-link.html), so we recommend you to see how to use it on the [vue-router documentation](https://router.vuejs.org/en/api/router-link.html). + +Example (`pages/index.vue`): + +```html + +``` + +In the future, we will add features to the nuxt-link component, like pre-fetching on the background for improving the responsiveness of nuxt.js applications. diff --git a/ja/api/components-nuxt.md b/ja/api/components-nuxt.md new file mode 100644 index 000000000..7f1f0a7aa --- /dev/null +++ b/ja/api/components-nuxt.md @@ -0,0 +1,22 @@ +--- +title: "API: The Component" +description: Display the page components inside a layout. +--- + +# The <nuxt> Component + +> This component is used only in [layouts](/guide/views#layouts) to display the page components. + +Example (`layouts/default.vue`): + +```html + +``` + +To see an example, take a look at the [layouts example](/examples/layouts). diff --git a/ja/api/configuration-build.md b/ja/api/configuration-build.md new file mode 100644 index 000000000..a80297d1f --- /dev/null +++ b/ja/api/configuration-build.md @@ -0,0 +1,248 @@ +--- +title: "API: The build Property" +description: Nuxt.js lets you customize the webpack configuration for building your web application as you want. +--- + +# The build Property + +> Nuxt.js lets you customize the webpack configuration for building your web application as you want. + +## analyze + +> Nuxt.js use [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) to let you visualize your bundles and how to optimize them. + +- Type: `Boolean` or `Object` +- Default: `false` + +If an object, see available properties [here](https://github.com/th0r/webpack-bundle-analyzer#as-plugin). + +Example (`nuxt.config.js`): +```js +module.exports = { + build: { + analyze: true + // or + analyze: { + analyzerMode: 'static' + } + } +} +``` + +

**INFO:** You can use the command `nuxt build --analyzer` or `nuxt build -a` to build your application and launch the bundle analyzer on [http://localhost:8888](http://localhost:8888)

+ +## babel + +- Type: `Object` + +> Customize babel configuration for JS and Vue files. + +Default: +```js +{ + plugins: [ + 'transform-async-to-generator', + 'transform-runtime' + ], + presets: [ + ['es2015', { modules: false }], + 'stage-2' + ] +} +``` + +Example (`nuxt.config.js`): +```js +module.exports = { + build: { + babel: { + presets: ['es2015', 'stage-0'] + } + } +} +``` + +## extend + +- Type: `Function` + +> Extend the webpack configuration manually for the client & server bundles. + +The extend is called twice, one time for the server bundle, and one time for the client bundle. The arguments of the method are: +1. Webpack config object +2. Object with the folowing keys (all boolean): `dev`, `isClient`, `isServer` + +Example (`nuxt.config.js`): +```js +module.exports = { + build: { + extend (config, { isClient }) { + // Extend only webpack config for client-bundle + if (isClient) { + config.devtool = 'eval-source-map' + } + } + } +} +``` + +If you want to see more about our default webpack configuration, take a look at our [webpack directory](https://github.com/nuxt/nuxt.js/tree/master/lib/webpack). + +## filenames + +- Type: `Object` + +> Customize bundle filenames + +Default: +```js +{ + css: 'style.css', + vendor: 'vendor.bundle.js', + app: 'nuxt.bundle.js' +} +``` + +Example (`nuxt.config.js`): +```js +module.exports = { + build: { + filenames: { + css: 'app.css', + vendor: 'vendor.js', + app: 'app.js' + } + } +} +``` + +## loaders + +- Type: `Array` + - Items: `Object` + +> Cusomize webpack loaders + +Default: +```js +[ + { + test: /\.(png|jpe?g|gif|svg)$/, + loader: 'url-loader', + query: { + limit: 1000, // 1KO + name: 'img/[name].[hash:7].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 1000, // 1 KO + name: 'fonts/[name].[hash:7].[ext]' + } + } +] +``` + +Example (`nuxt.config.js`): +```js +module.exports = { + build: { + loaders: [ + { + test: /\.(png|jpe?g|gif|svg)$/, + loader: 'url-loader', + query: { + limit: 10000, // 10KO + name: 'img/[name].[hash].[ext]' + } + } + ] + } +} +``` + +

When the loaders are defined in the `nuxt.config.js`, the default loaders will be overwritten.

+ +## plugins + +- Type: `Array` +- Default: `[]` + +> Add Webpack plugins + +Example (`nuxt.config.js`): +```js +const webpack = require('webpack') + +module.exports = { + build: { + plugins: [ + new webpack.DefinePlugin({ + 'process.VERSION': require('./package.json').version + }) + ] + } +} +``` + +## postcss + +- **Type:** `Array` + +> Customize [postcss](https://github.com/postcss/postcss) options + +Default: +```js +[ + require('autoprefixer')({ + browsers: ['last 3 versions'] + }) +] +``` + +Example (`nuxt.config.js`): +```js +module.exports = { + build: { + postcss: [ + require('postcss-nested')(), + require('postcss-responsive-type')(), + require('postcss-hexrgba')(), + require('autoprefixer')({ + browsers: ['last 3 versions'] + }) + ] + } +} +``` + +## vendor + +> Nuxt.js lets you add modules inside the `vendor.bundle.js` file generated to reduce the size of the app bundle. It's really useful when using external modules (like `axios` for example) + +- **Type:** `Array` + - **Items:** `String` + +To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`: + +```js +module.exports = { + build: { + vendor: ['axios'] + } +} +``` + +You can also give a path to a file, like a custom lib you created: +```js +module.exports = { + build: { + vendor: [ + 'axios', + '~plugins/my-lib.js' + ] + } +} +``` diff --git a/ja/api/configuration-cache.md b/ja/api/configuration-cache.md new file mode 100644 index 000000000..5db7a1db0 --- /dev/null +++ b/ja/api/configuration-cache.md @@ -0,0 +1,33 @@ +--- +title: "API: The cache Property" +description: Nuxt.js use lru-cache to allow cached components for better render performances +--- + +# The cache Property + +> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allow cached components for better render performances + +## Usage + +- **Type:** `Boolean` or `Object` (Default: `false`) + +If an object, see [lru-cache options](https://github.com/isaacs/node-lru-cache#options). + +Use the `cache` key in your `nuxt.config.js`: +```js +module.exports = { + cache: true + // or + cache: { + max: 1000, + maxAge: 900000 + } +} +``` + +If `cache` is set to `true` the default keys given are: + +| key | Optional? | Type | Default | definition | +|------|------------|-----|---------|------------| +| `max` | Optional | Integer | 1000 | The maximum size of the cached components, when the 1001 is added, the first one added will be removed from the cache to let space for the new one. | +| `maxAge` | Optional | Integer | 900000 | Maximum age in ms, default to 15 minutes. | diff --git a/ja/api/configuration-css.md b/ja/api/configuration-css.md new file mode 100644 index 000000000..8abd539fc --- /dev/null +++ b/ja/api/configuration-css.md @@ -0,0 +1,32 @@ +--- +title: "API: The css Property" +description: Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every pages). +--- + +# The css Property + +> Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every pages). + +- **Type:** `Array` + - **Items:** `String` or `Object` + +If the item is an object, the properties are: +- src: `String` (path of the file) +- lang: `String` ([pre-processor used](/guide/pages#using-pre-processors)) + +In `nuxt.config.js`, add the CSS resources: + +```js +module.exports = { + css: [ + // Load a node.js module + 'hover.css/css/hover-min.css', + // node.js module but we specify the pre-processor + { src: 'bulma', lang: 'sass' }, + // Css file in the project + '~assets/css/main.css' + ] +} +``` + +

**In production**, all CSS will be minified and extracted in a file named `styles.css` and added in the `` of the page.

diff --git a/ja/api/configuration-dev.md b/ja/api/configuration-dev.md new file mode 100644 index 000000000..a913984a0 --- /dev/null +++ b/ja/api/configuration-dev.md @@ -0,0 +1,62 @@ +--- +title: "API: The dev Property" +description: Define the development or production mode. +--- + +# The dev Property + +- Type: `Boolean` +- Default: `true` + +> Define the development or production mode of nuxt.js + +This property is overwritten by [nuxt commands](/guide/commands): +- `dev` is forced to `true` with `nuxt` +- `dev` is force to `false` with `nuxt build`, `nuxt start` and `nuxt generate` + +This property should be used when using [nuxt.js programmatically](/api/nuxt): + +Example: + +`nuxt.config.js` +```js +module.exports = { + dev: (process.env.NODE_ENV !== 'production') +} +``` + +`server.js` +```js +const Nuxt = require('nuxt') +const app = require('express')() +const port = process.env.PORT || 3000 + +// We instantiate Nuxt.js with the options +let config = require('./nuxt.config.js') +const nuxt = new Nuxt(config) +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 +app.listen(port, '0.0.0.0') +console.log('Server listening on localhost:' + port) +``` + +Then in your `package.json`: +```json +{ + "scripts": { + "dev": "node server.js", + "build": "nuxt build", + "start": "NODE_ENV=production node server.js" + } +} +``` diff --git a/ja/api/configuration-env.md b/ja/api/configuration-env.md new file mode 100644 index 000000000..12765e988 --- /dev/null +++ b/ja/api/configuration-env.md @@ -0,0 +1,41 @@ +--- +title: "API: The env Property" +description: Share environment variables between client and server. +--- + +# The env Property + +- Type: `Object` + +> Nuxt.js lets you create environment variables that will be shared for the client and server-side. + +Example (`nuxt.config.js`): + +```js +module.exports = { + env: { + baseUrl: process.env.BASE_URL || 'http://localhost:3000' + } +} +``` + +This lets me create a `baseUrl` property that will be equal to the `BASE_URL` environment variable if defined, otherwise, equal to `http://localhost:3000`. + +Then, I can access my `baseUrl` variable with 2 ways: +1. Via `process.env.baseUrl` +2. Via `context.baseUrl`, see [context api](/api#context) + +You can use the `env` property for giving public token for example. + +For the example above, we can use it to configure [axios](https://github.com/mzabriskie/axios). + +`plugins/axios.js`: +```js +import axios from 'axios' + +export default axios.create({ + baseURL: process.env.baseUrl +}) +``` + +Then, in your pages, you can import axios like this: `import axios from '~plugins/axios'` diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md new file mode 100644 index 000000000..1e3886819 --- /dev/null +++ b/ja/api/configuration-generate.md @@ -0,0 +1,125 @@ +--- +title: "API: The generate Property" +description: Configure the generation of your universal web application to a static web application. +--- + +# The generate Property + +- Type: `Object` + +> Configure the generation of your universal web application to a static web application. + +When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use the configuration defined in the `generate` property. + +## dir + +- Type: 'Sring' +- Default: `'dist'` + +Directory name created by `nuxt generate`. + +## routeParams + +- Type: `Object` + - Key: `String` (route path) + - Value: `Array` or `Function` + +When using [dynamic routes](/guide/routing#dynamic-routes), you need to define a mapping of params for each dynamic route to generate. + +Example: + +```bash +-| pages/ +---| index.vue +---| users/ +-----| _id.vue +``` + +The routes generated by nuxt.js are `/` and `/users/:id`. + +If you try to launch `nuxt generate`, the terminal will exit with an error: + +```bash +Could not generate the dynamic route /users/:id, please add the mapping params in nuxt.config.js (generate.routeParams). +``` + +We add the mapping for `/users/:id` in `nuxt.config.js`: +```js +module.exports = { + generate: { + routeParams: { + '/users/:id': [ + { id: 1 }, + { id: 2 }, + { id: 3 } + ] + } + } +} +``` + +Then when we launch `nuxt generate`: +```bash +[nuxt] Generating... +[...] +nuxt:render Rendering url / +154ms +nuxt:render Rendering url /users/1 +12ms +nuxt:render Rendering url /users/2 +33ms +nuxt:render Rendering url /users/3 +7ms +nuxt:generate Generate file: /index.html +21ms +nuxt:generate Generate file: /users/1/index.html +31ms +nuxt:generate Generate file: /users/2/index.html +15ms +nuxt:generate Generate file: /users/3/index.html +23ms +nuxt:generate HTML Files generated in 7.6s +6ms +[nuxt] Generate done +``` + +Great, but what if we have **dynamic params**? +1. Use a `Function` which returns a `Promise` +2. Use a `Function` with a callback(err, params) + +### Function which returns a Promise + +`nuxt.config.js` +```js +import axios from 'axios' + +module.exports = { + generate: { + routeParams: { + '/users/:id': function () { + return axios.get('https://my-api/users') + .then((res) => { + return res.data.map((user) => { + return { id: user.id } + }) + }) + } + } + } +} +``` + +## Function with a callback + +`nuxt.config.js` +```js +import axios from 'axios' + +module.exports = { + generate: { + routeParams: { + '/users/:id': function (callback) { + axios.get('https://my-api/users') + .then((res) => { + var params = res.data.map((user) => { + return { id: user.id } + }) + callback(null, params) + }) + .catch(callback) + } + } + } +} +``` diff --git a/ja/api/configuration-head.md b/ja/api/configuration-head.md new file mode 100644 index 000000000..3c8e71286 --- /dev/null +++ b/ja/api/configuration-head.md @@ -0,0 +1,27 @@ +--- +title: "API: The head Property" +description: Nuxt.js let you define all default meta for your application inside nuxt.config.js. +--- + +# The head Property + +> Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: + +- **Type:** `Object` + +```js +module.exports = { + head: { + titleTemplate: '%s - Nuxt.js', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: 'Meta description' } + ] + } +} +``` + +To know the list of options you can give to `head`, take a look at [vue-meta documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties). + +

INFO: You can also use `head` in the page components and access to the component data through `this`, see [component head property](/api/pages-head).

diff --git a/ja/api/configuration-loading.md b/ja/api/configuration-loading.md new file mode 100644 index 000000000..a1276936a --- /dev/null +++ b/ja/api/configuration-loading.md @@ -0,0 +1,109 @@ +--- +title: "API: The loading Property" +description: Nuxt.js uses it's own component to show a progress bar between the routes. You can customize it, disable it or create your own component. +--- + +# The loading Property + +- Type: `Boolean` or `Object` or `String` + +> Nuxt.js uses it's own component to show a progress bar between the routes. You can customize it, disable it or create your own component. + +## Disable the Progress Bar + +- Type: `Boolean` + +If you don't want to display the progress bar between the routes, simply add `loading: false` in your `nuxt.config.js` file: + +```js +module.exports = { + loading: false +} +``` + +## Customize the Progress Bar + +- Type: `Object` + +List of properties to customize the progress bar. + +| Key | Type | Default | Description | +|-----|------|---------|-------------| +| `color` | String | `'black'` | CSS color of the progress bar | +| `failedColor` | String | `'red'` | CSS color of the progress bar when an error appended while rendering the route (if `data` or `fetch` sent back an error for example). | +| `height` | String | `'2px'` | Height of the progress bar (used in the `style` property of the progress bar) | +| `duration` | Number | `5000` | In ms, the maximum duration of the progress bar, Nuxt.js assumes that the route will be rendered before 5 seconds. | + +For a blue progress bar with 5px of height, we update the `nuxt.config.js` to the following: + +```js +module.exports = { + loading: { + color: 'blue', + height: '5px' + } +} +``` + +## Use a Custom Loading Component + +- Type: `String` + +You can create your own component that Nuxt.js will call instead of its default component. To do so, you need to give a path to your component in the `loading` option. Then, your component will be called directly by Nuxt.js. + +**Your component has to expose some of theses methods:** + +| Method | Required | Description | +|--------|----------|-------------| +| `start()` | Required | Called when a route changes, this is here where you display your component. | +| `finish()` | Required | Called when a route is loaded (and data fetched), this is here where you hide your component. | +| `fail()` | *Optional* | Called when a route couldn't be loaded (failed to fetch data for example). | +| `increase(num)` | *Optional* | Called during loading the route component, `num` is an Integer < 100. | + +We can create our custom component in `components/loading.vue`: +```html + + + + + +``` + +Then, we update our `nuxt.config.js` to tell Nuxt.js to use our component: + +```js +module.exports = { + loading: '~components/loading.vue' +} +``` diff --git a/ja/api/configuration-plugins.md b/ja/api/configuration-plugins.md new file mode 100644 index 000000000..6998e0082 --- /dev/null +++ b/ja/api/configuration-plugins.md @@ -0,0 +1,32 @@ +--- +title: "API: The plugins Property" +description: Use vue.js plugins with the plugins option of nuxt.js. +--- + +# The plugins Property + +- Type: `Array` + - Items: `String` + +> The plugins property lets you add vue.js plugins easily to your main application. + +Example (`nuxt.config.js`): +```js +module.exports = { + plugins: ['~plugins/vue-notifications'] +} +``` + +Then, we need to create a file in `plugins/vue-notifications.js`: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + +All the paths defined in the `plugins` property will be **imported** before initializing the main application. + +Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to `plugins` in `nuxt.config.js`. + +To learn more how to use the plugins, see the [guide documentation](/guide/plugins#vue-plugins). diff --git a/ja/api/configuration-rootdir.md b/ja/api/configuration-rootdir.md new file mode 100644 index 000000000..f4570d221 --- /dev/null +++ b/ja/api/configuration-rootdir.md @@ -0,0 +1,17 @@ +--- +title: "API: The rootDir Property" +description: Define the workspace of nuxt.js application +--- + +# The rootDir Property + +- Type: `String` +- Default: `process.cwd()` + +> Define the workspace of your nuxt.js application. + +This property is overwritten by [nuxt commands](/guide/commands) and set to the argument of the command (example: `nuxt my-app/` will set the `rootDir` to `my-app/` with its absolute path). + +This property should be used when using [nuxt.js programmatically](/api/nuxt). + +

The downside of this option is that your `node_modules` directory should be inside the `rootDir` folder. If you want to set the path of the application without the node_modules, use the [`srcDir` option](/api/configuration-srcdir).

diff --git a/ja/api/configuration-router.md b/ja/api/configuration-router.md new file mode 100644 index 000000000..a95817023 --- /dev/null +++ b/ja/api/configuration-router.md @@ -0,0 +1,149 @@ +--- +title: "API: The router Property" +description: The router property lets you customize nuxt.js router. +--- + +# The router Property + +> The router property lets you customize nuxt.js router ([vue-router](https://router.vuejs.org/en/)). + +## base + +- Type: `String` +- Default: `'/'` + +The base URL of the app. For example, if the entire single page application is served under `/app/`, then base should use the value `'/app/'`. + +Example (`nuxt.config.js`): +```js +module.exports = { + router: { + base: '/app/' + } +} +``` + +

When `base` is set, nuxt.js will also add in the document header ``.

+ +> This option is given directly to the vue-router [Router constructor](https://router.vuejs.org/en/api/options.html). + +## linkActiveClass + +- Type: `String` +- Default: `'nuxt-link-active'` + +Globally configure [``](/api/components-nuxt-link) default active class. + +Example (`nuxt.config.js`): +```js +module.exports = { + router: { + linkActiveClass: 'active-link' + } +} +``` + +> This option is given directly to the [vue-router Router constructor](https://router.vuejs.org/en/api/options.html). + +## scrollBehavior + +- Type: `Function` + +The `scrollBehavior` option lets you define a custom behavior for the scroll position between the routes. This method is called every time a page is rendered. + +By default, the scrollBehavior option is set to: +```js +const scrollBehavior = (to, from, savedPosition) => { + // savedPosition is only available for popstate navigations. + if (savedPosition) { + return savedPosition + } else { + let position = {} + // if no children detected + if (to.matched.length < 2) { + // scroll to the top of the page + position = { x: 0, y: 0 } + } + else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { + // if one of the children has scrollToTop option set to true + position = { x: 0, y: 0 } + } + // if link has anchor, scroll to anchor by returning the selector + if (to.hash) { + position = { selector: to.hash } + } + return position + } +} +``` + +Example of forcing the scroll position to the top for every routes: + +`nuxt.config.js` +```js +module.exports = { + router: { + scrollBehavior: function (to, from, savedPosition) { + return { x: 0, y: 0 } + } + } +} +``` + +> This option is given directly to the vue-router [Router constructor](https://router.vuejs.org/en/api/options.html). + +## middleware + +- Type: `String` or `Array` + - Items: `String` + +Set the default(s) middleware for every pages of the application. + +Example: + +`nuxt.config.js` +```js +module.exports = { + router: { + // Run the middleware/user-agent.js on every pages + middleware: 'user-agent' + } +} +``` + +`middleware/user-agent.js` +```js +export default function (context) { + // Add the userAgent property in the context (available in `data` and `fetch`) + context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent +} +``` + +To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). + +## extendRoutes + +- Type: `Function` + +You may want to extend the routes created by nuxt.js. You can do it via the `extendRoutes` option. + +Example of adding a custom route: + +`nuxt.config.js` +```js +const resolve = require('path').resolve + +module.exports = { + router: { + extendRoutes (routes) { + routes.push({ + name: 'custom', + path: '*', + component: resolve(__dirname, 'pages/404.vue') + }) + } + } +} +``` + +The schema of the route should respect the [vue-router](https://router.vuejs.org/en/) schema. diff --git a/ja/api/configuration-srcdir.md b/ja/api/configuration-srcdir.md new file mode 100644 index 000000000..9b23566d0 --- /dev/null +++ b/ja/api/configuration-srcdir.md @@ -0,0 +1,32 @@ +--- +title: "API: The srcDir Property" +description: Define the source directory of your nuxt.js application +--- + +# The srcDir Property + +- Type: `String` +- Default: [rootDir value](/api/configuration-rootdir) + +> Define the source directory of your nuxt.js application + +Example (`nuxt.config.js`): + +```js +module.exports = { + srcDir: 'client/' +} +``` + +Then, your application structure can be: +```bash +-| app/ +---| node_modules/ +---| client/ +------| pages/ +------| components/ +---| nuxt.config.js +---| package.json +``` + +This option is useful to have a custom server and using nuxt.js, so all npm dependencies can be regrouped in one `package.json`. diff --git a/ja/api/configuration-transition.md b/ja/api/configuration-transition.md new file mode 100644 index 000000000..9fa7efc79 --- /dev/null +++ b/ja/api/configuration-transition.md @@ -0,0 +1,36 @@ +--- +title: "API: The transition Property" +description: Set the default properties of the pages transitions. +--- + +# The transition Property + +- Type: `String` or `Object` + +> Used to set the default properties of the pages transitions. + +Default: +```js +{ + name: 'page', + mode: 'out-in' +} +``` + +Example (`nuxt.config.js`): + +```js +module.exports = { + transition: 'page' + // or + transition: { + name: 'page', + mode: 'out-in', + beforeEnter (el) { + console.log('Before enter...'); + } + } +} +``` + +The transition key in `nuxt.config.js` is used to set the default properties for the pages transitions. To learn more about the available keys when the `transition` key is an object, see the [pages transition property](/api/pages-transition#object). diff --git a/ja/api/index.md b/ja/api/index.md new file mode 100644 index 000000000..4fb78c6f5 --- /dev/null +++ b/ja/api/index.md @@ -0,0 +1,41 @@ +--- +title: "API: The data Method" +description: Nuxt.js supercharges the data method from vue.js to let you handle async operation before setting the component data. +--- + +# The data Method + +> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. + +- **Type:** `Function` + +`data` is called every time before loading the component (**only for pages components**). It can be called from the server-side or before navigating to the corresponding route. This method receives the **context** as the first argument, you can use it to fetch some data and return the component data. + +```js +export default { + data (context) { + return { foo: 'bar' } + } +} +``` + +
You do **NOT** have access of the component instance through `this` inside `data` because it is called **before initiating** the component.
+ +## Context + +List of all the available keys in `context`: + +| Key | Type | Available | Description | +|-----|------|--------------|-------------| +| `isClient` | Boolean | Client & Server | Boolean to let you know if you're actually renderer from the client-side | +| `isServer` | Boolean | Client & Server | Boolean to let you know if you're actually renderer from the server-side | +| `isDev` | Boolean | Client & Server | Boolean to let you know if you're in dev mode, can be useful for caching some data in production | +| `route` | [vue-router route](https://router.vuejs.org/en/api/route-object.html) | Client & Server | `vue-router` route instance. | +| `store` | [vuex store](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | `Vuex.Store` instance. **Available only if the [vuex store](/guide/vuex-store) is set.** | +| `env` | Object | Client & Server | Environment variables set in `nuxt.config.js`, see [env api](/api/configuration-env) | +| `params` | Object | Client & Server | Alias of route.params | +| `query` | Object | Client & Server | Alias of route.query | +| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | Server | Request from the node.js server. If nuxt is used as a middleware, the req object might be different depending of the framework you're using. *Not available via `nuxt generate`*. | +| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | Server | Response from the node.js server. If nuxt is used as a middleware, the res object might be different depending of the framework you're using. *Not available via `nuxt generate`*. | +| `redirect` | Function | Client & Server | Use this method to redirect the user to another route, the status code is used on the server-side, default to 302. `redirect([status,] path [, query])` | +| `error` | Function | Client & Server | Use this method to show the error page: `error(params)`. The `params` should have the fields `statusCode` and `message`. | diff --git a/ja/api/menu.json b/ja/api/menu.json new file mode 100644 index 000000000..e32f0ff0f --- /dev/null +++ b/ja/api/menu.json @@ -0,0 +1,95 @@ +[ + { + "title": "Pages", + "links": [ + { "name": "data", "to": "/" }, + { "name": "fetch", "to": "/pages-fetch" }, + { "name": "head", "to": "/pages-head" }, + { "name": "layout", "to": "/pages-layout" }, + { "name": "middleware", "to": "/pages-middleware" }, + { "name": "scrollToTop", "to": "/pages-scrolltotop" }, + { + "name": "transition", "to": "/pages-transition", + "contents": [ + { "name": "String", "to": "#string" }, + { "name": "Object", "to": "#object" }, + { "name": "Function", "to": "#function" } + ] + }, + { "name": "validate", "to": "/pages-validate" } + ] + }, + { + "title": "Components", + "links": [ + { "name": "nuxt", "to": "/components-nuxt" }, + { "name": "nuxt-child", "to": "/components-nuxt-child" }, + { "name": "nuxt-link", "to": "/components-nuxt-link" } + ] + }, + { + "title": "Configuration", + "links": [ + { + "name": "build", + "to": "/configuration-build", + "contents": [ + { "name": "analyze", "to": "#analyze" }, + { "name": "babel", "to": "#babel" }, + { "name": "extend", "to": "#extend" }, + { "name": "filenames", "to": "#filenames" }, + { "name": "loaders", "to": "#loaders" }, + { "name": "plugins", "to": "#plugins" }, + { "name": "postcss", "to": "#postcss" }, + { "name": "vendor", "to": "#vendor" } + ] + }, + { "name": "cache", "to": "/configuration-cache" }, + { "name": "css", "to": "/configuration-css" }, + { "name": "dev", "to": "/configuration-dev" }, + { "name": "env", "to": "/configuration-env" }, + { + "name": "generate", + "to": "/configuration-generate", + "contents": [ + { "name": "dir", "to": "#dir" }, + { "name": "routeParams", "to": "#routeparams" } + ] + }, + { "name": "head", "to": "/configuration-head" }, + { + "name": "loading", + "to": "/configuration-loading", + "contents": [ + { "name": "Disable the Progress Bar", "to": "#disable-the-progress-bar" }, + { "name": "Customize the Progress Bar", "to": "#customize-the-progress-bar" }, + { "name": "Use a Custom Loading Component", "to": "#use-a-custom-loading-component" } + ] + }, + { "name": "plugins", "to": "/configuration-plugins" }, + { "name": "rootDir", "to": "/configuration-rootdir" }, + { + "name": "router", + "to": "/configuration-router", + "contents": [ + { "name": "base", "to": "#base" }, + { "name": "linkActiveClass", "to": "#linkactiveclass" }, + { "name": "scrollBehavior", "to": "#scrollbehavior" }, + { "name": "middleware", "to": "#middleware" }, + { "name": "extendRoutes", "to": "#extendroutes" } + ] + }, + { "name": "srcDir", "to": "/configuration-srcdir" }, + { "name": "transition", "to": "/configuration-transition" } + ] + }, + { + "title": "Nuxt Module", + "links": [ + { "name": "Usage", "to": "/nuxt" }, + { "name": "render", "to": "/nuxt-render" }, + { "name": "renderRoute", "to": "/nuxt-render-route" }, + { "name": "renderAndGetWindow", "to": "/nuxt-render-and-get-window" } + ] + } +] diff --git a/ja/api/nuxt-render-and-get-window.md b/ja/api/nuxt-render-and-get-window.md new file mode 100644 index 000000000..b8c4368f9 --- /dev/null +++ b/ja/api/nuxt-render-and-get-window.md @@ -0,0 +1,35 @@ +--- +title: "API: nuxt.renderAndGetWindow(url, options)" +description: Get the window from a given url of a nuxt.js application. +--- + +# nuxt.renderAndGetWindow(url, options = {}) + +- Type: `Function` +- Argument: `String` + 1. `String`: url to render + 2. *Optional*, `Object`: options + - virtualConsole: `Boolean` (default: `true`) +- Returns: `Promise` + - Returns: `window` + +> Get the window from a given url of a nuxt.js application. + +

This method is made for [test purposes](guide/development-tools#end-to-end-testing).

+ +To use this function, you have to install `jsdom`: +```bash +npm install --save-dev jsdom +``` + +Example: +```js +const Nuxt = require('nuxt') +const nuxt = new Nuxt() + +nuxt.renderAndGetWindow('http://localhost:3000') +.then((window) => { + // Display the head + console.log(window.document.title) +}) +``` diff --git a/ja/api/nuxt-render-route.md b/ja/api/nuxt-render-route.md new file mode 100644 index 000000000..b99091adb --- /dev/null +++ b/ja/api/nuxt-render-route.md @@ -0,0 +1,43 @@ +--- +title: "API: nuxt.renderRoute(route, context)" +description: Render a specific route with a given context. +--- + +# nuxt.renderRoute(route, context = {}) + +- Type: `Function` +- Arguments: + 1. `String`, route to render + 2. *Optional*, `Object`, context given, available keys: `req` & `res` +- Returns: `Promise` + - `html`: `String` + - `error`: `null` or `Object` + - `redirected`: `false` or `Object` + +> Render a specific route with a given context. + +This method should be used mostly for [test purposes](guide/development-tools#end-to-end-testing) as well with [nuxt.renderAndGetWindow](/api/nuxt-render-and-get-window). + +<p class="Alert Alert--info">`nuxt.renderRoute` should be executed after the build process in production mode (dev: false).</p> + +Example: +```js +const Nuxt = require('nuxt') +let config = require('./nuxt.config.js') +config.dev = false +const nuxt = new Nuxt(config) + +nuxt.build() +.then(() => { + return nuxt.renderRoute('/') +}) +.then(({ html, error, redirected }) => { + // html will be always a string + + // error not null when the error layout is displayed, the error format is: + // { statusCode: 500, message: 'My error message' } + + // redirect is not false when redirect() has been used in data() or fetch() + // { path: '/other-path', query: {}, status: 302 } +}) +``` diff --git a/ja/api/nuxt-render.md b/ja/api/nuxt-render.md new file mode 100644 index 000000000..a3ee5e8eb --- /dev/null +++ b/ja/api/nuxt-render.md @@ -0,0 +1,45 @@ +--- +title: "API: nuxt.render(req, res)" +description: You can use Nuxt.js as a middleware for your node.js server. +--- + +# nuxt.render(req, res) + +- Type: `Function` +- Arguments: + 1. [Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) + 2. [Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) +- Returns: `Promise` + +> You can use nuxt.js as a middleware with `nuxt.render` for your node.js server. + +Example with [Express.js](https://github.com/expressjs/express): +```js +const Nuxt = require('nuxt') +const app = require('express')() +const isProd = (process.env.NODE_ENV === 'production') +const port = process.env.PORT || 3000 + +// We instantiate buxt.js with the options +let config = require('./nuxt.config.js') +config.dev = !isProd +const nuxt = new Nuxt(config) + +// Render every route with nuxt.js +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 +app.listen(port, '0.0.0.0') +console.log('Server listening on localhost:' + port) +``` + +<p class="Alert">It's recommended to call **nuxt.render** at the end of your middlewares since it will handle the rendering of your web application and won't call next()</p> diff --git a/ja/api/nuxt.md b/ja/api/nuxt.md new file mode 100644 index 000000000..4ff4de310 --- /dev/null +++ b/ja/api/nuxt.md @@ -0,0 +1,38 @@ +--- +title: "API: Nuxt(options)" +description: You can use nuxt.js programmatically to use it as a middleware giving you the freedom of creating your own server for rendering your web applications. +--- + +# Using Nuxt.js Programmatically + +You might want to use your own server with your middleware and your API. That's why you can use Nuxt.js programmatically. +Nuxt.js is built on the top of ES2015, which makes the code more enjoyable and cleaner to read. It doesn't make use of any transpilers and depends upon Core V8 implemented features. For these reasons, Nuxt.js targets Node.js `4.0` or higher. + +You can require Nuxt.js like this: +```js +const Nuxt = require('nuxt') +``` + +## Nuxt(options) + +To see the list of options to give to Nuxt.js, see the configuration section. + +```js +const options = {} + +const nuxt = new Nuxt(options) +nuxt.build() +.then(() => { + // We can use nuxt.render(req, res) or nuxt.renderRoute(route, context) +}) +``` + +You can take a look at the [nuxt-express](https://github.com/nuxt/express) and [adonuxt](https://github.com/nuxt/adonuxt) starters to start quickly. + +### Debug logs + +If you want to display nuxt.js logs, you can add to the top of your file: + +```js +process.env.DEBUG = 'nuxt:*' +``` diff --git a/ja/api/pages-fetch.md b/ja/api/pages-fetch.md new file mode 100644 index 000000000..aa8cf8c72 --- /dev/null +++ b/ja/api/pages-fetch.md @@ -0,0 +1,49 @@ +--- +title: "API: The fetch Method" +description: The fetch method is used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. +--- + +# The fetch Method + +> The fetch method is used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. + +- **Type:** `Function` + +The `fetch` method, *if set*, is called every time before loading the component (**only for pages components**). It can be called from the server-side or before navigating to the corresponding route. + +The `fetch` method receives [the context](/api#context) as the first argument, we can use it to fetch some data and fill the store. To make the fetch method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component. + +Example of `pages/index.vue`: +```html +<template> + <h1>Stars: {{ $store.state.stars }}</h1> +</template> + +<script> +export default { + fetch ({ store, params }) { + return axios.get('http://my-api/stars') + .then((res) => { + store.commit('setStars', res.data) + }) + } +} +</script> +``` + +You can also use async/await to make your code cleaner: + +```html +<template> + <h1>Stars: {{ $store.state.stars }}</h1> +</template> + +<script> +export default { + async fetch ({ store, params }) { + let { data } = await axios.get('http://my-api/stars') + store.commit('setStars', data) + } +} +</script> +``` diff --git a/ja/api/pages-head.md b/ja/api/pages-head.md new file mode 100644 index 000000000..7df5436d6 --- /dev/null +++ b/ja/api/pages-head.md @@ -0,0 +1,40 @@ +--- +title: "API: The head Method" +description: Nuxt.js uses vue-meta to update the `headers` and `html attributes` of your application. +--- + +# The head Method + +> Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. + +- **Type:** `Object` or `Function` + +Use the `head` method to set the HTML Head tags for the current page. + +Your component data are available with `this` in the `head` method, you can use set custom meta tags with the page data. + +```html +<template> + <h1>{{ title }}</h1> +</template> + +<script> +export default { + data () { + return { + title: 'Hello World!' + } + }, + head () { + return { + title: this.title, + meta: [ + { hid: 'description', name: 'description', content: 'My custom description' } + ] + } + } +} +</script> +``` + +<p class="Alert">To avoid any duplication when used in child component, please give a unique identifier with the `hid` key, please [read more about it](https://github.com/declandewet/vue-meta#lists-of-tags).</p> diff --git a/ja/api/pages-layout.md b/ja/api/pages-layout.md new file mode 100644 index 000000000..5d28db248 --- /dev/null +++ b/ja/api/pages-layout.md @@ -0,0 +1,24 @@ +--- +title: "API: The layout Property" +description: Every file (first level) in the layouts directory will create a custom layout accessible with the layout property in the page component. +--- + +# The layout Property + +> Every file (first level) in the layouts directory will create a custom layout accessible with the layout property in the page component. + +- **Type:** `String` (default: `'default'`) + +Use the `layout` key in your pages components to define which layout to use: + +```js +export default { + layout: 'blog' +} +``` + +In this example, Nuxt.js will include the `layouts/blog.vue` file as a layout for this page component. + +Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action. + +To understand how the layouts work with nuxt.js, take a look at the [layout documentation](/guide/views#layouts). diff --git a/ja/api/pages-middleware.md b/ja/api/pages-middleware.md new file mode 100644 index 000000000..45c8155cc --- /dev/null +++ b/ja/api/pages-middleware.md @@ -0,0 +1,38 @@ +--- +title: "API: The middleware Property" +description: Set the middleware for a specific page of the application. +--- + +# The middleware Property + +- Type: `String` or `Array` + - Items: `String` + +Set the middleware for a specific page of the application. + +Example: + +`pages/secret.vue` +```html +<template> + <h1>Secret page</h1> +</template> + +<script> +export default { + middleware: 'authenticated' +} +</script> +``` + +`middleware/authenticated.js` +```js +export default function ({ store, redirect }) { + // If the user is not authenticated + if (!store.state.authenticated) { + return redirect('/login') + } +} +``` + +To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). diff --git a/ja/api/pages-scrolltotop.md b/ja/api/pages-scrolltotop.md new file mode 100644 index 000000000..b07b319bd --- /dev/null +++ b/ja/api/pages-scrolltotop.md @@ -0,0 +1,26 @@ +--- +title: "API: The scrollToTop Property" +description: The scrollToTop property lets you tell nuxt.js to scroll to the top before rendering the page. +--- + +# The scrollToTop Property + +> The scrollToTop property lets you tell nuxt.js to scroll to the top before rendering the page. + +- **Type:** `Boolean` (default: `false`) + +By default, nuxt.js scroll to the top when you go to another page, but with children routes, nuxt.js keep the scroll position, if you want to tell nuxt.js to scroll to the top when rendering your child route, set `scrollToTop: true`: + +```html +<template> + <h1>My child component</h1> +</template> + +<script> +export default { + scrollToTop: true +} +</script> +``` + +If you want to overwrite the default scroll behavior of nuxt.js, take a look at the [scrollBehavior option](/api/configuration-router#scrollBehavior). diff --git a/ja/api/pages-transition.md b/ja/api/pages-transition.md new file mode 100644 index 000000000..085761cf0 --- /dev/null +++ b/ja/api/pages-transition.md @@ -0,0 +1,105 @@ +--- +title: "API: The transition Property" +description: Nuxt.js uses the transition component to let you create amazing transitions/animations between your pages. +--- + +# The transition Property + +> Nuxt.js uses the [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) component to let you create amazing transitions/animations between your pages. + +- **Type:** `String` or `Object` or `Function` + +To define a custom transition for a specific route, simply add the `transition` key to the page component. + +```js +export default { + // Can be a String + transition: '' + // Or an Object + transition: {} + // or a Function + transition (to, from) {} +} +``` + +## String + +If the `transition` key is set as a string, it will be used as the `transition.name`. + +```js +export default { + transition: 'test' +} +``` + +Nuxt.js will use these settings to set the component as follows: + +```html +<transition name="test"> +``` + +## Object + +If the `transition` key is set as an object: + +```js +export default { + transition: { + name: 'test', + mode: 'out-in' + } +} +``` + +Nuxt.js will use these settings to set the component as follows: + +```html +<transition name="test" mode="out-in"> +``` + +The following properties that the `transition` object can have: + +| key | Type | Default | definition | +|------|------|---------|-----------| +| `name` | String | `"page"` | The transition name applied on all the routes transitions. | +| `mode` | String | `"out-in"` | The transition mode applied on all routes, see [Vue.js documentation](http://vuejs.org/v2/guide/transitions.html#Transition-Modes). | +| `css` | Boolean | `true` | Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events. | +| `type` | String | `n/a` | Specify the type of transition events to wait for to determine transition end timing. Available values are "transition" and "animation". By default, it will automatically detect the type that has a longer duration. | +| `enterClass` | String | `n/a` | The starting state of the transition class. See [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) | +| `enterToClass` | String | `n/a` | The ending state for the transition. See [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) | +| `enterActiveClass` | String | `n/a` | The class applied across the entire transition duration. See [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) | +| `leaveClass` | String | `n/a` | The starting state of the transition class. See [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) | +| `leaveToClass` | String | `n/a` | The ending state for the transition. See [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) | +| `leaveActiveClass` | String | `n/a` | The class applied across the entire transition duration. See [Vue.js documentation](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) | + + +You can also define methods in the `transition`, these are for the [JavaScript hooks](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks): + +- beforeEnter(el) +- enter(el, done) +- afterEnter(el) +- enterCancelled(el) +- beforeLeave(el) +- leave(el, done) +- afterLeave(el) +- leaveCancelled(el) + +*Note: it’s also a good idea to explicitly add `css: false` for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.* + +## Function + +If the `transition` key is set as a function: + +```js +export default { + transition (to, from) { + if (!from) return 'slide-left' + return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left' + } +} +``` + +Transitions applied on navigation: +- `/` to `/posts` => `slide-left` +- `/posts` to `/posts?page=3` => `slide-left` +- `/posts?page=3` to `/posts?page=2` => `slide-right` diff --git a/ja/api/pages-validate.md b/ja/api/pages-validate.md new file mode 100644 index 000000000..9ed52230d --- /dev/null +++ b/ja/api/pages-validate.md @@ -0,0 +1,30 @@ +--- +title: "API: The validate Method" +description: Nuxt.js lets you define a validator method inside your dynamic route component. +--- + +# The validate Method + +> Nuxt.js lets you define a validator method inside your dynamic route component. + +- **Type:** `Function` + +```js +validate({ params, query }) { + return true // if the params are valid + return false // will stop Nuxt.js to render the route and display the error page +} +``` + +Nuxt.js lets you define a validator method inside your dynamic route component (In this example: `pages/users/_id.vue`). + +If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page. + +```js +export default { + validate ({ params }) { + // Must be a number + return /^\d+$/.test(params.id) + } +} +``` diff --git a/ja/examples/async-data.md b/ja/examples/async-data.md new file mode 100644 index 000000000..0fa258040 --- /dev/null +++ b/ja/examples/async-data.md @@ -0,0 +1,6 @@ +--- +title: Async Data +description: Async Data example with Nuxt.js +github: async-data +documentation: /guide/async-data +--- diff --git a/ja/examples/auth-routes.md b/ja/examples/auth-routes.md new file mode 100644 index 000000000..033b605ed --- /dev/null +++ b/ja/examples/auth-routes.md @@ -0,0 +1,210 @@ +--- +title: Auth Routes +description: Authenticated routes example with Nuxt.js +github: auth-routes +livedemo: https://nuxt-auth-routes.gomix.me +liveedit: https://gomix.com/#!/project/nuxt-auth-routes +--- + +# Documentation + +> Nuxt.js can be used to create authenticated routes easily. + +## Using Express and Sessions + +To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically. + +First, we install the dependencies: +```bash +yarn add express express-session body-parser whatwg-fetch +``` + +*We will talk about `whatwg-fetch` later.* + +Then we create our `server.js`: +```js +const Nuxt = require('nuxt') +const bodyParser = require('body-parser') +const session = require('express-session') +const app = require('express')() + +// Body parser, to access req.body +app.use(bodyParser.json()) + +// Sessions to create req.session +app.use(session({ + secret: 'super-secret-key', + resave: false, + saveUninitialized: false, + cookie: { maxAge: 60000 } +})) + +// POST /api/login to log in the user and add him to the req.session.authUser +app.post('/api/login', function (req, res) { + if (req.body.username === 'demo' && req.body.password === 'demo') { + req.session.authUser = { username: 'demo' } + return res.json({ username: 'demo' }) + } + res.status(401).json({ error: 'Bad credentials' }) +}) + +// POST /api/logout to log out the user and remove it from the req.session +app.post('/api/logout', function (req, res) { + delete req.session.authUser + res.json({ ok: true }) +}) + +// We instantiate Nuxt.js with the options +const isProd = process.env.NODE_ENV === 'production' +const nuxt = new Nuxt({ dev: !isProd }) +// No build in production +const promise = (isProd ? Promise.resolve() : nuxt.build()) +promise.then(() => { + app.use(nuxt.render) + app.listen(3000) + console.log('Server is listening on http://localhost:3000') +}) +.catch((error) => { + console.error(error) + process.exit(1) +}) +``` + +And we update our `package.json` scripts: +```json +// ... +"scripts": { + "dev": "node server.js", + "build": "nuxt build", + "start": "NODE_ENV=production node server.js" +} +// ... +``` + +## Using the store + +We need a global state to let our application know if the user is connected **across the pages**. + +To let Nuxt.js use Vuex, we create a `store/index.js` file: + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +// Polyfill for window.fetch() +require('whatwg-fetch') + +const store = new Vuex.Store({ + + state: { + authUser: null + }, + + mutations: { + SET_USER: function (state, user) { + state.authUser = user + } + }, + + actions: { + // ... + } + +}) + +export default store +``` + +1. We import `Vue` and `Vuex` (included in Nuxt.js) and we tell Vue to use Vuex to let us use `$store` in our components +2. We `require('whatwg-fetch')` to polyfill the `fetch()` method across all browsers (see [fetch repo](https://github.com/github/fetch)) +3. We create our `SET_USER` mutation which will set the `state.authUser` to the conntected user +4. We export our store instance to Nuxt.js can inject it to our main application + +### nuxtServerInit() action + +Nuxt.js will call a specific action called `nuxtServerInit` with the context in argument, so when the app will be loaded, the store will be already filled with some data we can get from the server. + +In our `store/index.js`, we can add the `nuxtServerInit` action: +```js +nuxtServerInit ({ commit }, { req }) { + if (req.session && req.session.authUser) { + commit('SET_USER', req.session.authUser) + } +} +``` + +### login() action + +We add a `login` action which will be called from our pages component to log in the user: +```js +login ({ commit }, { username, password }) { + return fetch('/api/login', { + // Send the client cookies to the server + credentials: 'same-origin', + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + username, + password + }) + }) + .then((res) => { + if (res.status === 401) { + throw new Error('Bad credentials') + } else { + return res.json() + } + }) + .then((authUser) => { + commit('SET_USER', authUser) + }) +} +``` + +### logout() method + +```js +logout ({ commit }) { + return fetch('/api/logout', { + // Send the client cookies to the server + credentials: 'same-origin', + method: 'POST' + }) + .then(() => { + commit('SET_USER', null) + }) +} +``` + +## Pages components + +Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not. + +### Redirect user if not connected + +Let's add a `/secret` route where only the connected user can see its content: +```html +<template> + <div> + <h1>Super secret page</h1> + <router-link to="/">Back to the home page</router-link> + </div> +</template> + +<script> +export default { + // we use fetch() because we do not need to set data to this component + fetch ({ store, redirect }) { + if (!store.state.authUser) { + return redirect('/') + } + } +} +</script> +``` + +We can see in the `fetch` method that we call `redirect('/')` when our user is not connected. diff --git a/ja/examples/cached-components.md b/ja/examples/cached-components.md new file mode 100644 index 000000000..1f95cb110 --- /dev/null +++ b/ja/examples/cached-components.md @@ -0,0 +1,6 @@ +--- +title: Cached Components +description: Cached Components example with Nuxt.js +github: cached-components +documentation: /api/configuration-cache +--- \ No newline at end of file diff --git a/ja/examples/custom-loading.md b/ja/examples/custom-loading.md new file mode 100644 index 000000000..d2715818b --- /dev/null +++ b/ja/examples/custom-loading.md @@ -0,0 +1,7 @@ +--- +title: Custom Loading Component +description: Custom Loading Component example with Nuxt.js +github: custom-loading +livedemo: https://custom-loading.nuxtjs.org +documentation: /api/configuration-loading +--- diff --git a/ja/examples/custom-routes.md b/ja/examples/custom-routes.md new file mode 100644 index 000000000..a9887d9d1 --- /dev/null +++ b/ja/examples/custom-routes.md @@ -0,0 +1,7 @@ +--- +title: Custom Routes +description: Custom Routes example with Nuxt.js +github: custom-routes +livedemo: https://custom-routes.nuxtjs.org +documentation: /guide/routing#dynamic-routes +--- diff --git a/ja/examples/global-css.md b/ja/examples/global-css.md new file mode 100644 index 000000000..ecf624f44 --- /dev/null +++ b/ja/examples/global-css.md @@ -0,0 +1,7 @@ +--- +title: Global CSS +description: Global CSS example with Nuxt.js +github: global-css +livedemo: https://global-css.nuxtjs.org +documentation: /api/configuration-css +--- diff --git a/ja/examples/hello-world.md b/ja/examples/hello-world.md new file mode 100644 index 000000000..472023d18 --- /dev/null +++ b/ja/examples/hello-world.md @@ -0,0 +1,9 @@ +--- +title: Hello World +description: Hello World example with Nuxt.js +github: hello-world +youtube: https://www.youtube.com/embed/kmf-p-pTi40 +livedemo: https://hello-world.nuxtjs.org +liveedit: https://gomix.com/#!/project/nuxt-hello-world +documentation: /guide/installation#starting-from-scratch +--- diff --git a/ja/examples/i18n.md b/ja/examples/i18n.md new file mode 100644 index 000000000..ab3b9c629 --- /dev/null +++ b/ja/examples/i18n.md @@ -0,0 +1,7 @@ +--- +title: Internationalization (i18n) +description: Internationalization (i18n) example with Nuxt.js +github: i18n +livedemo: https://i18n.nuxtjs.org +documentation: /guide/routing#middleware +--- diff --git a/ja/examples/layouts.md b/ja/examples/layouts.md new file mode 100644 index 000000000..c5960c826 --- /dev/null +++ b/ja/examples/layouts.md @@ -0,0 +1,8 @@ +--- +title: Layouts +description: Layouts example with Nuxt.js +github: custom-layouts +livedemo: https://nuxt-custom-layouts.gomix.me/ +liveedit: https://gomix.com/#!/project/nuxt-custom-layouts +documentation: /guide/views#layouts +--- diff --git a/ja/examples/menu.json b/ja/examples/menu.json new file mode 100644 index 000000000..45980e702 --- /dev/null +++ b/ja/examples/menu.json @@ -0,0 +1,33 @@ +[ + { + "title": "Essentials", + "links": [ + { "name": "Hello world", "to": "" }, + { "name": "SEO HTML Head", "to": "/seo-html-head" } + ] + }, + { + "title": "Customization", + "links": [ + { "name": "Cached Components", "to": "/cached-components" }, + { "name": "Custom Loading", "to": "/custom-loading" }, + { "name": "Custom Routes", "to": "/custom-routes" }, + { "name": "Global CSS", "to": "/global-css" }, + { "name": "Layouts", "to": "/layouts" }, + { "name": "Middleware", "to": "/middleware" }, + { "name": "Nested Routes", "to": "/nested-routes" }, + { "name": "Plugins", "to": "/plugins" }, + { "name": "Routes transitions", "to": "/routes-transitions" } + ] + }, + { + "title": "Advanced", + "links": [ + { "name": "Async Data", "to": "/async-data" }, + { "name": "Auth Routes", "to": "/auth-routes" }, + { "name": "Vuex Store", "to": "/vuex-store" }, + { "name": "i18n", "to": "/i18n" }, + { "name": "Testing", "to": "/testing" } + ] + } +] diff --git a/ja/examples/middleware.md b/ja/examples/middleware.md new file mode 100644 index 000000000..afd8a1552 --- /dev/null +++ b/ja/examples/middleware.md @@ -0,0 +1,7 @@ +--- +title: Middleware +description: Middleware example with Nuxt.js +github: middleware +livedemo: https://middleware.nuxtjs.org +documentation: /guide/routing#middleware +--- diff --git a/ja/examples/nested-routes.md b/ja/examples/nested-routes.md new file mode 100644 index 000000000..471fd28cc --- /dev/null +++ b/ja/examples/nested-routes.md @@ -0,0 +1,7 @@ +--- +title: Nested Routes +description: Nested Routes example with Nuxt.js +github: nested-routes +livedemo: https://nested-routes.nuxtjs.org +documentation: /guide/routing#nested-routes +--- diff --git a/ja/examples/plugins.md b/ja/examples/plugins.md new file mode 100644 index 000000000..d33ed90a5 --- /dev/null +++ b/ja/examples/plugins.md @@ -0,0 +1,7 @@ +--- +title: Plugins +description: Using external modules and plugins with nuxt.js +github: plugins-vendor +livedemo: https://plugins-vendor.nuxtjs.org +documentation: /guide/plugins +--- diff --git a/ja/examples/routes-transitions.md b/ja/examples/routes-transitions.md new file mode 100644 index 000000000..913888b35 --- /dev/null +++ b/ja/examples/routes-transitions.md @@ -0,0 +1,8 @@ +--- +title: Routes transitions +description: Routes transitions example with Nuxt.js +github: routes-transitions +youtube: https://www.youtube.com/embed/RIXOzJWFfc8 +livedemo: https://routes-transitions.nuxtjs.org +documentation: /guide/routing#transitions +--- diff --git a/ja/examples/seo-html-head.md b/ja/examples/seo-html-head.md new file mode 100644 index 000000000..02525b10b --- /dev/null +++ b/ja/examples/seo-html-head.md @@ -0,0 +1,7 @@ +--- +title: SEO HTML Head +description: SEO HTML Head example with Nuxt.js +github: head-elements +livedemo: https://head-elements.nuxtjs.org +documentation: /guide/views#html-head +--- diff --git a/ja/examples/testing.md b/ja/examples/testing.md new file mode 100644 index 000000000..1221672b4 --- /dev/null +++ b/ja/examples/testing.md @@ -0,0 +1,6 @@ +--- +title: Testing +description: Testing example with Nuxt.js +github: with-ava +documentation: /guide/development-tools#end-to-end-testing +--- diff --git a/ja/examples/vuex-store.md b/ja/examples/vuex-store.md new file mode 100644 index 000000000..e4ff096c1 --- /dev/null +++ b/ja/examples/vuex-store.md @@ -0,0 +1,7 @@ +--- +title: Vuex Store +description: Vuex Store example with Nuxt.js +github: vuex-store +livedemo: https://vuex-store.nuxtjs.org +documentation: /guide/vuex-store +--- diff --git a/ja/faq/async-data-components.md b/ja/faq/async-data-components.md new file mode 100644 index 000000000..b96e4e2f2 --- /dev/null +++ b/ja/faq/async-data-components.md @@ -0,0 +1,14 @@ +--- +title: Async data in components +description: Async data in components? +--- + +# Async data in components? + +It is not possible because it's not linked to a route, Nuxt.js surcharges the component data() associated to a route to allow async data. + +For sub components, there are 2 ways of achieving it: +1. Making the API call in the mounted() hook and setting the data afterwards, downside: no server rendering +2. Making the API call in the data() of the page component and giving the data as a prop to the subComponent: server rendering OK. But the data() of the page might be less readable because it's loading the async data of the sub components + +It all depends if you want the sub components to be server-rendered or not. diff --git a/ja/faq/css-flash.md b/ja/faq/css-flash.md new file mode 100644 index 000000000..41a5ed34e --- /dev/null +++ b/ja/faq/css-flash.md @@ -0,0 +1,12 @@ +--- +title: CSS Flash +description: Why a CSS Flash appears with Nuxt.js? +--- + +# Why a CSS Flash appears? + +![cssflash](/flash_css.gif) + +This is because the CSS is in the JavaScript build in **development mode** to allow hot-reloading via Webpack. + +Don't worry in production mode, the CSS is separated and put in the header so this "flash" does not appear anymore. diff --git a/ja/faq/duplicated-meta-tags.md b/ja/faq/duplicated-meta-tags.md new file mode 100644 index 000000000..235a51f11 --- /dev/null +++ b/ja/faq/duplicated-meta-tags.md @@ -0,0 +1,42 @@ +--- +title: Duplicated Meta tags +description: Duplicated Meta tags with Nuxt.js? +--- + +# Duplicated Meta tags? + +This is a "feature" of [vue-meta](https://github.com/declandewet/vue-meta), please take a look at the [documentation of head elements](https://nuxtjs.org/guide/html-head#defaults-meta). + +> To avoid any duplication when used in child component, please give a unique identifier with the hid key, please [read more](https://github.com/declandewet/vue-meta#lists-of-tags) about it. + +For the meta description, you need to add the unique identifier `hid` so vue-meta will know that it has to overwrite the default tag. + +Your `nuxt.config.js`: +```js +...head: { + title: 'starter', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { name: 'keywords', content: 'keyword 1, keyword 2'}, + { hid: 'description', name: 'description', content: 'This is the generic description.'} + ], + }, +... +``` + +An then in your individual page: +```js +export default { + head () { + return { + title: `Page 1 (${this.name}-side)`, + meta: [ + { hid: 'description', name: 'description', content: "Page 1 description" } + ], + } + } +} +``` + +To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views/#html-head). diff --git a/ja/faq/extend-webpack.md b/ja/faq/extend-webpack.md new file mode 100644 index 000000000..c2500ad25 --- /dev/null +++ b/ja/faq/extend-webpack.md @@ -0,0 +1,18 @@ +--- +title: Extend Webpack +description: How to extend webpack config? +--- + +# How to extend webpack config? + +You can extend the webpack configuration via the `extend` option in your `nuxt.config.js`: + +```js +module.exports = { + build: { + extend (config, { isDev, isClient }) { + // ... + } + } +} +``` diff --git a/ja/faq/external-resources.md b/ja/faq/external-resources.md new file mode 100644 index 000000000..a12f2a51e --- /dev/null +++ b/ja/faq/external-resources.md @@ -0,0 +1,46 @@ +--- +title: External resources +description: How to use external resources with Nuxt.js? +--- + +# How to use external resources? + +## Global Settings + +Include your resources in the `nuxt.config.js` file: + +```js +module.exports = { + head: { + script: [ + { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] + } +} +``` + +## Local Settings + +Include your resources in your .vue file inside the pages directory: + +```html +<template> + <h1>About page with jQuery and Roboto font</h1> +</template> + +<script> +export default { + head: { + script: [ + { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] + } +} +</script> +``` diff --git a/ja/faq/github-pages.md b/ja/faq/github-pages.md new file mode 100644 index 000000000..205dabb37 --- /dev/null +++ b/ja/faq/github-pages.md @@ -0,0 +1,44 @@ +--- +title: Github Pages Deployment +description: How to deploy Nuxt.js on Github Pages? +--- + +# How to deploy on Github Pages? + +Nuxt.js gives you the possibility to host your web application on any static hosting like [Github Pages](https://pages.github.com/) for example. + +To deploy on Github Pages, you need to generate your static web application: + +```bash +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on Github Pages hosting. +Branch `gh-pages` for project repository OR branch `master` for user or organization site + +## Command line deployment + +You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): + +First install it via npm: +```bash +npm install push-dir --save-dev +``` + +Add a `deploy` command to your package.json with the branch as `gh-pages` for project repository OR `master` for user or organization site. + +```js +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate", + "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" +}, +``` + +Then generate and deploy your static application: +```bash +npm run generate +npm run deploy +``` diff --git a/ja/faq/google-analytics.md b/ja/faq/google-analytics.md new file mode 100644 index 000000000..6d094dbf3 --- /dev/null +++ b/ja/faq/google-analytics.md @@ -0,0 +1,60 @@ +--- +title: Google Analytics Integration +description: How to use Google Analytics? +--- + +## How to use Google Analytics? + +To use [Google Analytics](https://analytics.google.com/analytics/web/) with your nuxt.js application, we recommend to create a file `plugins/ga.js`: + +```js +/* +** Only run on client-side and only in production mode +*/ +if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { + /* + ** Include Google Analytics Script + */ + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + /* + ** Set the current page + */ + ga('create', 'UA-XXXXXXXX-X', 'auto') + ga('send', 'pageview') + /* + ** When the app is mounted + */ + window.onNuxtReady((app) => { + /* + ** Every time the route changes + */ + app.$nuxt.$on('routeChanged', (to, from) => { + /* + ** We tell Google Analytic to add a page view + */ + ga('set', 'page', to.fullPath) + ga('send', 'pageview') + }) + }) +} +``` + +> Replace `UA-XXXXXXXX-X` by your Google Analytics tracking ID. + +Then, we tell nuxt.js to import it in our main application: + +`nuxt.config.js` +```js +module.exports = { + plugins: [ + '~plugins/ga.js' + ] +} +``` + +Voilà, Google Analytics is integrated into your nuxt.js application and will track every page view! + +<p class="Alert Alert--nuxt-green"><b>INFO:</b> you can use this method for any other tracking service.</p> diff --git a/ja/faq/heroku-deployment.md b/ja/faq/heroku-deployment.md new file mode 100644 index 000000000..d077f027f --- /dev/null +++ b/ja/faq/heroku-deployment.md @@ -0,0 +1,40 @@ +--- +title: Heroku Deployment +description: How to deploy Nuxt.js on Heroku? +--- + +# How to deploy on Heroku? + +We recommend you to read the [Heroku documentation for node.js](https://devcenter.heroku.com/articles/nodejs-support). + +First, we need to tell Heroku to install the `devDependencies` of the project (to be able to launch `npm run build`): +```bash +heroku config:set NPM_CONFIG_PRODUCTION=false +``` + +Also, we want our application to listen on the port `0.0.0.0` and run in production mode: +```bash +heroku config:set HOST=0.0.0.0 +heroku config:set NODE_ENV=production +``` + +You should see this in your Heroku dashboard (Settings section): + +![nuxt config vars Heroku](https://i.imgur.com/EEKl6aS.png) + +Then, we tell Heroku to launch `npm run build` via the `heroku-postbuild` script in our `package.json`: +```js +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "heroku-postbuild": "npm run build" +} +``` + +Finally, we can push the app on Heroku with: +```bash +git push heroku master +``` + +Voilà! Your nuxt.js application is now hosted on Heroku! diff --git a/ja/faq/host-port.md b/ja/faq/host-port.md new file mode 100644 index 000000000..5c97c492f --- /dev/null +++ b/ja/faq/host-port.md @@ -0,0 +1,26 @@ +--- +title: HOST and PORT +description: How to edit HOST and PORT with Nuxt.js? +--- + +# How to edit HOST and PORT? + +You can configure the PORT with 2 different ways: +- Via a env variables +```js +"scripts": { + "dev": "HOST=0.0.0.0 PORT=3333 nuxt" +} +``` +- Via a nuxt config in the `package.json`: +```js +"config": { + "nuxt": { + "host": "0.0.0.0", + "port": "3333" + } +}, +"scripts": { + "dev": "nuxt" +} +``` diff --git a/ja/faq/jsx.md b/ja/faq/jsx.md new file mode 100644 index 000000000..9fb99a155 --- /dev/null +++ b/ja/faq/jsx.md @@ -0,0 +1,43 @@ +--- +title: JSX +description: How to use JSX with Nuxt.js? +--- + +# How to use JSX? + +If you want to use JSX in your components, first, you need to install the Babel plugins for JSX: + +```bash +npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props +``` + +Then, in your `nuxt.config.js`, tell nuxt.js to use the [transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) plugin: + +```js +module.exports = { + build: { + babel: { + plugins: ['transform-vue-jsx'] + } + } +} +``` + +To learn more about the babel option, take a look at the [build config documentation](/api/configuration-build). + +You can now use JSX in your `render` method of your components: + +```html +<script> +export default { + data () { + return { name: 'World' } + }, + render (h) { + return <h1 class="red">{this.name}</h1> + } +} +</script> +``` + +You can learn more how to use it in the [JSX section](https://vuejs.org/v2/guide/render-function.html#JSX) of the Vue.js documentation. diff --git a/ja/faq/menu.json b/ja/faq/menu.json new file mode 100644 index 000000000..ba43e2a84 --- /dev/null +++ b/ja/faq/menu.json @@ -0,0 +1,33 @@ +[ + { + "title": "Configuration", + "links": [ + { "name": "How to use external resources?", "to": "" }, + { "name": "How to use pre-processors?", "to": "/pre-processors" }, + { "name": "How to use JSX?", "to": "/jsx" }, + { "name": "How to add postcss plugins?", "to": "/postcss-plugins" }, + { "name": "How to extend webpack config?", "to": "/extend-webpack" }, + { "name": "How to add webpack plugins?", "to": "/webpack-plugins" }, + { "name": "How to edit HOST and PORT?", "to": "/host-port" }, + { "name": "How to use Google Analytics?", "to": "/google-analytics" } + ] + }, + { + "title": "Development", + "links": [ + { "name": "Window/Document undefined?", "to": "/window-document-undefined" }, + { "name": "Why a CSS Flash appears?", "to": "/css-flash" }, + { "name": "Async data in components?", "to": "/async-data-components" }, + { "name": "Duplicated Meta Tags?", "to": "/duplicated-meta-tags" } + ] + }, + { + "title": "Deployment", + "links": [ + { "name": "How to deploy on Heroku?", "to": "/heroku-deployment" }, + { "name": "How to deploy with Now.sh?", "to": "/now-deployment" }, + { "name": "How to deploy with Surge.sh?", "to": "/surge-deployment" }, + { "name": "How to deploy on Github?", "to": "/github-pages" } + ] + } +] diff --git a/ja/faq/now-deployment.md b/ja/faq/now-deployment.md new file mode 100644 index 000000000..e796d437d --- /dev/null +++ b/ja/faq/now-deployment.md @@ -0,0 +1,25 @@ +--- +title: Now Deployment +description: How to deploy Nuxt.js with Now.sh? +--- + +# How to deploy with Now.sh? + +To deploy with [now.sh](https://zeit.co/now) a `package.json` like follows is recommended: +```json +{ + "name": "my-app", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} +``` + +Then run `now` and enjoy! + +Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. diff --git a/ja/faq/postcss-plugins.md b/ja/faq/postcss-plugins.md new file mode 100644 index 000000000..3f83d2476 --- /dev/null +++ b/ja/faq/postcss-plugins.md @@ -0,0 +1,20 @@ +--- +title: Postcss plugins +description: How to add postcss plugins? +--- + +# How to add postcss plugins? + +In your `nuxt.config.js` file: + +```js +module.exports = { + build: { + postcss: [ + require('postcss-nested')(), + require('postcss-responsive-type')(), + require('postcss-hexrgba')(), + ] + } +} +``` diff --git a/ja/faq/pre-processors.md b/ja/faq/pre-processors.md new file mode 100644 index 000000000..235ad9ce3 --- /dev/null +++ b/ja/faq/pre-processors.md @@ -0,0 +1,31 @@ +--- +title: Pre-processors +description: How to use pre-processors with Nuxt.js? +--- + +# How to use pre-processors? + +Thanks to [vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html), you can use any kind of pre-processors for your `<template>`, `<script>` or `<style>`: simply use the `lang` attribute. + +Example of our `pages/index.vue` using [Pug](https://github.com/pugjs/pug), [CoffeeScript](http://coffeescript.org) and [Sass](http://sass-lang.com/): + +```html +<template lang="pug"> + h1.red Hello {{ name }}! +</template> + +<script lang="coffee"> +module.exports = data: -> + { name: 'World' } +</script> + +<style lang="sass"> +.red + color: red +</style> +``` + +To be able to use these pre-processors, we need to install their webpack loaders: +```bash +npm install --save-dev pug@2.0.0-beta6 pug-loader coffee-script coffee-loader node-sass sass-loader +``` diff --git a/ja/faq/surge-deployment.md b/ja/faq/surge-deployment.md new file mode 100644 index 000000000..7af82dec5 --- /dev/null +++ b/ja/faq/surge-deployment.md @@ -0,0 +1,33 @@ +--- +title: Surge Deployment +description: How to deploy Nuxt.js with Surge.sh? +--- + +# How to deploy with Surge.sh? + +Nuxt.js gives you the possibility to host your web application on any static hosting like [surge.sh](https://surge.sh/) for example. + +To deploy on surge.sh, first install it on your computer: +```bash +npm install -g surge +``` + +Then, we tell nuxt.js to generate our web application: + +```bash +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on a static hosting. + +We can then deploy it to surge.sh: + +```bash +surge dist/ +``` + +Done :) + +If you have a project with [dynamic routes](/guide/routing#dynamic-routes), take a look at the [generate configuration](/api/configuration-generate) to tell nuxt.js how to generate these dynamic routes. + +<div class="Alert">When generating your web application with `nuxt generate`, [the context](/api) given to [data()](/guide/async-data#the-data-method) and [fetch()](/guide/vuex-store#the-fetch-method) will not have `req` and `res`.</div> diff --git a/ja/faq/webpack-plugins.md b/ja/faq/webpack-plugins.md new file mode 100644 index 000000000..0c874b844 --- /dev/null +++ b/ja/faq/webpack-plugins.md @@ -0,0 +1,24 @@ +--- +title: Webpack plugins +description: How to add webpack plugins? +--- + +# How to add webpack plugins? + +In your `nuxt.config.js` file: + +```js +const webpack = require('webpack') + +module.exports = { + build: { + plugins: [ + new webpack.ProvidePlugin({ + '$': 'jquery', + '_': 'lodash' + // ...etc. + }) + ] + } +} +``` diff --git a/ja/faq/window-document-undefined.md b/ja/faq/window-document-undefined.md new file mode 100644 index 000000000..3a405280c --- /dev/null +++ b/ja/faq/window-document-undefined.md @@ -0,0 +1,23 @@ +--- +title: Window or Document undefined +description: Window or Document undefined with Nuxt.js? +--- + +# Window or Document undefined? + +This is due to the server-side rendering. +If you need to specify that you want to import a resource only on the client-side, you need to use the `process.BROWSER_BUILD` variable. + +For example, in your .vue file: +```js +if (process.BROWSER_BUILD) { + require('external_library') +} +``` + +Don't forget to add your library in the [vendor bundle](/api/configuration-build#build-vendor) in your `nuxt.config.js`: +```js + build: { + vendor: ['external_library'] + } +``` diff --git a/ja/guide/assets.md b/ja/guide/assets.md new file mode 100644 index 000000000..7b6faba44 --- /dev/null +++ b/ja/guide/assets.md @@ -0,0 +1,98 @@ +--- +title: Assets +description: Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets. +--- + +> Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets. + +## Webpacked + +By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as `<img src="...">`, `background: url(...)` and CSS `@import` are resolved as module dependencies. + +For example, we have this file tree: + +```bash +-| assets/ +----| image.png +-| pages/ +----| index.vue +``` + +In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`. + +Or if in my `pages/index.vue`, I use: +```html +<template> + <img src="~assets/image.png"> +</template> +``` + +It will be compiled into: + +```js +createElement('img', { attrs: { src: require('~assets/image.png') }}) +``` + +Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you. + +The benefits of them are: +- `file-loader` lets you designate where to copy and place the asset file, and how to name it using version hashes for better caching. +- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce a number of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`. + +Actually, Nuxt.js default loaders configuration is: + +```js +[ + { + test: /\.(png|jpe?g|gif|svg)$/, + loader: 'url-loader', + query: { + limit: 1000, // 1KO + name: 'img/[name].[hash:7].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 1000, // 1 KO + name: 'fonts/[name].[hash:7].[ext]' + } + } +] +``` + +Which means that every file below 1 KO will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the `.nuxt` directory) with a name containing a version hashes for better caching. + +When launching our application with `nuxt`, our template in `pages/index.vue`: + +```html +<template> + <img src="~assets/image.png"> +</template> +``` + +Will be generated into: +```html +<img src="/_nuxt/img/image.0c61159.png"> +``` + +If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build#loaders). + +## Static + +If you don't want to use Webpacked Assets from the `assets` directory, you can create and use the `static` directory in your project root directory. + +These files will be automatically serve by Nuxt and accessible in your project root URL. + +This option is helpful for files like `robots.txt` or `sitemap.xml`. + +From your code you can then reference those files with `/` URLs: + +```html +<!-- Static image from static directory --> +<img src="/my-image.png"/> + +<!-- Webpacked image from assets directory --> +<img src="/assets/my-image-2.png"/> +``` diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md new file mode 100644 index 000000000..de3f3fb2e --- /dev/null +++ b/ja/guide/async-data.md @@ -0,0 +1,114 @@ +--- +title: Async Data +description: Nuxt.js supercharges the data method from vue.js to let you handle async operation before setting the component data. +--- + +> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. + +## The data Method + +`data` is called every time before loading the component (**only for pages components**). It can be called from the server-side or before navigating to the corresponding route. This method receives [the context](/api#context) as the first argument, you can use it to fetch some data and return the component data. + +<div class="Alert Alert--orange">You do **NOT** have access of the component instance trough `this` inside `data` because it is called **before initiating** the component.</div> + +To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with: + +1. returning a `Promise`, nuxt.js will wait for the promise to be resolved before rendering the component. +2. Using the [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) ([learn more about it](https://zeit.co/blog/async-and-await)) +3. Define a callback as second argument. It has to be called like this: `callback(err, data)` + +### Returning a Promise +```js +export default { + data ({ params }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + } +} +``` + +### Using async/await +```js +export default { + async data ({ params }) { + let { data } = await axios.get(`https://my-api/posts/${params.id}`) + return { title: data.title } + } +} +``` + +### Using a callback +```js +export default { + data ({ params }, callback) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + } +} +``` + +### Returning an Object + +If you don't need to do any asynchronous call, you can simply return an object: + +```js +export default { + data (context) { + return { foo: 'bar' } + } +} +``` + +### Displaying the data + +When the data method set, you can display the data inside your template like you used to do: + +```html +<template> + <h1>{{ title }}</h1> +</template> +``` + +## The Context + +To see the list of available keys in `context`, take a look at the [API Pages data](/api). + +## Handling Errors + +Nuxt.js add the `error(params)` method in the `context`, you can call it to display the error page. `params.statusCode` will be also used to render the proper status code form the server-side. + +Example with a `Promise`: +```js +export default { + data ({ params, error }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + .catch((e) => { + error({ statusCode: 404, message: 'Post not found' }) + }) + } +} +``` + +If you're using the `callback` argument, you can call it directly with the error, nuxt.js will call the `error` method for you: +```js +export default { + data ({ params }, callback) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + .catch((e) => { + callback({ statusCode: 404, message: 'Post not found' }) + }) + } +} +``` + +To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). diff --git a/ja/guide/commands.md b/ja/guide/commands.md new file mode 100644 index 000000000..aab7fce28 --- /dev/null +++ b/ja/guide/commands.md @@ -0,0 +1,84 @@ +--- +title: Commands +description: Nuxt.js comes with a set of useful commands, both for development and production purpose. +--- + +> Nuxt.js comes with a set of useful commands, both for development and production purpose. + +## List of Commands + +| Command | Description | +|---------|-------------| +| nuxt | Launch a development server on [localhost:3000](http://localhost:3000) with hot-reloading. | +| nuxt build | Build your application with webpack and minify the JS & CSS (for production). | +| nuxt start | Start the server in production mode (After running `nuxt build`). | +| nuxt generate | Build the application and generate every route as a HTML file (used for static hosting). | + +You should put these commands in the `package.json`: + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate" +} +``` + +Then, you can launch your commands via `npm run <command>` (example: `npm run dev`). + +## Development Environment + +To launch Nuxt in development mode with the hot reloading: + +```bash +nuxt +// OR +npm run dev +``` + +## Production Deployment + +Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. + +### Server Rendered Deployment + +To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands: + +```bash +nuxt build +nuxt start +``` + +The `package.json` like follows is recommended: +```json +{ + "name": "my-app", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} +``` + +Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. + +### Static Generated Deployment + +Nuxt.js gives you the possibility to host your web application on any static hosting. + +To generate our web application into static files: + +```bash +npm run generate +``` + +It will create a `dist` folder with everything inside ready to be deployed on a static hosting. + +If you have a project with [dynamic routes](/guide/routing#dynamic-routes), take a look at the [generate configuration](/api/configuration-generate) to tell nuxt.js how to generate these dynamic routes. + +<div class="Alert">When generating your web application with `nuxt generate`, [the context](/api#context) given to [data()](/guide/async-data#the-data-method) and [fetch()](/guide/vuex-store#the-fetch-method) will not have `req` and `res`.</div> diff --git a/ja/guide/configuration.md b/ja/guide/configuration.md new file mode 100644 index 000000000..4307a9a69 --- /dev/null +++ b/ja/guide/configuration.md @@ -0,0 +1,84 @@ +--- +title: Configuration +description: The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. +--- + +> The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. + +### build + +This option lets you add modules inside the vendor.bundle.js file generated to reduce the size of the app bundle. It's really useful when using external modules + +[Documentation about build integration](/api/configuration-build) + +### cache + +This option lets you enable cached components for better render performances. + +[Documentation about cache integration](/api/configuration-cache) + +### css + +This option lets you define the CSS files/modules/libraries you want to set as globals (included in every pages). + +[Documentation about css integration](/api/configuration-css) + +### dev + +This option lets you define the development or production mode of nuxt.js + +[Documentation about dev integration](/api/configuration-dev) + +### env + +This option lets you define environment variables available both client and server side. + +[Documentation about env integration](/api/configuration-env) + +### generate + +This option lets you to define each params value for every dynamic routes in your application that Nuxt.js transforms into HTML files. + +[Documentation about generate integration](/api/configuration-generate) + +### head + +This option lets you to define all the defaults metas for your application. + +[Documentation about head integration](/api/configuration-head) + +### loading + +This option lets you to customize the loading component load by default with Nuxt.js. + +[Documentation about loading integration](/api/configuration-loading) + +### plugins + +This option lets you to define Javascript plugins to be ran before instantiating the root vue.js application. + +[Documentation about plugins integration](/api/configuration-plugins) + +### rootDir + +This option lets you define the workspace of your nuxt.js application. + +[Documentation about rootDir integration](/api/configuration-rootdir) + +### router + +This option lets you to overwrite the default Nuxt.js configuration of vue-router. + +[Documentation about router integration](/api/configuration-router) + +### srcDir + +This option lets you define the source directory of your nuxt.js application. + +[Documentation about srcDir integration](/api/configuration-srcdir) + +### transition + +This option lets you define the default properties of the pages transitions. + +[Documentation about transition integration](/api/configuration-transition) diff --git a/ja/guide/contribution-guide.md b/ja/guide/contribution-guide.md new file mode 100644 index 000000000..556b9f490 --- /dev/null +++ b/ja/guide/contribution-guide.md @@ -0,0 +1,19 @@ +--- +title: Contribution Guide +description: Any contribution to Nuxt.js is more than welcome! +--- + +> Any contribution to Nuxt.js is more than welcome! + +## Reporting Issues + +A great way to contribute to the project is to send a detailed report when you encounter an issue. We always appreciate a well-written bug report, and will thank you for it! Before reporting an issue, please read carefully the documentation and search if any issue for your problem doesn't already exist: https://github.com/nuxt/nuxt.js/issues + +## Pull Requests + +We'd love to see your pull requests, even if it's just to fix a typo. Any significant improvement should be documented as [a GitHub issue](https://github.com/nuxt/nuxt.js/issues) before anybody starts working on it. + +### Convention + +- For a fix, the branch name should be `fix-XXX` where XXX is the issue number or the name of what your fix does +- For a feature, the branch name should be `feature-XXX` where XXX is the issue number associated to this feature request diff --git a/ja/guide/development-tools.md b/ja/guide/development-tools.md new file mode 100644 index 000000000..0d1b745f5 --- /dev/null +++ b/ja/guide/development-tools.md @@ -0,0 +1,154 @@ +--- +title: Development Tools +description: Nuxt.js helps you to make your web development enjoyable. +--- + +> Testing your application is part of the web development. Nuxt.js helps you to make it as easy as possible. + +## End-to-End Testing + +[Ava](https://github.com/avajs/ava) is a powerful JavaScript testing framework, mixed with [jsdom](https://github.com/tmpvar/jsdom), we can use them to do end-to-end testing easily. + +First, we need to add ava and jsdom as development dependencies: +```bash +npm install --save-dev ava jsdom +``` + +And add a test script to our `package.json`: + +```javascript +"scripts": { + "test": "ava", +} +``` + +We are going to write our tests in the `test` folder: +```bash +mkdir test +``` + +Let's says we have a page in `pages/index.vue`: +```html +<template> + <h1 class="red">Hello {{ name }}!</h1> +</template> + +<script> +export default { + data () { + return { name: 'world' } + } +} +</script> + +<style> +.red { + color: red; +} +</style> +``` + +When we launch our app with `npm run dev` and open [http://localhost:3000](http://localhost:3000), we can see our red `Hello world!` title. + +We add our test file `test/index.test.js`: + +```js +import test from 'ava' +import Nuxt from 'nuxt' +import { resolve } from 'path' + +// We keep the nuxt and server instance +// So we can close them at the end of the test +let nuxt = null +let server = null + +// Init Nuxt.js and create a server listening on localhost:4000 +test.before('Init Nuxt.js', async t => { + const rootDir = resolve(__dirname, '..') + let config = {} + try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {} + config.rootDir = rootDir // project folder + config.dev = false // production build + nuxt = new Nuxt(config) + await nuxt.build() + server = new nuxt.Server(nuxt) + server.listen(4000, 'localhost') +}) + +// Example of testing only generated html +test('Route / exits and render HTML', async t => { + let context = {} + const { html } = await nuxt.renderRoute('/', context) + t.true(html.includes('<h1 class="red">Hello world!</h1>')) +}) + +// Example of testing via dom checking +test('Route / exits and render HTML with CSS applied', async t => { + const window = await nuxt.renderAndGetWindow('http://localhost:4000/') + const element = window.document.querySelector('.red') + t.not(element, null) + t.is(element.textContent, 'Hello world!') + t.is(element.className, 'red') + t.is(window.getComputedStyle(element).color, 'red') +}) + +// Close server and ask nuxt to stop listening to file changes +test.after('Closing server and nuxt.js', t => { + server.close() + nuxt.close() +}) +``` + +We can now launch our tests: +```bash +npm test +``` + +jsdom has some limitations because it does not use a browser. However, it will cover most of our tests. If you want to use a browser to test your application, you might want to check out [Nightwatch.js](http://nightwatchjs.org). + +## ESLint + +> ESLint is a great tool to keep your code clean + +You can add [ESLint](http://eslint.org) pretty easily with nuxt.js, first, you need to add the npm dependencies: + +```bash +npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard +``` + +Then, you can configure ESLint via a `.eslintrc.js` file in your root project directory: +```js +module.exports = { + root: true, + parser: 'babel-eslint', + env: { + browser: true, + node: true + }, + extends: 'standard', + // required to lint *.vue files + plugins: [ + 'html' + ], + // add your custom rules here + rules: {}, + globals: {} +} +``` + +Then, you can add a `lint` script in your `package.json`: + +```js +"scripts": { + "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." +} +``` + +You can now launch: +```bash +npm run lint +``` + +ESLint will lint every of your JavaScript and Vue files while ignoring your ignored files defined in your `.gitignore`. + +<p class="Alert Alert--info">One best practice is to add also `"precommit": "npm run lint"` in your package.json to lint your code automatically before commiting your code.</p> diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md new file mode 100644 index 000000000..e3996480e --- /dev/null +++ b/ja/guide/directory-structure.md @@ -0,0 +1,94 @@ +--- +title: Directory Structure +description: The default Nuxt.js application structure is intended to provide a great starting point for both large and small applications. +--- + +> The default Nuxt.js application structure is intended to provide a great starting point for both small and large applications. Of course, you are free to organize your application however you like. + +## Directories + +### The Assets Directory + +The `assets` directory contains your un-compiled assets such as LESS, SASS, or JavaScript. + +[More documentation about Assets integration](/guide/assets) + +### The Components Directory + +The `components` directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components. + +### The Layouts Directory + +The `layouts` directory contains your Application Layouts. + +_This directory can not be renamed._ + +[More documentation about Layouts integration](/guide/views#layouts) + +### The Middleware Directory + +_Coming soon_ + +### The Pages Directory + +The `pages` directory contains your Application Views and Routes. The framework reads all the `.vue` files inside this directory and create the router of your application. + +_This directory can not be renamed._ + +[More documentation about Pages integration](/guide/views) + +### The Plugins Directory + +The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. + +[More documentation about Plugins integration](/guide/plugins) + +### The Static Directory + +The `static` directory contains your static files. Each files inside this directory is mapped to /. + +**Example:** /static/robots.txt is mapped as /robots.txt + +_This directory can not be renamed._ + +[More documentation about Static integration](/guide/assets#static) + +### The Store Directory + +The `store` directory contains your [Vuex Store](http://vuex.vuejs.org) files. Vuex Store option is implemented in the Nuxt.js framework. Creating a `index.js` file in this directory activate the option in the framework automatically. + +_This directory can not be renamed._ + +[More documentation about Store integration](/guide/vuex-store) + +### The nuxt.config.js File + +The `nuxt.config.js` file contains your Nuxt.js custom configuration. + +_This file can not be renamed._ + +[More documentation about nuxt.config.js integration](/guide/configuration) + +### The package.json File + +The `package.json` file contains your Application dependencies and scripts. + +_This file can not be renamed._ + +## Aliases + +| Alias | Directory | +|-----|------| +| ~ | / | +| ~assets | /assets | +| ~components | /components | +| ~pages | /pages | +| ~plugins | /plugins | +| ~static | /static | + +Aliases which link to files: + +| Alias | Usage | Description | +|-------|------|--------------| +| ~store | `const store = require('~store')` | Import the `vuex` store instance. | +| ~router | `const router = require('~router')`| Import the `vue-router` instance. | diff --git a/ja/guide/index.md b/ja/guide/index.md new file mode 100644 index 000000000..04f7c0057 --- /dev/null +++ b/ja/guide/index.md @@ -0,0 +1,102 @@ +--- +title: Introduction +description: "The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born." +--- + +> The 25th of October 2016, the team behind [zeit.co](https://zeit.co/), announced [Next.js](https://zeit.co/blog/next), a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered [Vue.js](https://vuejs.org) applications the same way as Next.js was obvious: **Nuxt.js** was born. + +## What is Nuxt.js ? + +Nuxt.js is a framework for creating Universal Vue.js Applications. + +Its main scope is **UI rendering** while abstracting away the client/server distribution. + +Our goal is to create a framework flexible enough so that you can use it as a main project base or in addition to your current project based on Node.js. + +Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. + +In addition, we also provide another deployment option called: *nuxt generate*. It will build a **Static Generated** Vue.js Application. +We believe that option could be the next big step in the development of Web Applications with microservices. + +As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc. + +## How it Works + +![Vue with Webpack and Babel](https://i.imgur.com/avEUftE.png) + +Nuxt.js includes the following to create a rich web application development: +- [Vue 2](https://github.com/vuejs/vue) +- [Vue-Router](https://github.com/vuejs/vue-router) +- [Vuex](https://github.com/vuejs/vuex) (included only when using the [store option](/guide/vuex-store)) +- [Vue-Meta](https://github.com/declandewet/vue-meta) + +A total of only **28kb min+gzip** (31kb with vuex). + +Under the hood we use [Webpack](https://github.com/webpack/webpack) with [vue-Loader](https://github.com/vuejs/vue-loader) and [babel-loader](https://github.com/babel/babel-loader) to bundle, code-split and minify your code. + +## Features + +- Write Vue Files +- Automatic Code Splitting +- Server-Side Rendering +- Powerful Routing System with Asynchronous Data +- Static File Serving +- ES6/ES7 Transpilation +- Bundling and minifying of your JS & CSS +- Managing Head Elements +- Hot reloading in Development +- Pre-processor: SASS, LESS, Stylus, etc + +## Schema + +This schema shows what is called by nuxt.js when the server is called or when the user navigate through the app via `<nuxt-link>`: + +![nuxt-schema](/nuxt-schema.png) + +## Server Rendered + +You can use nuxt.js as a framework to handle all the UI rendering of your project. + +When launching `nuxt`, it will start a development server with hot-reloading and vue-server-renderer configured to automatically server-render your application. + +Take a look at [the commands](/guide/commands) to learn more about it. + +If you already have a server, you can plug nuxt.js by using it as a middleware, there is no restriction at all when using nuxt.js for developing your Universal Web Applications, see the [Using Nuxt.js Programmatically](/api/nuxt) guide. + +## Static Generated + +The big innovation of nuxt.js comes here: `nuxt generate` + +When building your application it will generate the HTML of every of your routes to store it in a file. + +Example: + +```bash +-| pages/ +----| about.vue +----| index.vue +``` + +Will generate: +``` +-| dist/ +----| about/ +------| index.html +----| index.html +``` + +This way, you can host your generated web application on any static hosting! + +The best example is this website. It is generated and hosted on Github Pages: +- [Source code](https://github.com/nuxt/nuxtjs.org) +- [Generated code](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) + +We don't want to manually generate the application every time we update the [docs repository](https://github.com/nuxt/docs), so each push made calls an AWS Lambda function which: +1. Clone the [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org) +2. Install the dependencies via `npm install` +3. Run `nuxt generate` +4. Push the `dist` folder to the `gh-pages` branch + +We now have a **Serverless Static Generated Web Application** :) + +We can go further by thinking of an e-commerce web application made with `nuxt generate` and hosted on a CDN, and every time a product is out of stock or back in stock, we regenerate the web app. But if the user navigates through the web app in the meantime, it will be up to date thanks to the API calls made to the e-commerce API. No need to have multiple instances of a server + a cache anymore! diff --git a/ja/guide/installation.md b/ja/guide/installation.md new file mode 100644 index 000000000..f20967e37 --- /dev/null +++ b/ja/guide/installation.md @@ -0,0 +1,92 @@ +--- +title: Installation +description: Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. +--- + +> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. + +## Using Nuxt.js starter template + +To start quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt/starter). + +[Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli: + +```bash +$ vue init nuxt/starter <project-name> +``` + +> If [vue-cli](https://github.com/vuejs/vue-cli) is not installed, please install it with `npm install -g vue-cli` + +then install the dependencies: + +```bash +$ cd <project-name> +$ npm install +``` + +and launch the project with: +```bash +$ npm run dev +``` +The application is now running on http://localhost:3000 + +<p class="Alert">Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages</p> + +To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). + +## Starting from scratch + +Creating a Nuxt.js application from scratch is also really easy, it only needs *1 file and 1 directory*. Let's create an empty directory to start working on the application: + +```bash +$ mkdir <project-name> +$ cd <project-name> +``` + +*Info: replace project-name by the name of the project.* + +### The package.json + +The project needs a `package.json` file to specify how to start `nuxt`: +```json +{ + "name": "my-app", + "scripts": { + "dev": "nuxt" + } +} +``` +`scripts` will launch Nuxt.js via `npm run dev`. + +### Installing `nuxt` + +Once the `package.json` has been created, add `nuxt` to the project via NPM: +```bash +npm install --save nuxt +``` + +### The `pages` directory + +Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application. + +Create the `pages` directory: +```bash +$ mkdir pages +``` + +then create the first page in `pages/index.vue`: +```html +<template> + <h1>Hello world!</h1> +</template> +``` + +and launch the project with: +```bash +$ npm run dev +``` +The application is now running on http://localhost:3000 + +<p class="Alert">Nuxt.js will listen on the files changes inside the `pages` directory, so no need to restart the application when adding new pages</p> + +To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). diff --git a/ja/guide/menu.json b/ja/guide/menu.json new file mode 100644 index 000000000..a82158293 --- /dev/null +++ b/ja/guide/menu.json @@ -0,0 +1,107 @@ +[ + { + "title": "Prologue", + "links": [ + { + "to": "", "name": "Introduction", + "contents": [ + { "to": "#what-is-nuxt-js-", "name": "What is Nuxt.js ?" }, + { "to": "#how-it-works", "name": "How it Works" }, + { "to": "#features", "name": "Features" }, + { "to": "#schema", "name": "Schema" }, + { "to": "#server-rendered", "name": "Server Rendered" }, + { "to": "#static-generated", "name": "Static Generated" } + ] + }, + { "to": "/contribution-guide", "name": "Contribution Guide" }, + { "to": "/release-notes", "name": "Release Notes" } + ] + }, + { + "title": "Getting Started", + "links": [ + { + "to": "/installation", "name": "Installation", + "contents": [ + { "to": "#using-nuxt-js-starter-template", "name": "Using Nuxt.js starter template" }, + { "to": "#starting-from-scratch", "name": "Starting from scratch" } + ] + }, + { + "to": "/directory-structure", "name": "Directory structure", + "contents": [ + { "to": "#directories", "name": "Directories" }, + { "to": "#aliases", "name": "Aliases" } + ] + }, + { "to": "/configuration", "name": "Configuration" }, + { + "to": "/routing", "name": "Routing", + "contents": [ + { "to": "#basic-routes", "name": "Basic Routes" }, + { "to": "#dynamic-routes", "name": "Dynamic Routes" }, + { "to": "#nested-routes", "name": "Nested Routes" }, + { "to": "#dynamic-nested-routes", "name": "Dynamic Nested Routes" }, + { "to": "#transitions", "name": "Transitions" }, + { "to": "#middleware", "name": "Middleware" } + ] + }, + { + "to": "/views", "name": "Views", + "contents": [ + { "to": "#pages", "name": "Pages" }, + { "to": "#layouts", "name": "Layouts" }, + { "to": "#html-head", "name": "HTML Head" } + ] + }, + { + "to": "/async-data", "name": "Async Data", + "contents": [ + { "to": "#the-data-method", "name": "The data Method" }, + { "to": "#the-context", "name": "The Context" }, + { "to": "#handling-errors", "name": "Handling Errors" } + ] + }, + { + "to": "/assets", "name": "Assets", + "contents": [ + { "to": "#webpacked", "name": "Webpacked" }, + { "to": "#static", "name": "Static" } + ] + }, + { + "to": "/plugins", "name": "Plugins", + "contents": [ + { "to": "#external-packages", "name": "External Packages" }, + { "to": "#vue-plugins", "name": "Vue Plugins" }, + { "to": "#client-side-only", "name": "Client-side only" } + ] + }, + { + "to": "/vuex-store", "name": "Vuex Store", + "contents": [ + { "to": "#activate-the-store", "name": "Activate the Store" }, + { "to": "#classic-mode", "name": "Classic mode" }, + { "to": "#modules-mode", "name": "Modules mode" }, + { "to": "#the-fetch-method", "name": "The fetch Method" }, + { "to": "#the-nuxtserverinit-action", "name": "The nuxtServerInit Action" } + ] + }, + { + "to": "/commands", "name": "Commands", + "contents": [ + { "to": "#list-of-commands", "name": "List of Commands" }, + { "to": "#development-environment", "name": "Developemnt Enviroment" }, + { "to": "#production-deployment", "name": "Production Deployment" } + ] + }, + { + "to": "/development-tools", "name": "Development Tools", + "contents": [ + { "to": "#end-to-end-testing", "name": "End-to-End Testing" }, + { "to": "#eslint", "name": "ESLint" } + ] + } + ] + } +] diff --git a/ja/guide/plugins.md b/ja/guide/plugins.md new file mode 100644 index 000000000..03a8f04b0 --- /dev/null +++ b/ja/guide/plugins.md @@ -0,0 +1,98 @@ +--- +title: Plugins +description: Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application, it can be to use your own library or external modules. +--- + +> Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application, it can be to use your own library or external modules. + +<div class="Alert">It is important to know that in any Vue [instance lifecycle](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram), only `beforeCreate` and `created` hooks are called **both from client-side and server-side**. All other hooks are called only from the client-side.</div> + +## External Packages + +We may want to use external packages/modules in our application, one great example is [axios](https://github.com/mzabriskie/axios) for making HTTP request for both server and client. + +We install it via NPM: + +```bash +npm install --save axios +``` + +Then, we can use it directly in our pages: + +```html +<template> + <h1>{{ title }}</h1> +</template> + +<script> +import axios from 'axios' + +export default { + async data ({ params }) { + let { data } = await axios.get(`https://my-api/posts/${params.id}`) + return { title: data.title } + } +} +</script> +``` + +But there is **one problem here**, if we import axios in another page, it will be included again for the page bundle. We want to include `axios` only once in our application, for this, we use the `build.vendor` key in our `nuxt.config.js`: + +```js +module.exports = { + build: { + vendor: ['axios'] + } +} +``` + +Then, I can import `axios` anywhere without having to worry about making the bundle bigger! + +## Vue Plugins + +If we want to use [vue-notifications](https://github.com/se-panfilov/vue-notifications) to display notification in our application, we need to setup the plugin before launching the app. + +File `plugins/vue-notifications.js`: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + +Then, we add the file inside the `plugins` key of `nuxt.config.js`: +```js +module.exports = { + plugins: ['~plugins/vue-notifications'] +} +``` + +To learn more about the `plugins` configuration key, check out the [plugins api](/api/configuration-plugins). + +Actually, `vue-notifications` will be included in the app bundle, but because it's a library, we want to include it in the vendor bundle for better caching. + +We can update our `nuxt.config.js` to add `vue-notifications` in the vendor bundle: +```js +module.exports = { + build: { + vendor: ['vue-notifications'] + }, + plugins: ['~plugins/vue-notifications'] +} +``` + +## Client-side only + +Some plugins might work **only for the browser**, you can use the `process.BROWSER_BUILD` variable to check if the plugin will run from the client-side. + +Example: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +if (process.BROWSER_BUILD) { + Vue.use(VueNotifications) +} +``` + +In case you need to require some libraries only for the server, you can use the `process.SERVER_BUILD` variable set to `true` when webpack is creating the `server.bundle.js` file. diff --git a/ja/guide/routing.md b/ja/guide/routing.md new file mode 100644 index 000000000..cbfbe464c --- /dev/null +++ b/ja/guide/routing.md @@ -0,0 +1,311 @@ +--- +title: Routing +description: Nuxt.js use the file-system to generate the routes of your web applications, it's as simple as PHP to create routes. +--- + +> Nuxt.js generates automatically the [vue-router](https://github.com/vuejs/vue-router) configuration according to your file tree of Vue files inside the `pages` directory. + +## Basic Routes + +This file tree: + +```bash +pages/ +--| user/ +-----| index.vue +-----| one.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'user', + path: '/user', + component: 'pages/user/index.vue' + }, + { + name: 'user-one', + path: '/user/one', + component: 'pages/user/one.vue' + } + ] +} +``` + +## Dynamic Routes + +To define a dynamic route with a param, you need to define a .vue file OR a directory **prefixed by an underscore**. + +This file tree: + +```bash +pages/ +--| _slug/ +-----| comments.vue +-----| index.vue +--| users/ +-----| _id.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'users-id', + path: '/users/:id?', + component: 'pages/users/_id.vue' + }, + { + name: 'slug', + path: '/:slug', + component: 'pages/_slug/index.vue' + }, + { + name: 'slug-comments', + path: '/:slug/comments', + component: 'pages/_slug/comments.vue' + } + ] +} +``` + +As you can see the route named `users-id` has the path `:id?` which makes it optional, if you want to make it required, create an `index.vue` file in the `users` directory. + +### Validate Route Params + +Nuxt.js lets you define a validator method inside your dynamic route component. + +In this example: `pages/users/_id.vue` + +```js +export default { + validate ({ params }) { + // Must be a number + return /^\d+$/.test(params.id) + } +} +``` + +If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page. + +More information about the validate method: [API Pages validate](/api/pages-validate) + +## Nested Routes + +Nuxt.js lets you create nested route by using the children routes of vue-router. + +To define a nested route, you need to create a Vue file with the **same name as the directory** which contain your children views. + +<p class="Alert Alert--info">Don't forget to write `<nuxt-child/>` inside the parent component (.vue file).</p> + +This file tree: + +```bash +pages/ +--| users/ +-----| _id.vue +-----| index.vue +--| users.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + path: '/users', + component: 'pages/users.vue', + children: [ + { + path: '', + component: 'pages/users/index.vue', + name: 'users' + }, + { + path: ':id', + component: 'pages/users/_id.vue', + name: 'users-id' + } + ] + } + ] +} +``` + +## Dynamic Nested Routes + +This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents. + +This file tree: + +```bash +pages/ +--| _category/ +-----| _subCategory/ +--------| _id.vue +--------| index.vue +-----| _subCategory.vue +-----| index.vue +--| _category.vue +--| index.vue +``` + +will automatically generate: + +```js +router: { + routes: [ + { + path: '/', + component: 'pages/index.vue', + name: 'index' + }, + { + path: '/:category', + component: 'pages/_category.vue', + children: [ + { + path: '', + component: 'pages/_category/index.vue', + name: 'category' + }, + { + path: ':subCategory', + component: 'pages/_category/_subCategory.vue', + children: [ + { + path: '', + component: 'pages/_category/_subCategory/index.vue', + name: 'category-subCategory' + }, + { + path: ':id', + component: 'pages/_category/_subCategory/_id.vue', + name: 'category-subCategory-id' + } + ] + } + ] + } + ] +} +``` + +## Transitions + +Nuxt.js uses the [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) component to let you create amazing transitions/animations between your routes. + +### Global Settings + +<p class="Alert Alert--info">Nuxt.js default transition name is `"page"`.</p> + +To add a fade transition to every page of your application, we need a CSS file that is shared across all our routes, so we start by creating a file in the `assets` folder. + +Our global css in `assets/main.css`: +```css +.page-enter-active, .page-leave-active { + transition: opacity .5s; +} +.page-enter, .page-leave-active { + opacity: 0; +} +``` + +We add its path in our `nuxt.config.js` file: +```js +module.exports = { + css: [ + 'assets/main.css' + ] +} +``` + +More information about the transition key: [API Configuration transition](/api/pages-transition) + +### Page Settings + +You can also define a custom transition for only one page with the `transition` property. + +We add a new class in our global css in `assets/main.css`: +```css +.test-enter-active, .test-leave-active { + transition: opacity .5s; +} +.test-enter, .test-leave-active { + opacity: 0; +} +``` + +then, we use the transition property to define the class name to use for this page transition: +```js +export default { + transition: 'test' +} +``` + +More information about the transition property: [API Pages transition](/api/pages-transition) + +## Middleware + +> The middleware lets you define custom function to be ran before rendering a page or a group of pages. + +**Every middleware should be placed in the `middleware/` directory.** The filename will be the name of the middleware (`middleware/auth.js` will be the `auth` middleware). + +A middleware receive [the context](/api#the-context) as first argument: + +```js +export default function (context) { + context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent +} +``` + +The middleware will be executed in series in this order: +1. `nuxt.config.js` +2. Matched layouts +3. Matched pages + +A middleware can be asynchronous, simply return a `Promise` or use the 2nd `callback` argument: + +`middleware/stats.js` +```js +import axios from 'axios' + +export default function ({ route }) { + return axios.post('http://my-stats-api.com', { + url: route.fullPath + }) +} +``` + +Then, in your `nuxt.config.js`, layout or page, use the `middleware` key: + +`nuxt.config.js` +```js +module.exports = { + router: { + middleware: 'stats' + } +} +``` + +The `stats` middleware will be called for every route changes. + +To see a real-life example using the middleware, please see [example-auth0](https://github.com/nuxt/example-auth0) on GitHub. diff --git a/ja/guide/views.md b/ja/guide/views.md new file mode 100644 index 000000000..a65de291f --- /dev/null +++ b/ja/guide/views.md @@ -0,0 +1,165 @@ +--- +title: Views +description: The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Pages, layouts and HTML Head) +--- + +> The Views section describes all you need to configure data and views for a specific route in your Nuxt.js application. (Pages, layouts and HTML Head) + +## Pages + +Every Page component is a Vue component, but Nuxt.js adds special keys to make the development of your universal application the easiest way possible. + +```html +<template> + <h1 class="red">Hello {{ name }}!</h1> +</template> + +<script> +export default { + data (context) { + // called every time before loading the component + return { name: 'World' } + }, + fetch () { + // The fetch method is used to fill the store before rendering the page + }, + head () { + // Set Meta Tags for this Page + }, + // and more functionality to discover + ... +} +</script> + +<style> +.red { + color: red; +} +</style> +``` + + +| Attribute | Description | +|-----------|-------------| +| data | The most important key, it has the same purpose as [Vue data](https://vuejs.org/v2/api/#Options-Data) but it can be asynchronous and receives the context as argument, please read the [async data documentation](/guide/async-data) to learn how it works. | +| fetch | Used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. See the [API Pages fetch documentation](/api/pages-fetch). | +| head | Set specific Meta Tags for the current page, see [API Pages head documentation](/api/pages-head). | +| layout | Specify a layout defined in the `layouts` directory, see [API Pages layouts documentation](/api/pages-layout). | +| transition | Set a specific transition for the page, see [API Pages transition](/api/pages-transition). | +| scrollToTop | Boolean, by default: `false`. Specify if you want the page to scroll to the top before rendering the page, it's used for [nested routes](/guide/routing#nested-routes). | +| validate | Validator function for a [dynamic route](/guide/routing#dynamic-routes). | +| middleware | Set a middleware for this page, the middleware will be called before rendering the page, see [routes middleware](/guide/routing#middleware). | + +More information about the pages properties usage: [API Pages](/api) + +## Layouts + +Nuxt.js lets you extend the main layout or create custom layouts by adding them in the `layouts` directory. + +### Default Layout + +You can extend the main layout by adding a `layouts/default.vue` file. + +*Make sure to add the `<nuxt>` component when creating a layout to display the page component.* + +The default layout source code is: +```html +<template> + <nuxt/> +</template> +``` + +### Error Page + +You can customize the error page by adding a `layouts/error.vue` file. + +This layout is special since you should not include `<nuxt/>` inside its template. You must see this layout as a component displayed when an error occurs (404, 500, etc). + +The default error page source code is [available on Github](https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue). + +Example of a custom error page in `layouts/error.vue`: +```html +<template> + <div class="container"> + <h1 v-if="error.statusCode === 404">Page not found</h1> + <h1 v-else>An error occurred</h1> + <nuxt-link to="/">Home page</nuxt-link> + </div> +</template> + +<script> +export default { + props: ['error'] +} +</script> +``` + +### Custom Layout + +Every file (*first level*) in the `layouts` directory will create a custom layout accessible with the `layout` property in the page component. + +*Make sure to add the `<nuxt/>` component when creating a layout to display the page component.* + +Example of `layouts/blog.vue`: +```html +<template> + <div> + <div>My blog navigation bar here</div> + <nuxt/> + </div> +</template> +``` + +And then in `pages/posts.vue`, you can tell Nuxt.js to use your custom layout: +```html +<script> +export default { + layout: 'blog' +} +</script> +``` + +More information about the layout property: [API Pages layout](/api/pages-layout) + +Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action. + +## HTML Head + +Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. + +Nuxt.js configures `vue-meta` with these options: +```js +{ + keyName: 'head', // the component option name that vue-meta looks for meta info on. + attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes + ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered + tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag +} +``` + +### Default Meta Tags + +Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: + +Example of a custom viewport with a custom Google font: +```js +head: { + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] +} +``` + +To know the list of options you can give to `head`, take a look at [vue-meta documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties). + +More information about the head method: [API Configuration head](/api/configuration-head) + +### Custom Meta Tags for a Page + +More information about the head method: [API Pages head](/api/pages-head) + +<p class="Alert">To avoid any duplication when used in child component, please give a unique identifier with the `hid` key, please [read more about it](https://github.com/declandewet/vue-meta#lists-of-tags).</p> diff --git a/ja/guide/vuex-store.md b/ja/guide/vuex-store.md new file mode 100644 index 000000000..6e87670e0 --- /dev/null +++ b/ja/guide/vuex-store.md @@ -0,0 +1,189 @@ +--- +title: Vuex Store +description: Using a store to manage the state is important for every big application, that's why nuxt.js implement Vuex in its core. +--- + +> Using a store to manage the state is important to every big application, that's why nuxt.js implement [vuex](https://github.com/vuejs/vuex) in its core. + +## Activate the Store + +Nuxt.js will look for the `store` directory, if it exists, it will: + +1. Import Vuex +2. Add `vuex` module in the vendors bundle +3. Add the `store` option to the root `Vue` instance. + +Nuxt.js lets you have **2 modes of store**, choose the one you prefer: +- **Classic:** `store/index.js` returns a store instance +- **Modules:** every `.js` file inside the `store` directory is transformed as a [namespaced module](http://vuex.vuejs.org/en/modules.html) (`index` being the root module) + +## Classic mode + +To activate the store with the classic mode, we create the `store/index.js` file and export the store instance: + +```js +import Vuex from 'vuex' + +const store = new Vuex.Store({ + state: { + counter: 0 + }, + mutations: { + increment (state) { + state.counter++ + } + } +}) + +export default store +``` + +> We don't need to install `vuex` since it's shipped with nuxt.js + +We can now use `this.$store` inside our components: + +```html +<template> + <button @click="$store.commit('increment')">{{ $store.state.counter }}</button> +</template> +``` + +## Modules mode + +> Nuxt.js lets you have a `store` directory with every file corresponding to a module. + +If you want this option, export the state, mutations and actions in `store/index.js` instead of a store instance: + +```js +export const state = { + counter: 0 +} + +export const mutations = { + increment (state) { + state.counter++ + } +} +``` + +Then, you can have a `store/todos.js` file: +```js +export const state = { + list: [] +} + +export const mutations = { + add (state, text) { + state.list.push({ + text: text, + done: false + }) + }, + delete (state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle (state, todo) { + todo.done = !todo.done + } +} +``` + +The store will be as such: +```js +new Vuex.Store({ + state: { counter: 0 }, + mutations: { + increment (state) { + state.counter++ + } + }, + modules: { + todos: { + state: { + list: [] + }, + mutations: { + add (state, { text }) { + state.list.push({ + text, + done: false + }) + }, + delete (state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle (state, { todo }) { + todo.done = !todo.done + } + } + } + } +}) +``` + +And in your `pages/todos.vue`, using the `todos` module: + +```html +<template> + <ul> + <li v-for="todo in todos"> + <input type="checkbox" :checked="todo.done" @change="toggle(todo)"> + <span :class="{ done: todo.done }">{{ todo.text }}</span> + </li> + <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li> + </ul> +</template> + +<script> +import { mapMutations } from 'vuex' + +export default { + computed: { + todos () { return this.$store.state.todos.list } + }, + methods: { + addTodo (e) { + this.$store.commit('todos/add', e.target.value) + e.target.value = '' + }, + ...mapMutations({ + toggle: 'todos/toggle' + }) + } +} +</script> + +<style> +.done { + text-decoration: line-through; +} +</style> +``` + +<div class="Alert">You can also have modules by exporting a store instance, you will have to add them manually on your store.</div> + +## The fetch Method + +> The fetch method is used to fill the store before rendering the page, it's like the data method except it doesn't set the component data. + +More information about the fetch method: [API Pages fetch](/api/pages-fetch) + +## The nuxtServerInit Action + +If the action `nuxtServerInit` is defined in the store, nuxt.js will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side. + +For example, let's say we have sessions on the server-side and we can access the connected user trough `req.session.user`. To give the authenticated user to our store, we update our `store/index.js` to the following: + +```js +actions: { + nuxtServerInit ({ commit }, { req }) { + if (req.session.user) { + commit('user', req.session.user) + } + } +} +``` + +> If you are using the _Modules_ mode of the Vuex store, only the primary module (in `store/index.js`) will receive this action. You'll need to chain your module actions from there. + +The context is given to `nuxtServerInit` as the 2nd argument, it is the same as the `data` or `fetch` method except that `context.redirect()` and `context.error()` are omitted. diff --git a/ja/lang.json b/ja/lang.json new file mode 100644 index 000000000..013f5bf5a --- /dev/null +++ b/ja/lang.json @@ -0,0 +1,50 @@ +{ + "iso": "en", + "links": { + "api": "API", + "blog": "Blog", + "chat": "Chat", + "documentation": "Documentation", + "download": "Download", + "examples": "Examples", + "ecosystem": "Ecosystem", + "faq": "FAQ", + "get_started": "get started", + "github": "Github", + "guide": "Guide", + "homepage": "Home page", + "live_demo": "Live Demo", + "live_edit": "Live Edit", + "twitter": "Twitter", + "vuejs": "Vue.js", + "vue_jobs": "Vue Jobs" + }, + "text": { + "an_error_occured": "An error occured", + "api_page_not_found": "API page not found", + "example_file": "Example Files", + "please_wait": "Please wait...", + "please_define_title": "Please define a title in the front matter", + "please_define_description": "Please define a description in the front matter", + "search": "Search", + "version": "Version" + }, + "homepage": { + "title": "Universal Vue.js Applications", + "meta": { + "title": "Nuxt.js - Universal Vue.js Applications", + "description": "Nuxt.js is a minimal framework for creating Vue.js applications with server side rendering, code-splitting, hot-reloading, static generation and more!" + } + }, + "footer": { + "authors": "Made by Chopin Brothers" + }, + "guide": { + "release_notes": "Release Notes", + "contribute": "Caught a mistake or want to contribute to the documentation?", + "edit_on_github": "Edit this page on Github!" + }, + "examples": { + "source_code": "Source Code" + } +}