From 0baf127e4e10b7c483e6292f24cdc92b958e645d Mon Sep 17 00:00:00 2001 From: INOUE Takuya Date: Sun, 19 Feb 2017 18:54:38 +0900 Subject: [PATCH 001/129] ja initialized as a copy of en --- ja/api/components-nuxt-child.md | 48 +++++ ja/api/components-nuxt-link.md | 23 ++ ja/api/components-nuxt.md | 22 ++ ja/api/configuration-build.md | 248 +++++++++++++++++++++ ja/api/configuration-cache.md | 33 +++ ja/api/configuration-css.md | 32 +++ ja/api/configuration-dev.md | 62 ++++++ ja/api/configuration-env.md | 41 ++++ ja/api/configuration-generate.md | 125 +++++++++++ ja/api/configuration-head.md | 27 +++ ja/api/configuration-loading.md | 109 ++++++++++ ja/api/configuration-plugins.md | 32 +++ ja/api/configuration-rootdir.md | 17 ++ ja/api/configuration-router.md | 149 +++++++++++++ ja/api/configuration-srcdir.md | 32 +++ ja/api/configuration-transition.md | 36 ++++ ja/api/index.md | 41 ++++ ja/api/menu.json | 95 ++++++++ ja/api/nuxt-render-and-get-window.md | 35 +++ ja/api/nuxt-render-route.md | 43 ++++ ja/api/nuxt-render.md | 45 ++++ ja/api/nuxt.md | 38 ++++ ja/api/pages-fetch.md | 49 +++++ ja/api/pages-head.md | 40 ++++ ja/api/pages-layout.md | 24 +++ ja/api/pages-middleware.md | 38 ++++ ja/api/pages-scrolltotop.md | 26 +++ ja/api/pages-transition.md | 105 +++++++++ ja/api/pages-validate.md | 30 +++ ja/examples/async-data.md | 6 + ja/examples/auth-routes.md | 210 ++++++++++++++++++ ja/examples/cached-components.md | 6 + ja/examples/custom-loading.md | 7 + ja/examples/custom-routes.md | 7 + ja/examples/global-css.md | 7 + ja/examples/hello-world.md | 9 + ja/examples/i18n.md | 7 + ja/examples/layouts.md | 8 + ja/examples/menu.json | 33 +++ ja/examples/middleware.md | 7 + ja/examples/nested-routes.md | 7 + ja/examples/plugins.md | 7 + ja/examples/routes-transitions.md | 8 + ja/examples/seo-html-head.md | 7 + ja/examples/testing.md | 6 + ja/examples/vuex-store.md | 7 + ja/faq/async-data-components.md | 14 ++ ja/faq/css-flash.md | 12 ++ ja/faq/duplicated-meta-tags.md | 42 ++++ ja/faq/extend-webpack.md | 18 ++ ja/faq/external-resources.md | 46 ++++ ja/faq/github-pages.md | 44 ++++ ja/faq/google-analytics.md | 60 ++++++ ja/faq/heroku-deployment.md | 40 ++++ ja/faq/host-port.md | 26 +++ ja/faq/jsx.md | 43 ++++ ja/faq/menu.json | 33 +++ ja/faq/now-deployment.md | 25 +++ ja/faq/postcss-plugins.md | 20 ++ ja/faq/pre-processors.md | 31 +++ ja/faq/surge-deployment.md | 33 +++ ja/faq/webpack-plugins.md | 24 +++ ja/faq/window-document-undefined.md | 23 ++ ja/guide/assets.md | 98 +++++++++ ja/guide/async-data.md | 114 ++++++++++ ja/guide/commands.md | 84 ++++++++ ja/guide/configuration.md | 84 ++++++++ ja/guide/contribution-guide.md | 19 ++ ja/guide/development-tools.md | 154 +++++++++++++ ja/guide/directory-structure.md | 94 ++++++++ ja/guide/index.md | 102 +++++++++ ja/guide/installation.md | 92 ++++++++ ja/guide/menu.json | 107 +++++++++ ja/guide/plugins.md | 98 +++++++++ ja/guide/routing.md | 311 +++++++++++++++++++++++++++ ja/guide/views.md | 165 ++++++++++++++ ja/guide/vuex-store.md | 189 ++++++++++++++++ ja/lang.json | 50 +++++ 78 files changed, 4289 insertions(+) create mode 100644 ja/api/components-nuxt-child.md create mode 100644 ja/api/components-nuxt-link.md create mode 100644 ja/api/components-nuxt.md create mode 100644 ja/api/configuration-build.md create mode 100644 ja/api/configuration-cache.md create mode 100644 ja/api/configuration-css.md create mode 100644 ja/api/configuration-dev.md create mode 100644 ja/api/configuration-env.md create mode 100644 ja/api/configuration-generate.md create mode 100644 ja/api/configuration-head.md create mode 100644 ja/api/configuration-loading.md create mode 100644 ja/api/configuration-plugins.md create mode 100644 ja/api/configuration-rootdir.md create mode 100644 ja/api/configuration-router.md create mode 100644 ja/api/configuration-srcdir.md create mode 100644 ja/api/configuration-transition.md create mode 100644 ja/api/index.md create mode 100644 ja/api/menu.json create mode 100644 ja/api/nuxt-render-and-get-window.md create mode 100644 ja/api/nuxt-render-route.md create mode 100644 ja/api/nuxt-render.md create mode 100644 ja/api/nuxt.md create mode 100644 ja/api/pages-fetch.md create mode 100644 ja/api/pages-head.md create mode 100644 ja/api/pages-layout.md create mode 100644 ja/api/pages-middleware.md create mode 100644 ja/api/pages-scrolltotop.md create mode 100644 ja/api/pages-transition.md create mode 100644 ja/api/pages-validate.md create mode 100644 ja/examples/async-data.md create mode 100644 ja/examples/auth-routes.md create mode 100644 ja/examples/cached-components.md create mode 100644 ja/examples/custom-loading.md create mode 100644 ja/examples/custom-routes.md create mode 100644 ja/examples/global-css.md create mode 100644 ja/examples/hello-world.md create mode 100644 ja/examples/i18n.md create mode 100644 ja/examples/layouts.md create mode 100644 ja/examples/menu.json create mode 100644 ja/examples/middleware.md create mode 100644 ja/examples/nested-routes.md create mode 100644 ja/examples/plugins.md create mode 100644 ja/examples/routes-transitions.md create mode 100644 ja/examples/seo-html-head.md create mode 100644 ja/examples/testing.md create mode 100644 ja/examples/vuex-store.md create mode 100644 ja/faq/async-data-components.md create mode 100644 ja/faq/css-flash.md create mode 100644 ja/faq/duplicated-meta-tags.md create mode 100644 ja/faq/extend-webpack.md create mode 100644 ja/faq/external-resources.md create mode 100644 ja/faq/github-pages.md create mode 100644 ja/faq/google-analytics.md create mode 100644 ja/faq/heroku-deployment.md create mode 100644 ja/faq/host-port.md create mode 100644 ja/faq/jsx.md create mode 100644 ja/faq/menu.json create mode 100644 ja/faq/now-deployment.md create mode 100644 ja/faq/postcss-plugins.md create mode 100644 ja/faq/pre-processors.md create mode 100644 ja/faq/surge-deployment.md create mode 100644 ja/faq/webpack-plugins.md create mode 100644 ja/faq/window-document-undefined.md create mode 100644 ja/guide/assets.md create mode 100644 ja/guide/async-data.md create mode 100644 ja/guide/commands.md create mode 100644 ja/guide/configuration.md create mode 100644 ja/guide/contribution-guide.md create mode 100644 ja/guide/development-tools.md create mode 100644 ja/guide/directory-structure.md create mode 100644 ja/guide/index.md create mode 100644 ja/guide/installation.md create mode 100644 ja/guide/menu.json create mode 100644 ja/guide/plugins.md create mode 100644 ja/guide/routing.md create mode 100644 ja/guide/views.md create mode 100644 ja/guide/vuex-store.md create mode 100644 ja/lang.json 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" + } +} From ab4a0d652fc46ee93a4aea172dca9b653c139357 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sun, 19 Feb 2017 22:35:44 +0900 Subject: [PATCH 002/129] Translate ja/lang.json --- ja/lang.json | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/ja/lang.json b/ja/lang.json index 013f5bf5a..d7f32a139 100644 --- a/ja/lang.json +++ b/ja/lang.json @@ -1,50 +1,50 @@ { - "iso": "en", + "iso": "ja", "links": { "api": "API", - "blog": "Blog", - "chat": "Chat", - "documentation": "Documentation", - "download": "Download", - "examples": "Examples", - "ecosystem": "Ecosystem", + "blog": "ブログ", + "chat": "チャット", + "documentation": "ドキュメント", + "download": "ダウンロード", + "examples": "例", + "ecosystem": "エコシステム", "faq": "FAQ", - "get_started": "get started", + "get_started": "はじめる", "github": "Github", "guide": "Guide", - "homepage": "Home page", - "live_demo": "Live Demo", - "live_edit": "Live Edit", + "homepage": "ホームページ", + "live_demo": "ライブデモ", + "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" + "an_error_occured": "エラーが発生しました", + "api_page_not_found": "API ページが見つかりません", + "example_file": "サンプルファイル", + "please_wait": "お待ちください...", + "please_define_title": "Frontmatter 内の title を定義してください", + "please_define_description": "Frontmatter 内の description を定義してください", + "search": "検索", + "version": "バージョン" }, "homepage": { - "title": "Universal Vue.js Applications", + "title": "ユニバーサル Vue.js アプリケーション", "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!" + "title": "Nuxt.js - ユニバーサル Vue.js アプリケーション", + "description": "Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的なファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです！" } }, "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!" + "release_notes": "リリースノート", + "contribute": "間違いを見つけた、またはドキュメントに貢献したいですか？", + "edit_on_github": "GitHub でこのページを編集する" }, "examples": { - "source_code": "Source Code" + "source_code": "ソースコード" } } From f1abd2a9b4c08ecc5cf81245947e16ff68038067 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sun, 19 Feb 2017 22:36:22 +0900 Subject: [PATCH 003/129] Translate ja/guide/index.md --- ja/guide/index.md | 186 +++++++++++++++++++++++++++++++++------------- 1 file changed, 136 insertions(+), 50 deletions(-) diff --git a/ja/guide/index.md b/ja/guide/index.md index 04f7c0057..c2967d12b 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -1,75 +1,138 @@ --- -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." +title: はじめに +description: "2016年10月25日 zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。そしてその発表から数時間後、Next.js と同じやり方で Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。" --- -> 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. +<!-- 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." --> -## What is Nuxt.js ? +<!-- \> 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. --> -Nuxt.js is a framework for creating Universal Vue.js Applications. +> 2016年10月25日、[zeit.co](https://zeit.co/) のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク [Next.js](https://zeit.co/blog/next) を発表しました。そしてその発表からわずか数時間後、Next.js と同じやり方で [Vue.js](https://vuejs.org) をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち **Nuxt.js** の誕生です。 -Its main scope is **UI rendering** while abstracting away the client/server distribution. +<!-- ## What is Nuxt.js ? --> -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 とは何ですか？ -Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. +<!-- Nuxt.js is a framework for creating Universal Vue.js Applications. --> -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. +Next.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。 -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. +<!-- Its main scope is **UI rendering** while abstracting away the client/server distribution. --> -## How it Works +クライアントサイドとサーバーサイドのディストリビューションを抽象化する間の **UI レンダリング** に焦点を当てています。 + +<!-- 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. --> + +私たちのゴールは、あるプロジェクトの基礎として利用したり、あるいは既に進行中の Node.js ベースのプロジェクトに追加するために十分に柔軟なフレームワークを作成することです。 + +<!-- Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. --> + +Nuxt.js は **サーバーサイドレンダリング** する Vue.js アプリケーションの開発をもっと楽しくするために必要な全ての設定をあらかじめ用意しています。 + +<!-- 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. --> + +それに加えて、*nuxt genrate* と呼ばれる別の開発オプションも提供します。これは **静的に生成された** Vue.js アプリケーションを構築するためのものです。私たちはこのオプションが、マイクロサービスでウェブアプリケーションを開発するための次の大きな一歩になり得ると信じています。 + +<!-- 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. --> + +Nuxt.js はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けするたくさんの機能を備えています。例えば、同期でのデータをやり取りや、ミドルウェアやレイアウトなどです。 + +<!-- ## 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: +<!-- Nuxt.js includes the following to create a rich web application development: --> + +Nuxt.js はリッチなウェブアプリケーションを構築するために下記のものを含んでいます: + - [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)) +- [Vuex](https://github.com/vuejs/vuex)（[store option](/guide/vuex-store) を利用しているときに限ります） - [Vue-Meta](https://github.com/declandewet/vue-meta) -A total of only **28kb min+gzip** (31kb with vuex). +<!-- A total of only **28kb min+gzip** (31kb with vuex). --> + +すべて合わせてもわずか **28kb min+gzip** です（Vuex 利用時は 31kb） + +<!-- 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. --> + +また、バンドルやコード分割及びミニファイするために [Webpack](https://github.com/webpack/webpack) を [vue-Loader](https://github.com/vuejs/vue-loader) と [babel-loader](https://github.com/babel/babel-loader) と合わせて使います。 -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 --> -## 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 +<!-- - 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 +- Vue ファイルで記述できること +- コードの自動分割 +- サーバーサイドレンダリング +- 非同期データを伴うパワフルなルーティング +- 静的なファイル配信 +- ES6/ES7 のトランスパイレーション +- JS と CSS のバンドル及びミニファイ +- Head タグ（訳注: メタタグ）の管理 +- 開発モードにおけるホットリローディング +- SASS, LESS, Stylus などのプリプロセッサのサポート -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>`: +<!-- ## 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-link>` を通して遷移したときに Nuxt.js によって何が呼ばれるかを表しています。 ![nuxt-schema](/nuxt-schema.png) -## Server Rendered +<!-- ## Server Rendered --> + +## サーバーサイドレンダリング -You can use nuxt.js as a framework to handle all the UI rendering of your project. +<!-- 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. +Nuxt.js をプロジェクトの UI レンダリング全体を担うフレームワークとして使うことができます。 -Take a look at [the commands](/guide/commands) to learn more about it. +<!-- When launching `nuxt`, it will start a development server with hot-reloading and vue-server-renderer configured to automatically server-render your application. --> -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. +`nuxt` コマンドを実行すると、ホットリローディング及び自動的にアプリケーションをサーバーサイドレンダリングするよう設定された vue-server-render を備えた開発サーバーが起動されます。 -## Static Generated +<!-- Take a look at [the commands](/guide/commands) to learn more about it. --> -The big innovation of nuxt.js comes here: `nuxt generate` +コマンドについてより深く学ぶには [コマンド](/guide/commands) を参照してください。 -When building your application it will generate the HTML of every of your routes to store it in a file. +<!-- 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. --> -Example: +既にサーバーがあるなら Nuxt.js をミドルウェアとして追加ことができます。ユニバーサルなウェブアプリケーションを開発するために Nuxt.js を利用するにあたって何も制限はありません。[Using Nuxt.js Programmatically](/api/nuxt) ガイドを見てみてください。 + +<!-- ## Static Generated --> + +## 静的な生成 + +<!-- The big innovation of nuxt.js comes here: `nuxt generate` --> + +`nuxt generate` という Nuxt.js の大きなイノベーションがやってきます。 + +<!-- When building your application it will generate the HTML of every of your routes to store it in a file. --> + +`nuxt generate` はアプリケーションをビルドする際に、すべてのルーティングの状態をファイル中に保存した HTML を生成します。 + +<!-- Example: --> + +例: ```bash -| pages/ @@ -77,7 +140,10 @@ Example: ----| index.vue ``` -Will generate: +<!-- Will generate: --> + +下記を生成します: + ``` -| dist/ ----| about/ @@ -85,18 +151,38 @@ Will generate: ----| index.html ``` -This way, you can host your generated web application on any static hosting! +<!-- 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: --> + +最も良い例はこのウェブサイト自体です。このサイトは生成され GitHub Pages でホストされています: + +<!-- - [Source code](https://github.com/nuxt/nuxtjs.org) --> +<!-- - [Generated code](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) --> + +- [ソースコード](https://github.com/nuxt/nuxtjs.org) --> +- [生成されたコード](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: --> + +私たちは [docs リポジトリ](https://github.com/nuxt/docs) を更新するたびに毎回手動でアプリケーションを生成したくなかったので、AWS Lambda funtion から生成機能を実行しています: + +<!-- 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 --> + +1. [nuxtjs.org リポジトリ](https://github.com/nuxt/nuxtjs.org) をクローンする +2. `npm install` で依存しているライブラリをインストールする +3. `nuxt generate` を実行する +4. `dist` フォルダーを `gh-pages` ブランチにプッシュする -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 now have a **Serverless Static Generated Web Application** :) --> -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! --> -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! +さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーで複数のインスタンス及びキャッシュを持つ必要がなくなるのです！ From bf49efe47fdc287d7023ce1d249ca30c6dc79f19 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Feb 2017 00:02:58 +0900 Subject: [PATCH 004/129] Translate ja/guide/contribution-guide.md --- ja/guide/contribution-guide.md | 38 +++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/ja/guide/contribution-guide.md b/ja/guide/contribution-guide.md index 556b9f490..976473294 100644 --- a/ja/guide/contribution-guide.md +++ b/ja/guide/contribution-guide.md @@ -1,19 +1,37 @@ --- -title: Contribution Guide -description: Any contribution to Nuxt.js is more than welcome! +title: 貢献ガイド +description: "Nuxt.js へのどんな貢献も大歓迎します！" --- -> Any contribution to Nuxt.js is more than welcome! +<!-- title: Contribution Guide --> +<!-- description: Any contribution to Nuxt.js is more than welcome! --> -## Reporting Issues +<!-- \> Any contribution to Nuxt.js is more than welcome! --> -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 +Nuxt.js へのどんな貢献も大歓迎します！ -## Pull Requests +<!-- ## Reporting Issues --> -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 +<!-- 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 --> -- 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 +このプロジェクトに貢献する方法のひとつは、問題に遭遇したときに詳細なレポートを送ることです。私たちは上手くまとめられたバグレポートとそれを送ってくださった方にいつも感謝しています！問題を報告する前に、ドキュメントを注意深く読み、また、遭遇した問題が既に 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. --> + +たとえそれが単にタイポの修正であっても、ぜひプルリクエストを送ってください。どんな重要な改善であっても、誰かが手を動かし始める前に [GitHub issue](https://github.com/nuxt/nuxt.js/issues) に記載してください。 + +<!-- ### 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 --> + +- 不具合の修正であればブランチ名は `fix-XXX` にして、XXX には issue 番号または修正するものの名前を入れてください +- 機能のプルリクエストであればブランチ名は `feature-XXX` にして、XXX にはその機能に関連する issue 番号を入れてください From 1e8e5a41bd7cfe54353a4470a16998e043244dd4 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Feb 2017 00:38:24 +0900 Subject: [PATCH 005/129] Translage ja/guide/installation.md --- ja/guide/installation.md | 114 ++++++++++++++++++++++++++++++--------- 1 file changed, 88 insertions(+), 26 deletions(-) diff --git a/ja/guide/installation.md b/ja/guide/installation.md index f20967e37..3eb79558f 100644 --- a/ja/guide/installation.md +++ b/ja/guide/installation.md @@ -1,53 +1,87 @@ --- -title: Installation +title: インストール 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. +<!-- title: Installation --> +<!-- description: Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. --> -## Using Nuxt.js starter template +<!-- \> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. --> -To start quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt/starter). +Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要なものは `nuxt` だけです。 -[Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli: +<!-- ## Using Nuxt.js starter template --> + +## Nuxt.js を使ったスターターテンプレート + +<!-- To start quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt/starter). --> + +素早くスタートできるようにするため、Nuxt.js チームは [スターターテンプレート](https://github.com/nuxt/starter) を作りました。 + +<!-- [Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli: --> + +[ZIP をダウンロード](https://github.com/nuxt/starter/archive/source.zip) するか、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` +<!-- \> 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: +> もし [vue-cli](https://github.com/vuejs/vue-cli) をインストールしていなければ、`npm install -g vue-cli` でインストールしてください。 + +<!-- then install the dependencies: --> + +それから依存するライブラリをインストールしてください: ```bash $ cd <project-name> $ npm install ``` -and launch the project with: +<!-- 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> +<!-- The application is now running on http://localhost:3000 --> -To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). +するとアプリケーションは http://localhost:3000 で動きます。 -## Starting from scratch +<!-- <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> --> -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: +<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません</p> + +<!-- To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). --> + +プロジェクトのディレクトリ構造についてより深く理解するには [ディレクトリ構造のドキュメント](/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: --> + +Nuxt.js アプリケーションをスクラッチから作ることもとても簡単で、必要なものは *1つのファイルと 1つのディレクトリ* だけです。アプリケーションで動かす空のディレクトリを作りましょう: ```bash $ mkdir <project-name> $ cd <project-name> ``` -*Info: replace project-name by the name of the project.* +<!-- *Info: replace project-name by the name of the project.* --> + +*メモ: `<project-name>` の箇所は置き換えてください。* ### The package.json -The project needs a `package.json` file to specify how to start `nuxt`: +<!-- The project needs a `package.json` file to specify how to start `nuxt`: --> + +`nuxt` をどのように起動するかを指定するために `package.json` ファイルが必要です。 + ```json { "name": "my-app", @@ -56,37 +90,65 @@ The project needs a `package.json` file to specify how to start `nuxt`: } } ``` -`scripts` will launch Nuxt.js via `npm run dev`. -### Installing `nuxt` +<!-- `scripts` will launch Nuxt.js via `npm run dev`. --> + +`npm run dev` すると `scripts` が Nuxt.js を起動させます。 + +<!-- ### Installing `nuxt` --> + +### `nuxt` のインストール + +<!-- Once the `package.json` has been created, add `nuxt` to the project via NPM: --> + +一旦 `package.json` が作成されると、NPM によってプロジェクトに `nuxt` が追加されます: -Once the `package.json` has been created, add `nuxt` to the project via NPM: ```bash npm install --save nuxt ``` -### The `pages` directory +<!-- ### The `pages` directory --> + +### `pages` ディレクトリ + +<!-- Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application. --> + +Nuxt.js は `pages` ディレクトリ内の全ての `*.vue` ファイルを、ファイルごとにアプリケーションのひとつのルートとして変換します。 + +<!-- Create the `pages` directory: --> -Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application. +`pages` ディレクトリを作ります: -Create the `pages` directory: ```bash $ mkdir pages ``` -then create the first page in `pages/index.vue`: +<!-- then create the first page in `pages/index.vue`: --> + +それから最初のページを `pages/index.vue` に作ります: + ```html <template> <h1>Hello world!</h1> </template> ``` -and launch the project with: +<!-- 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> +<!-- The application is now running on http://localhost:3000 --> + +すると、アプリケーションは 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> --> + +<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません</p> + +<!-- To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). --> -To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). +プロジェクトのディレクトリ構造についてより深く理解するには [ディレクトリ構造のドキュメント](/guide/directory-structure) を参照してください。 From 11986064d758d4108c092d90a6283f3c77e55966 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Feb 2017 20:45:41 +0900 Subject: [PATCH 006/129] Translate ja/guide/directory-structure.md --- ja/guide/directory-structure.md | 177 ++++++++++++++++++++++++-------- 1 file changed, 134 insertions(+), 43 deletions(-) diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md index e3996480e..f648e0365 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -1,83 +1,167 @@ --- -title: Directory Structure -description: The default Nuxt.js application structure is intended to provide a great starting point for both large and small applications. +title: ディレクトリ構造 +description: デフォルトの Nuxt.js アプリケーションの構造は、小規模のアプリケーションと大規模のアプリケーションのどちらにも適しています。 --- -> 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. +<!-- title: Directory Structure --> +<!-- description: The default Nuxt.js application structure is intended to provide a great starting point for both large and small applications. --> -## Directories +<!-- \> 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. --> -### The Assets Directory +> デフォルトの Nuxt.js アプリケーションの構造は、小規模のアプリケーションと大規模のアプリケーションのどちらにも適しています。もちろん、好きなように構成することもできます。 -The `assets` directory contains your un-compiled assets such as LESS, SASS, or JavaScript. +<!-- ## Directories --> -[More documentation about Assets integration](/guide/assets) +## ディレクトリ -### The Components Directory +<!-- ### The Assets Directory --> -The `components` directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components. +### アセットディレクトリ -### The Layouts Directory +<!-- The `assets` directory contains your un-compiled assets such as LESS, SASS, or JavaScript. --> -The `layouts` directory contains your Application Layouts. +`assets` ディレクトリには LESS や SASS、JavaScript のようなコンパイルされていないファイルを入れます。 -_This directory can not be renamed._ +<!-- [More documentation about Assets integration](/guide/assets) --> -[More documentation about Layouts integration](/guide/views#layouts) +アセットファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/assets) を参照してください。 -### The Middleware Directory +<!-- ### The Components Directory --> + +### コンポーネントディレクトリ + +<!-- The `components` directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components. --> + +`components` ディレクトリには Vue.js のコンポーネントファイルを入れます。Nuxt.js はそれらのコンポーネントの data メソッドに過給しません（訳に自信なし。原文は Nuxt.js doesn't supercharge the data method on these components.） + +<!-- ### The Layouts Directory --> + +### レイアウトディレクトリ + +<!-- The `layouts` directory contains your Application Layouts. --> + +`layouts` ディレクトリにはアプリケーションのレイアウトファイルを入れます。 + +<!-- _This directory can not be renamed._ --> + +_このディレクトリ名は変更できません。_ + +<!-- [More documentation about Layouts integration](/guide/views#layouts) --> + +レイアウトファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/views#layouts) を参照してください。 + +<!-- ### The Middleware Directory --> + +### ミドルウェアディレクトリ _Coming soon_ -### The Pages Directory +<!-- ### 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. --> + +`pages` ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内の全ての `.vue` ファイルを読み込み、アプリケーションのルーターを作成します。 + +<!-- _This directory can not be renamed._ --> + +_このディレクトリ名は変更できません。_ + +<!-- [More documentation about Pages integration](/guide/views) --> + +ページファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/views) を参照してください。 -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. +<!-- ### The Plugins Directory --> -_This directory can not be renamed._ +### プラグインディレクトリ -[More documentation about Pages integration](/guide/views) +<!-- The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. --> -### The Plugins Directory +`plugins` ディレクトリには、ルートの vue.js アプリケーションをインスタンス化する前に実行したい Javascript プラグインを入れます。 -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) --> -[More documentation about Plugins integration](/guide/plugins) +プラグインの統合についてより深く理解するには [こちらのドキュメント](/guide/plugins) を参照してください。 -### The Static Directory +<!-- ### 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 +<!-- The `static` directory contains your static files. Each files inside this directory is mapped to /. --> -_This directory can not be renamed._ +`static` ディレクトリには静的なファイルを入れます。このディレクトリ内のファイルはいずれも `/` に配置されます。 -[More documentation about Static integration](/guide/assets#static) +<!-- **Example:** /static/robots.txt is mapped as /robots.txt --> -### The Store Directory +**例:** /static/robots.txt は /robots.txt に配置されます。 -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._ --> -_This directory can not be renamed._ +_このディレクトリ名は変更できません。_ -[More documentation about Store integration](/guide/vuex-store) +<!-- [More documentation about Static integration](/guide/assets#static) --> -### The nuxt.config.js File +静的なファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/assets#static) を参照してください。 -The `nuxt.config.js` file contains your Nuxt.js custom configuration. +<!-- ### The Store Directory --> -_This file can not be renamed._ +### ストアディレクトリ -[More documentation about nuxt.config.js integration](/guide/configuration) +<!-- 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. --> -### The package.json File +`store` ディレクトリには [Vuex Store](http://vuex.vuejs.org) のファイルを入れます。Vuex Store は Nuxt.js フレームワークではオプションとして実装されています。このディレクトリ内に `index.js` ファイルを作成すると、Nuxt.js フレームワーク内でこのオプションが自動的に有効になります。 -The `package.json` file contains your Application dependencies and scripts. +<!-- _This directory can not be renamed._ --> -_This file can not be renamed._ +_このディレクトリ名は変更できません。_ -## Aliases +<!-- [More documentation about Store integration](/guide/vuex-store) --> -| Alias | Directory | +ストアファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/vuex-store) を参照してください。 + +<!-- ### The nuxt.config.js File --> + +### nuxt.config.js ファイル + +<!-- The `nuxt.config.js` file contains your Nuxt.js custom configuration. --> + +`nuxt.config.js` ファイルには Nuxt.js のカスタム設定を記述します。 + +<!-- _This file can not be renamed._ --> + +_このファイル名は変更できません。_ + +<!-- [More documentation about nuxt.config.js integration](/guide/configuration) --> + +nuxt.config.js についてより深く理解するには [こちらのドキュメント](/guide/configuration) を参照してください。 + +<!-- ### The package.json File --> + +### package.json ファイル + +<!-- The `package.json` file contains your Application dependencies and scripts. --> + +`package.json` ファイルにはアプリケーションが依存するライブラリやスクリプトを記述します。 + +<!-- _This file can not be renamed._ --> + +_このファイル名は変更できません。_ + +<!-- ## Aliases --> + +## エイリアス（別名） + +<!-- | Alias | Directory | --> +<!-- |-----|------| --> +<!-- | ~ | / | --> +<!-- | ~assets | /assets | --> +<!-- | ~components | /components | --> +<!-- | ~pages | /pages | --> +<!-- | ~plugins | /plugins | --> +<!-- | ~static | /static | --> + +| エイリアス | ディレクトリ | |-----|------| | ~ | / | | ~assets | /assets | @@ -86,9 +170,16 @@ _This file can not be renamed._ | ~plugins | /plugins | | ~static | /static | -Aliases which link to files: +<!-- 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. | --> -| Alias | Usage | Description | +| エイリアス | 使い方 | 説明 | |-------|------|--------------| -| ~store | `const store = require('~store')` | Import the `vuex` store instance. | -| ~router | `const router = require('~router')`| Import the `vue-router` instance. | +| ~store | `const store = require('~store')` | `vuex` ストアのインスタンスをインポートします | +| ~router | `const router = require('~router')`| `vue-router` のインスタンスをインポートします | From 95aed6b29020ee333b2fddb084b1ffc7536c88e2 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Feb 2017 21:13:44 +0900 Subject: [PATCH 007/129] Translate ja/guide/configuration.md --- ja/guide/configuration.md | 115 ++++++++++++++++++++++++++++---------- 1 file changed, 86 insertions(+), 29 deletions(-) diff --git a/ja/guide/configuration.md b/ja/guide/configuration.md index 4307a9a69..15250af2a 100644 --- a/ja/guide/configuration.md +++ b/ja/guide/configuration.md @@ -1,84 +1,141 @@ --- -title: Configuration -description: The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. +title: 設定 +description: Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。しかし nuxt.config.js で設定を上書きすることができます。 --- -> The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. +<!-- 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. --> + +> Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。しかし nuxt.config.js で設定を上書きすることができます。 ### 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 +<!-- 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 --> + +このオプションで、アプリケーションのバンドルファイルのサイズを削減するために生成される vendor.bundle.js ファイル内にモジュールを追加できます。外部のモジュールを使うときに役に立ちます。 + +<!-- [Documentation about build integration](/api/configuration-build) --> -[Documentation about build integration](/api/configuration-build) +[build オプションに関するドキュメント](/api/configuration-build) ### cache -This option lets you enable cached components for better render performances. +<!-- This option lets you enable cached components for better render performances. --> -[Documentation about cache integration](/api/configuration-cache) +このオプションで、レンダリングのパフォーマンスを向上させるためにコンポーネントをキャッシュできます。 + +<!-- [Documentation about cache integration](/api/configuration-cache) --> + +[cache オプションに関するドキュメント](/api/configuration-cache) ### css -This option lets you define the CSS files/modules/libraries you want to set as globals (included in every pages). +<!-- This option lets you define the CSS files/modules/libraries you want to set as globals (included in every pages). --> + +このオプションで、グローバルに利用したい（どのファイルにもインクルードしたい）CSS ファイル/モジュール/ライブラリを指定できます。 -[Documentation about css integration](/api/configuration-css) +<!-- [Documentation about css integration](/api/configuration-css) --> + +[css オプションに関するドキュメント](/api/configuration-css) ### dev -This option lets you define the development or production mode of nuxt.js +<!-- This option lets you define the development or production mode of nuxt.js --> + +このオプションで、Nuxt.js の開発モードまたはプロダクションモードを定義できます。 -[Documentation about dev integration](/api/configuration-dev) +<!-- [Documentation about dev integration](/api/configuration-dev) --> + +[dev オプションに関するドキュメント](/api/configuration-css) ### env -This option lets you define environment variables available both client and server side. +<!-- This option lets you define environment variables available both client and server side. --> + +このオプションで、クライアントサイドでもサーバーサイドでも使える環境変数を指定できます。 -[Documentation about env integration](/api/configuration-env) +<!-- [Documentation about env integration](/api/configuration-env) --> + +[env オプションに関するドキュメント](/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. +<!-- This option lets you to define each params value for every dynamic routes in your application that Nuxt.js transforms into HTML files. --> + +このオプションで、Nuxt.js が HTML ファイルに変換するアプリケーション内の動的なルーティングのためのパラメータを指定できます。（訳に自信なし。原文は 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) --> -[Documentation about generate integration](/api/configuration-generate) +[generate オプションに関するドキュメント](/api/configuration-generate) ### head -This option lets you to define all the defaults metas for your application. +<!-- This option lets you to define all the defaults metas for your application. --> -[Documentation about head integration](/api/configuration-head) +このオプションで、アプリケーションのデフォルトのメタ情報（訳注: head タグ内のメタタグの情報）を指定できます。 + +<!-- [Documentation about head integration](/api/configuration-head) --> + +[head オプションに関するドキュメント](/api/configuration-head) ### loading -This option lets you to customize the loading component load by default with Nuxt.js. +<!-- This option lets you to customize the loading component load by default with Nuxt.js. --> + +このオプションで、Nuxt.js のデフォルトのローディングコンポーネントをカスタマイズできます。 + +<!-- [Documentation about loading integration](/api/configuration-loading) --> -[Documentation about loading integration](/api/configuration-loading) +[loading オプションに関するドキュメント](/api/configuration-loading) ### plugins -This option lets you to define Javascript plugins to be ran before instantiating the root vue.js application. +<!-- 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) +このオプションで、ルートの vue.js アプリケーションをインスタンス化する前に実行したい Javascript plugin を指定できます。 + +<!-- [Documentation about plugins integration](/api/configuration-plugins) --> + +[plugings オプションに関するドキュメント](/api/configuration-plugins) ### rootDir -This option lets you define the workspace of your nuxt.js application. +<!-- This option lets you define the workspace of your nuxt.js application. --> + +このオプションで、Nuxt.js アプリケーションのワークスペースを指定できます。 -[Documentation about rootDir integration](/api/configuration-rootdir) +<!-- [Documentation about rootDir integration](/api/configuration-rootdir) --> + +[rootDir オプションに関するドキュメント](/api/configuration-rootdir) ### router -This option lets you to overwrite the default Nuxt.js configuration of vue-router. +<!-- This option lets you to overwrite the default Nuxt.js configuration of vue-router. --> + +このオプションで、Nuxt.js のデフォルトの vue-router 設定を上書きできます。 -[Documentation about router integration](/api/configuration-router) +<!-- [Documentation about router integration](/api/configuration-router) --> + +[router オプションに関するドキュメント](/api/configuration-router) ### srcDir -This option lets you define the source directory of your nuxt.js application. +<!-- This option lets you define the source directory of your nuxt.js application. --> + +このオプションで、Nuxt.js のソースディレクトリを指定できます。 -[Documentation about srcDir integration](/api/configuration-srcdir) +<!-- [Documentation about srcDir integration](/api/configuration-srcdir) --> + +[srcDir オプションに関するドキュメント](/api/configuration-srcdir) ### transition -This option lets you define the default properties of the pages transitions. +<!-- This option lets you define the default properties of the pages transitions. --> + +このオプションで、ページ間の遷移のデフォルト設定を指定できます。 + +<!-- [Documentation about transition integration](/api/configuration-transition) --> -[Documentation about transition integration](/api/configuration-transition) +[transition オプションに関するドキュメント](/api/configuration-transition) From 7f0af184e2daa8b534ba4596bb87ff345fe9d3eb Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 21 Feb 2017 04:35:45 +0900 Subject: [PATCH 008/129] Translate ja/guide/routing.md --- ja/guide/routing.md | 216 +++++++++++++++++++++++++++++++++----------- 1 file changed, 165 insertions(+), 51 deletions(-) diff --git a/ja/guide/routing.md b/ja/guide/routing.md index cbfbe464c..0e31539a8 100644 --- a/ja/guide/routing.md +++ b/ja/guide/routing.md @@ -1,13 +1,22 @@ --- -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. +title: ルーティング +description: Nuxt.js はウェブアプリケーションのルーティングを生成するためにファイルシステムを利用します。それは PHP がルーティングを生成するようにシンプルです。 --- -> 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. +<!-- 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. --> -## Basic 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. --> -This file tree: +> Nuxt.js は `pages` ディレクトリ内の Vue ファイルの木構造に沿って、自動的に [vue-router](https://github.com/vuejs/vue-router) の設定を生成します。 + +<!-- ## Basic Routes --> + +## ルーティングの基礎 + +<!-- This file tree: --> + +下記のようなファイルの木構造のとき: ```bash pages/ @@ -17,7 +26,9 @@ pages/ --| index.vue ``` -will automatically generate: +<!-- will automatically generate: --> + +自動的に以下が生成されます: ```js router: { @@ -41,11 +52,17 @@ router: { } ``` -## Dynamic Routes +<!-- ## Dynamic Routes --> + +## 動的なルーティング + +<!-- To define a dynamic route with a param, you need to define a .vue file OR a directory **prefixed by an underscore**. --> -To define a dynamic route with a param, you need to define a .vue file OR a directory **prefixed by an underscore**. +パラメータを使って動的なルーティングを定義するには、.vue ファイル名またはディレクトリ名に **アンダースコアのプレフィックス** を付ける必要があります。 -This file tree: +<!-- This file tree: --> + +下記のような木構造のとき: ```bash pages/ @@ -57,7 +74,9 @@ pages/ --| index.vue ``` -will automatically generate: +<!-- will automatically generate: --> + +自動的に以下が生成されます: ```js router: { @@ -86,36 +105,67 @@ router: { } ``` -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. +<!-- 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. --> + +`user-id` と名付けられたルートに `:id?` というパスがありますが、これはこの `:id` が必須ではないことを表します。もし必須にしたい場合は `users` ディレクトリ内に `index.vue` ファイルを作成してください（訳注: `users/_id` ディレクトリ内に `index.vue` ファイルを作成するのでは？） + +<!-- ### Validate Route params --> + +### ルーティングのパラメータのバリデーション + +<!-- Nuxt.js lets you define a validator method inside your dynamic route component. --> + +Nuxt.js では、動的なルーティングをするコンポーネント内に、パラメータをバリデーションするメソッドを定義することができます。 -### Validate Route Params +<!-- In this example: `pages/users/_id.vue` --> -Nuxt.js lets you define a validator method inside your dynamic route component. +例えば `pages/users/_id.vue` 内にこのように書きます: -In this example: `pages/users/_id.vue` +<!-- ```js --> +<!-- export default { --> +<!-- validate ({ params }) { --> +<!-- // Must be a number --> +<!-- return /^\d+$/.test(params.id) --> +<!-- } --> +<!-- } --> +<!-- ``` --> ```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. +<!-- 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) +もしバリデーションのメソッドが `true` を返さなかった場合は、Nuxt.js は自動的に 404 エラーページをロードします。 -## Nested Routes +<!-- More information about the validate method: [API Pages validate](/api/pages-validate) --> -Nuxt.js lets you create nested route by using the children routes of vue-router. +バリデーションのメソッドについてより深く理解したい場合は [ページバリデーションの API](/api/pages-validate) を参照してください。 -To define a nested route, you need to create a Vue file with the **same name as the directory** which contain your children views. +<!-- ## Nested Routes --> -<p class="Alert Alert--info">Don't forget to write `<nuxt-child/>` inside the parent component (.vue file).</p> +## ネストしたルーティング -This file tree: +<!-- Nuxt.js lets you create nested route by using the children routes of vue-router. --> + +Nuxt.js では 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. --> + +ネストしたルーティングを定義するには、子ビューを含む **ディレクトリと同じ名前** の Vue ファイルを作成する必要があります。 + +<!-- <p class="Alert Alert--info">Don't forget to write `<nuxt-child/>` inside the parent component (.vue file).</p> --> + +<p class="Alert Alert--info">親コンポーネント（.vue ファイル）内に `<nuxt-child/>` を書くことを覚えておいてください。</p> + +<!-- This file tree: --> + +下記のようなファイルの木構造のとき: ```bash pages/ @@ -125,7 +175,9 @@ pages/ --| users.vue ``` -will automatically generate: +<!-- will automatically generate: --> + +自動的に以下が生成されます: ```js router: { @@ -150,11 +202,17 @@ router: { } ``` -## Dynamic Nested Routes +<!-- ## Dynamic Nested Routes --> + +## 動的でネストしたルーティング + +<!-- This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents. --> + +このシナリオはあまり追加すべきではないのですが、Nuxt.js では動的な親ルーティングの中に動的な子ルーティングを持つことが可能です（訳注: 前半部分がうまく訳せませんでした。原文は This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents.） -This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents. +<!-- This file tree: --> -This file tree: +下記のようなファイルの木構造のとき: ```bash pages/ @@ -168,7 +226,9 @@ pages/ --| index.vue ``` -will automatically generate: +<!-- will automatically generate: --> + +自動的に以下が生成されます: ```js router: { @@ -209,17 +269,30 @@ router: { } ``` -## Transitions +<!-- ## 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. --> -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. +Nuxt.js では [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。 -### Global Settings +<!-- ### 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. +<!-- <p class="Alert Alert--info">Nuxt.js default transition name is `"page"`.</p> --> + +<p class="Alert Alert--info">Nuxt.js のデフォルトのトランジション名は `"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. --> + +アプリケーションの全てのページでフェードさせるトランジションを定義には、ルーティング全体に適用されている CSS ファイルが必要です。まずは `assets` ディレクトリ内にファイルを作成するところから始めます: + +<!-- Our global css in `assets/main.css`: --> + +`assets/main.css` 内にグローバルな CSS を書きます: -Our global css in `assets/main.css`: ```css .page-enter-active, .page-leave-active { transition: opacity .5s; @@ -229,7 +302,10 @@ Our global css in `assets/main.css`: } ``` -We add its path in our `nuxt.config.js` file: +<!-- We add its path in our `nuxt.config.js` file: --> + +`nuxt.config.js` ファイルに CSS ファイルのパスを指定します: + ```js module.exports = { css: [ @@ -238,13 +314,22 @@ module.exports = { } ``` -More information about the transition key: [API Configuration transition](/api/pages-transition) +<!-- More information about the transition key: [API Configuration transition](/api/pages-transition) --> -### Page Settings +トランジションについてより深く理解したい場合は [トランジションを設定する API](/api/pages-transition) を参照してください。 -You can also define a custom transition for only one page with the `transition` property. +<!-- ### Page Settings --> + +### 特定のページに対する設定 + +<!-- You can also define a custom transition for only one page with the `transition` property. --> + +`transition` プロパティを使うことで、特定のページのみに対してカスタムトランジションを定義することもできます。 + +<!-- We add a new class in our global css in `assets/main.css`: --> + +`assets/main.css` 内に新しい CSS 定義を追加します: -We add a new class in our global css in `assets/main.css`: ```css .test-enter-active, .test-leave-active { transition: opacity .5s; @@ -254,22 +339,35 @@ We add a new class in our global css in `assets/main.css`: } ``` -then, we use the transition property to define the class name to use for this page transition: +<!-- then, we use the transition property to define the class name to use for this page transition: --> + +それから、このページトランジションを利用するためのクラス名を transition プロパティで指定します: + ```js export default { transition: 'test' } ``` -More information about the transition property: [API Pages transition](/api/pages-transition) +<!-- More information about the transition property: [API Pages transition](/api/pages-transition) --> -## Middleware +トランジションプロパティについてより深く理解したい場合は [ページトランジション API](/api/pages-transition) を参照してください。 -> The middleware lets you define custom function to be ran before rendering a page or a group of pages. +<!-- ## Middleware --> -**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: +<!-- \> 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). --> + +**ミドルウェアは `middleware/` ディレクトリに入れます。** ファイル名はミドルウェアの名前となります（`middleware/auth.js` は `auth` ミドルウェアになります） + +<!-- A middleware receive [the context](/api#the-context) as first argument: --> + +ミドルウェアは第一引数として [context](/api#the-context) を受け取ります: ```js export default function (context) { @@ -277,14 +375,23 @@ export default function (context) { } ``` -The middleware will be executed in series in this order: +<!-- The middleware will be executed in series in this order: --> +<!-- 1. `nuxt.config.js` --> +<!-- 2. Matched layouts --> +<!-- 3. Matched pages --> + +ミドルウェアは下記の順に実行されます: + 1. `nuxt.config.js` -2. Matched layouts -3. Matched pages +2. マッチしたレイアウト +3. マッチしたページ -A middleware can be asynchronous, simply return a `Promise` or use the 2nd `callback` argument: +<!-- A middleware can be asynchronous, simply return a `Promise` or use the 2nd `callback` argument: --> + +ミドルウェアは、`Promise` を返すようにするか、もしくは第二引数の `callback` を使って、非同期に実行することができます: `middleware/stats.js` + ```js import axios from 'axios' @@ -295,9 +402,12 @@ export default function ({ route }) { } ``` -Then, in your `nuxt.config.js`, layout or page, use the `middleware` key: +<!-- Then, in your `nuxt.config.js`, layout or page, use the `middleware` key: --> + +そして `nuxt.config.js` やレイアウトもしくはページ内で `middleware` キーを使います: `nuxt.config.js` + ```js module.exports = { router: { @@ -306,6 +416,10 @@ module.exports = { } ``` -The `stats` middleware will be called for every route changes. +<!-- The `stats` middleware will be called for every route changes. --> + +`stats` ミドルウェアは全てのルート変更時に呼び出されるようになります。 + +<!-- To see a real-life example using the middleware, please see [example-auth0](https://github.com/nuxt/example-auth0) on GitHub. --> -To see a real-life example using the middleware, please see [example-auth0](https://github.com/nuxt/example-auth0) on GitHub. +ミドルウェアを使った実際の例を見たい場合は GitHub 上にある [example-auth0](https://github.com/nuxt/example-auth0) を見てみてください。 From 705d9fab12d92b01c99d50c8d02627744bbb8624 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 21 Feb 2017 21:40:16 +0900 Subject: [PATCH 009/129] Translate ja/guide/views.md --- ja/guide/views.md | 260 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 203 insertions(+), 57 deletions(-) diff --git a/ja/guide/views.md b/ja/guide/views.md index a65de291f..414577bc5 100644 --- a/ja/guide/views.md +++ b/ja/guide/views.md @@ -1,13 +1,51 @@ --- -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) +title: ビュー +description: ビューセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なこと全てを説明します（ページ、レイアウト、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) +<!-- 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) --> -## Pages +<!-- \> 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) --> -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. +> ビューセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なこと全てを説明します（ページ、レイアウト、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. --> + +全てのページコンポーネントは Vue コンポーネントですが、Nuxt.js はユニバーサルなアプリケーションを最も簡単なやり方で開発することを可能にために、特別なキーを追加します。 + +<!-- ```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> --> +<!-- ``` --> ```html <template> @@ -17,16 +55,16 @@ Every Page component is a Vue component, but Nuxt.js adds special keys to make t <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 + // fetch メソッドは、ページがレンダリングされる前に、ストアにデータを入れるために使われます }, head () { - // Set Meta Tags for this Page + // このページのメタタグをセットします }, - // and more functionality to discover + // さらにいろいろな機能が続きます... ... } </script> @@ -38,52 +76,104 @@ export default { </style> ``` - -| Attribute | Description | +<!-- | 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). | --> + +| 属性 | 説明 | |-----------|-------------| -| 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). | +| data | 最も重要なキーであり [Vue data](https://vuejs.org/v2/api/#Options-Data) と同じ意義を持っています。しかし非同期に動作し、また引数として context を受け取ります。どのように動作するかを知るには [非同期データに関するドキュメント](/guide/async-data) を参照してください。 | +| fetch | ページがレンダリングされる前に、データをストアに入れるために使います。コンポーネントのデータをセットすること以外は data メソッドと似ています。[ページのフェッチ API に関するドキュメント](/api/pages-fetch) を参照してください。 | +| head | 現在のページの特定のメタタグを設定します。[ページの head API に関するドキュメント](/api/pages-head) を参照してください。 | +| layout | `layouts` ディレクトリ内のレイアウトを指定します。[ページのレイアウト API に関するドキュメント](/api/pages-layout) を参照してください。 | +| transition | ページに特定のトランジションを設定します。[ページのトランジション API に関するドキュメント](/api/pages-transition) を参照してください。 | +| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストしたルーティング](/guide/routing#nested-routes) で使われます。 | +| validate | [動的なルーティング](/guide/routing#dynamic-routes) のためのバリデーション関数です。 | +| middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#middleware) を参照してください。 | + +<!-- More information about the pages properties usage: [API Pages](/api) --> + +ページのプロパティの使い方についてより深く理解したいときは [ページ API](/api) を参照してください。 + +<!-- ## Layouts --> + +## レイアウト -More information about the pages properties usage: [API Pages](/api) +<!-- Nuxt.js lets you extend the main layout or create custom layouts by adding them in the `layouts` directory. --> -## Layouts +Nuxt.js ではメインレイアウトを拡張したり、カスタムレイアウトを `layouts` ディレクトリに入れてレイアウトを追加したりすることができます。 -Nuxt.js lets you extend the main layout or create custom layouts by adding them in the `layouts` directory. +<!-- ### Default Layout --> -### Default Layout +### デフォルトレイアウト -You can extend the main layout by adding a `layouts/default.vue` file. +<!-- 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.* +`layouts/default.vue` ファイルを追加することでメインレイアウトを拡張できます。 + +<!-- *Make sure to add the `<nuxt>` component when creating a layout to display the page component.* --> + +*ページコンポーネントを表示するレイアウトを作成するときは、必ず `<nuxt/>` コンポーネントを入れておくことを覚えておいてください。* + +<!-- The default layout source code is: --> + +デフォルトのレイアウトのソースコードは下記のようになっています: -The default layout source code is: ```html <template> <nuxt/> </template> ``` -### Error Page +<!-- ### Error Page --> + +### エラーページ + +<!-- You can customize the error page by adding a `layouts/error.vue` file. --> + +`layouts/error.vue` ファイルを追加することでエラーページをカスタマイズできます。 + +<!-- 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). --> + +このレイアウトはテンプレート内に `<nuxt/>` を含まないという意味で特殊です。このレイアウトは 404 や 500 エラーなどが発生したときに表示されるコンポーネントとして見ることになります。 + +<!-- The default error page source code is [available on Github](https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue). --> + +デフォルトのエラーページのソースコードは [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`: --> -You can customize the error page by adding a `layouts/error.vue` file. +`layouts/error.vue` にカスタムエラーページを書くときの例: -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). +<!-- ```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> --> -The default error page source code is [available on Github](https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue). +<!-- <script> --> +<!-- export default { --> +<!-- props: ['error'] --> +<!-- } --> +<!-- </script> --> +<!-- ``` --> -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> + <h1 v-if="error.statusCode === 404">ページが見つかりません</h1> + <h1 v-else>エラーが発生しました</h1> + <nuxt-link to="/">ホーム</nuxt-link> </div> </template> @@ -94,23 +184,44 @@ export default { </script> ``` -### Custom Layout +<!-- ### 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.* +<!-- Every file (*first level*) in the `layouts` directory will create a custom layout accessible with the `layout` property in the page component. --> + +`layouts` ディレクトリの *第一階層* のファイルで、ページコンポーネント内の `layout` プロパティで指定できるカスタムレイアウトを作成できます。 + +<!-- *Make sure to add the `<nuxt/>` component when creating a layout to display the page component.* --> + +*ページコンポーネントを表示するレイアウトを作成するときは、必ず `<nuxt/>` コンポーネントを入れておくことを覚えておいてください。* + +<!-- Example of `layouts/blog.vue`: --> + +`layouts/blog.vue` の例: + +<!-- ```html --> +<!-- <template> --> +<!-- <div> --> +<!-- <div>My blog navigation bar here</div> --> +<!-- <nuxt/> --> +<!-- </div> --> +<!-- </template> --> +<!-- ``` --> -Example of `layouts/blog.vue`: ```html <template> <div> - <div>My blog navigation bar here</div> + <div>ブログのナビゲーションバーをここに設置します</div> <nuxt/> </div> </template> ``` -And then in `pages/posts.vue`, you can tell Nuxt.js to use your custom layout: +<!-- And then in `pages/posts.vue`, you can tell Nuxt.js to use your custom layout: --> + +それから `pages/posts.vue` ファイル内で、カスタムレイアウトを使うことを Nuxt.js に伝えます: + ```html <script> export default { @@ -119,29 +230,54 @@ export default { </script> ``` -More information about the layout property: [API Pages layout](/api/pages-layout) +<!-- More information about the layout property: [API Pages layout](/api/pages-layout) --> + +layout プロパティについてより深く理解するには [ページレイアウト API](/api/pages-layout) を参照してください。 + +また、動作する様子を [デモ動画](https://www.youtube.com/watch?v=YOKnSTp7d38) で確認してみてください。 + +<!-- ## HTML Head --> + +## HTML の head 情報 -Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action. +<!-- Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. --> -## HTML Head +Nuxt.js はアプリケーションの `headers` 及び `html attributes` を更新するために [vue-meta](https://github.com/declandewet/vue-meta) を使います。 -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: --> + +Nuxt.js では下記のオプションで `vue-meta` を設定します: + +<!-- ```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 --> +<!-- } --> +<!-- ``` --> -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 + keyName: 'head', // vue-meta がメタ情報を探すためのコンポーネントオプションの名前 + attribute: 'n-head', // vue-meta がタグを監視するためにタグに追加する属性名 + ssrAttribute: 'n-head-ssr', // メタ情報が既にサーバーサイドでレンダリングされていることを vue-meta に知らせるための属性名 + tagIDKeyName: 'hid' // vue-meta がタグを上書きすべきかタグを追加すべきか判断するために用いるプロパティ名 } ``` -### Default Meta Tags +<!-- ### Default Meta Tags --> + +### デフォルトのメタタグ + +<!-- Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: --> + +Nuxt.js ではアプリケーションのデフォルトのメタ情報を `nuxt.config.js` で設定できます。`head` プロパティを使用します: + +<!-- Example of a custom viewport with a custom Google font: --> -Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: +カスタム viewport 及び Google フォントを定義する例: -Example of a custom viewport with a custom Google font: ```js head: { meta: [ @@ -154,12 +290,22 @@ head: { } ``` -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). +<!-- 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). --> + +`head` に渡せるオプションのリストを確認するには [vue-meta のドキュメント](https://github.com/declandewet/vue-meta#recognized-metainfo-properties) を見てみてください。 + +<!-- More information about the head method: [API Configuration head](/api/configuration-head) --> + +head メソッドについてより深く理解するためには [head 設定 API](/api/configuration-head) を参照してください。 + +<!-- ### Custom Meta Tags for a Page --> + +### 特定のページにメタタグを設定する -More information about the head method: [API Configuration head](/api/configuration-head) +<!-- More information about the head method: [API Pages head](/api/pages-head) --> -### Custom Meta Tags for a Page +特定のページにメタタグを設定する方法について [ページ head API](/api/pages-head) を参照してください。 -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> --> -<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> +<p class="Alert">子コンポーネントで利用されたときにメタ情報が重複してしまうことを避けるために `hid` キーでユニーク識別子を与えてください。また、これについてより深く理解するためには [こちら](https://github.com/declandewet/vue-meta#lists-of-tags) を参照してください。</p> From 88eaf81127659fd631eac0e96273b6a8686cc4be Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 22 Feb 2017 00:01:25 +0900 Subject: [PATCH 010/129] Translate ja/guide/async-data.md --- ja/guide/async-data.md | 130 +++++++++++++++++++++++++++++++++-------- 1 file changed, 105 insertions(+), 25 deletions(-) diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md index de3f3fb2e..b99db8c1f 100644 --- a/ja/guide/async-data.md +++ b/ja/guide/async-data.md @@ -1,23 +1,45 @@ --- -title: Async Data -description: Nuxt.js supercharges the data method from vue.js to let you handle async operation before setting the component data. +title: 非同期なデータ +description: Nuxt.js は、コンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の data メソッドを過給します --- -> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. +<!-- title: Async Data --> +<!-- 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. --> -`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. +> Nuxt.js は、コンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の `data` メソッドを *過給* します（訳注: supercharges をうまく訳せませんでした。原文は Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting 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> +<!-- ## The data Method --> + +## data メソッド + +<!-- `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. --> + +`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [context](/api#context) を受け取り、context を、データをフェッチしたりコンポーネントのデータを返すために使うことができます。 + +<!-- <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> --> + +<div class="Alert Alert--orange">`data` メソッド内の `this` を通してコンポーネントのインスタンスにアクセスすることは **できません**。それはコンポーネントがインスタンス化される前に data メソッドが呼び出されるためです。</div> + +<!-- To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with: --> 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)` +Nuxt.js では data メソッドを非同期にするために、いくつかの異なるやり方があるので、最もなじむものを選択してください: + +<!-- 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)` --> + +1. `Promise` を返す。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 +2. [async/await](https://github.com/lukehoban/ecmascript-asyncawait) を使う。（[より深く理解する](https://zeit.co/blog/async-and-await)） +3. 第二引数としてコールバックを定義する。右のように呼び出される必要があります: `callback(err, data)` + +<!-- ### Returning a Promise --> + +### Promise を返す -### Returning a Promise ```js export default { data ({ params }) { @@ -29,7 +51,10 @@ export default { } ``` -### Using async/await +<!-- ### Using async/await --> + +### async/await を使う + ```js export default { async data ({ params }) { @@ -39,7 +64,10 @@ export default { } ``` -### Using a callback +<!-- ### Using a callback --> + +### コールバックを使う + ```js export default { data ({ params }, callback) { @@ -51,9 +79,13 @@ export default { } ``` -### Returning an Object +<!-- ### Returning an Object --> + +### オブジェクトを返す -If you don't need to do any asynchronous call, you can simply return an object: +<!-- If you don't need to do any asynchronous call, you can simply return an object: --> + +もし非同期に実行する必要がなければ、シンプルにオブジェクトを返せば良いです: ```js export default { @@ -63,9 +95,13 @@ export default { } ``` -### Displaying the data +<!-- ### Displaying the data --> + +### データを表示する -When the data method set, you can display the data inside your template like you used to do: +<!-- When the data method set, you can display the data inside your template like you used to do: --> + +data メソッドがセットされると、下記のように template の内側でデータを表示することができます: ```html <template> @@ -73,15 +109,40 @@ When the data method set, you can display the data inside your template like you </template> ``` -## The Context +<!-- ## The Context --> + +## コンテキスト + +<!-- To see the list of available keys in `context`, take a look at the [API Pages data](/api). --> + +`context` 内で利用できるキーの一覧を確認するには [ページ data API](/api) をご覧ください。 + +<!-- ## Handling Errors --> -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. --> -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. +Nuxt.js は `context` の中に `error(params)` メソッドを追加しました。これを呼び出すことでエラーページを表示できます。 + +<!-- Example with a `Promise`: --> + +`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' }) --> +<!-- }) --> +<!-- } --> +<!-- } --> +<!-- ``` --> -Example with a `Promise`: ```js export default { data ({ params, error }) { @@ -90,13 +151,30 @@ export default { return { title: res.data.title } }) .catch((e) => { - error({ statusCode: 404, message: 'Post not found' }) + error({ statusCode: 404, message: 'ページが見つかりません' }) }) } } ``` -If you're using the `callback` argument, you can call it directly with the error, nuxt.js will call the `error` method for you: +<!-- If you're using the `callback` argument, you can call it directly with the error, nuxt.js will call the `error` method for you: --> + +`callback` 引数を使っているときは、直接、エラー内容と共に callback を呼び出すことができ、そうすると Nuxt.js は `error` メソッドを実行します。 + +<!-- ```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' }) --> +<!-- }) --> +<!-- } --> +<!-- } --> +<!-- ``` --> + ```js export default { data ({ params }, callback) { @@ -105,10 +183,12 @@ export default { callback(null, { title: res.data.title }) }) .catch((e) => { - callback({ statusCode: 404, message: 'Post not found' }) + callback({ statusCode: 404, message: 'ページが見つかりません' }) }) } } ``` -To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). +<!-- To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). --> + +エラーページをカスタマイズするためには [ビューページのレイアウトセクション](/guide/views#layouts) を参照してください。 From f5898517ce81a0f05bde83d47a0f74ede4cc7bbf Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 22 Feb 2017 23:54:50 +0900 Subject: [PATCH 011/129] Translate ja/guide/assets.md --- ja/guide/assets.md | 105 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 80 insertions(+), 25 deletions(-) diff --git a/ja/guide/assets.md b/ja/guide/assets.md index 7b6faba44..442ad5935 100644 --- a/ja/guide/assets.md +++ b/ja/guide/assets.md @@ -1,15 +1,26 @@ --- -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. +title: アセット +description: Nuxt.js はアセットファイルを配信するために Webpack のローダーとしてデフォルトで vue-loader、file-loader 及び url-loader を使いますが、静的ファイルのためのディレクトリを使うこともできます。 --- -> 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. +<!-- 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. --> -## Webpacked +<!-- \> 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. --> -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. +> Nuxt.js はアセットファイルを配信するために Webpack のローダーとしてデフォルトで vue-loader、file-loader 及び url-loader を使いますが、静的ファイルのためのディレクトリを使うこともできます。 -For example, we have this file tree: +<!-- ## Webpacked --> + +## Webpack + +<!-- 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. --> + +デフォルトでは [vue-loader](http://vue-loader.vuejs.org/en/) がスタイルやテンプレートファイルを `css-loader` や Vue テンプレートコンパイラを用いて自動的に処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などの全ての URL はモジュールの依存関係のように解決されます。 + +<!-- For example, we have this file tree: --> + +例えば、このようなファイルがあるとします: ```bash -| assets/ @@ -18,28 +29,45 @@ For example, we have this file tree: ----| index.vue ``` -In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`. +<!-- In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`. --> + +CSS で `url('~assets/image.png')` と書いていたら、それは `require('~assets/image.png')` に変換されます。 + +<!-- Or if in my `pages/index.vue`, I use: --> + +あるいは `pages/index.vue` の中で下記のように書いていたとします: -Or if in my `pages/index.vue`, I use: ```html <template> <img src="~assets/image.png"> </template> ``` -It will be compiled into: +<!-- 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. +<!-- 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. --> + +`.png` は JavaScript ファイルではないため、Nuxt.js は Webpack が PNG ファイルを扱えるように [file-loader](https://github.com/webpack/file-loader) と [url-loader](https://github.com/webpack/url-loader) を使う設定を行います。 + +<!-- The benefits of them are: --> + +file-loader と url-loader を使うメリット: + +<!-- - `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`. --> -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`. +- `file-loader` はアセットファイルをどこにコピーし配置すべきか、また、より良いキャッシングのためにバージョンのハッシュ値を使って、なんというファイル名にすべきかを指定します。 +- `url-loader` はもしファイルサイズが閾値よりも小さければ、ファイルを BASE64 データとして埋め込みます。これにより小さなファイルを取得するための HTTP リクエストの数を減らすことができます。もしファイルサイズが閾値よりも大きければ、自動的に `file-loader` にフォールバックします。 -Actually, Nuxt.js default loaders configuration is: +<!-- Actually, Nuxt.js default loaders configuration is: --> + +実際には Nuxt.js のデフォルトのローダー設定は次のようになっています: ```js [ @@ -62,9 +90,13 @@ Actually, Nuxt.js default loaders configuration is: ] ``` -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. +<!-- 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. --> + +ファイルサイズが 1KO を下回るファイルはすべて base-64 データとして埋め込まれます。反対に 1KO を上回る画像やフォントは（`.nuxt` ディレクトリ配下の）対応するディレクトリにより良いキャッシングのためのバージョンのハッシュ値を含んだファイル名でコピーされます。 -When launching our application with `nuxt`, our template in `pages/index.vue`: +<!-- When launching our application with `nuxt`, our template in `pages/index.vue`: --> + +アプリケーションを `nuxt` コマンドで起動するとき、`pages/index.vue` 内のテンプレートは下記のようになっていて: ```html <template> @@ -72,27 +104,50 @@ When launching our application with `nuxt`, our template in `pages/index.vue`: </template> ``` -Will be generated into: +<!-- 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). +<!-- If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build#loaders). --> + +これらのローダーの設定を更新したり、ローダーを使わないようにしたいするには、[ローダー設定](/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. --> + +もし Webpack で扱う対象となる `assets` ディレクトリを使いたくない場合は、プロジェクトのルートディレクトリに `static` ディレクトリを作成して利用することができます。 + +<!-- These files will be automatically serve by Nuxt and accessible in your project root URL. --> + +これらのファイルは自動的に Nuxt.js により配信され、またプロジェクトのルート URL からアクセス可能になります。 + +<!-- This option is helpful for files like `robots.txt` or `sitemap.xml`. --> -## Static +このオプションは `robots.txt` や `sitemap.xml` などのファイルに役に立ちます。 -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. +<!-- From your code you can then reference those files with `/` URLs: --> -These files will be automatically serve by Nuxt and accessible in your project root URL. +`/` URL からそれらのファイルを参照できます: -This option is helpful for files like `robots.txt` or `sitemap.xml`. +<!-- ```html --> +<!-- <\!-- Static image from static directory -\-> --> +<!-- <img src="/my-image.png"/> --> -From your code you can then reference those files with `/` URLs: +<!-- <\!-- Webpacked image from assets directory -\-> --> +<!-- <img src="/assets/my-image-2.png"/> --> +<!-- ``` --> ```html -<!-- Static image from static directory --> +<!-- static ディレクトリの静的な画像 --> <img src="/my-image.png"/> -<!-- Webpacked image from assets directory --> +<!-- Webpack が扱う対象となる assets ディレクトリの画像 --> <img src="/assets/my-image-2.png"/> ``` From d73d9940a7fd0f2dd7dcd45c660475f1c76f5c98 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 00:15:07 +0900 Subject: [PATCH 012/129] Translate ja/guide/plugins.md --- ja/guide/plugins.md | 83 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 63 insertions(+), 20 deletions(-) diff --git a/ja/guide/plugins.md b/ja/guide/plugins.md index 03a8f04b0..710985fcd 100644 --- a/ja/guide/plugins.md +++ b/ja/guide/plugins.md @@ -1,23 +1,38 @@ --- -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. +title: プラグイン +description: Nuxt.js ではルートの Vue.js アプリケーションがインスタンス化される前に実行される js プラグインを定義することができます。プラグインとして自前のライブラリや外部モジュールを使うことができます。 --- -> 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. +<!-- 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. --> -<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> +<!-- \> 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. --> -## External Packages +> Nuxt.js ではルートの Vue.js アプリケーションがインスタンス化される前に実行される js プラグインを定義することができます。プラグインとして自前のライブラリや外部モジュールを使うことができます。 -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. +<!-- <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> --> -We install it via NPM: +<div class="Alert">どの Vue [インスタンスのライフサイクル](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) においても、`beforeCreate` と `created` フックのみが **クライアントサイドとサーバーサイドの両方** で呼び出されることを知っておくことはとても重要です。それ以外の全てのフックはクライアントサイドでのみ呼び出されます。</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. --> + +アプリケーションに外部パッケージ/モジュールを使いたいときがあるかもしれません。例えばサーバーでもクライアントでも HTTP リクエストを送れるようにするための [axios](https://github.com/mzabriskie/axios) が良い例です。 + +<!-- We install it via NPM: --> + +NPM 経由でインストールします: ```bash npm install --save axios ``` -Then, we can use it directly in our pages: +<!-- Then, we can use it directly in our pages: --> + +そしてページ内で直接それを使うことができます: ```html <template> @@ -36,7 +51,9 @@ export default { </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`: +<!-- 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`: --> + +しかし、**ひとつ問題があって**、仮に別のページで axios をインポートすると、そのページでもまたインクルードされてしまいます。この問題に対して、`axios` をアプリケーション内で一度だけインクルードしたいと思い、`nuxt.config.js` 内で `build.vendor` キーを使うようにしました。 ```js module.exports = { @@ -46,13 +63,22 @@ module.exports = { } ``` -Then, I can import `axios` anywhere without having to worry about making the bundle bigger! +<!-- Then, I can import `axios` anywhere without having to worry about making the bundle bigger! --> + +こうするとバンドルファイルが膨れ上がる心配なしに `axios` をどこでもインポートできます。 + +<!-- ## Vue Plugins --> + +## Vue プラグイン + +<!-- 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. --> -## Vue Plugins +アプリケーション内で通知を表示するために [vue-notifications](https://github.com/se-panfilov/vue-notifications) を使いたいときには、アプリケーションを起動する前にプラグインをセットアップする必要があります。 -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`: --> + +`plugins/vue-notifications.js` ファイルを次のようにします: -File `plugins/vue-notifications.js`: ```js import Vue from 'vue' import VueNotifications from 'vue-notifications' @@ -60,18 +86,28 @@ import VueNotifications from 'vue-notifications' Vue.use(VueNotifications) ``` -Then, we add the file inside the `plugins` key of `nuxt.config.js`: +<!-- Then, we add the file inside the `plugins` key of `nuxt.config.js`: --> + +それから `nuxt.config.js` の `plugins` キーにファイルを記述します: + ```js module.exports = { plugins: ['~plugins/vue-notifications'] } ``` -To learn more about the `plugins` configuration key, check out the [plugins api](/api/configuration-plugins). +<!-- To learn more about the `plugins` configuration key, check out the [plugins api](/api/configuration-plugins). --> + +`plugins` 設定キーについてより深く理解するには [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. --> + +実は `vue-notifications` は app bundle ファイルに含まれます。しかしライブラリなので、うまくキャッシュさせるために vendor bundle ファイルに含めたいとします。 -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: --> + +`nuxt.config.js` を更新して vendor bundle の中に `vue-notifications` を入れます: -We can update our `nuxt.config.js` to add `vue-notifications` in the vendor bundle: ```js module.exports = { build: { @@ -81,11 +117,16 @@ module.exports = { } ``` -## Client-side only +<!-- ## 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. --> -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. +いくつかのプラグインは **ブラウザでのみ** 動作します。`process.BROWSER_BUILD` 変数を使って、そのプラグインがクライアントサイドで動作するか確認することができます。 Example: + ```js import Vue from 'vue' import VueNotifications from 'vue-notifications' @@ -95,4 +136,6 @@ if (process.BROWSER_BUILD) { } ``` -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. +<!-- 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. --> + +もしサーバーサイドでのみライブラリを読み込む必要がある場合は、Webpack が `server.bundle.js` ファイルを作成するときに `true` がセットされる `process.SERVER_BUILD` 変数を使うことができます。 From ccf0932805c7f1cac2ededba3f7684cadc129243 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 00:42:46 +0900 Subject: [PATCH 013/129] Make ja/guide/plugins.md natural Japanese --- ja/guide/plugins.md | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/ja/guide/plugins.md b/ja/guide/plugins.md index 710985fcd..6ea60ea50 100644 --- a/ja/guide/plugins.md +++ b/ja/guide/plugins.md @@ -1,6 +1,6 @@ --- title: プラグイン -description: Nuxt.js ではルートの Vue.js アプリケーションがインスタンス化される前に実行される js プラグインを定義することができます。プラグインとして自前のライブラリや外部モジュールを使うことができます。 +description: Nuxt.js では js プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。プラグインとして自前のライブラリを指定することも、外部のモジュールを指定することもできます。 --- <!-- title: Plugins --> @@ -8,23 +8,23 @@ description: Nuxt.js ではルートの Vue.js アプリケーションがイン <!-- \> 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 ではルートの Vue.js アプリケーションがインスタンス化される前に実行される js プラグインを定義することができます。プラグインとして自前のライブラリや外部モジュールを使うことができます。 +> Nuxt.js では js プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。プラグインとして自前のライブラリを指定することも、外部のモジュールを指定することもできます。 <!-- <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> --> -<div class="Alert">どの Vue [インスタンスのライフサイクル](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) においても、`beforeCreate` と `created` フックのみが **クライアントサイドとサーバーサイドの両方** で呼び出されることを知っておくことはとても重要です。それ以外の全てのフックはクライアントサイドでのみ呼び出されます。</div> +<div class="Alert">Vue インスタンスの [ライフサイクル](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) において、`beforeCreate` と `created` フックのみが **クライアントサイドとサーバーサイドの両方** で呼び出されることに注意してください。それ以外のすべてのフックはクライアントサイドでのみ呼び出されます。</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. --> -アプリケーションに外部パッケージ/モジュールを使いたいときがあるかもしれません。例えばサーバーでもクライアントでも HTTP リクエストを送れるようにするための [axios](https://github.com/mzabriskie/axios) が良い例です。 +アプリケーションに外部パッケージ/モジュールを使いたいときがあるでしょう。例えばサーバーでもクライアントでも HTTP リクエストを送れる [axios](https://github.com/mzabriskie/axios) などが良い例です。 <!-- We install it via NPM: --> -NPM 経由でインストールします: +外部パッケージは NPM 経由でインストールします: ```bash npm install --save axios @@ -32,7 +32,7 @@ npm install --save axios <!-- Then, we can use it directly in our pages: --> -そしてページ内で直接それを使うことができます: +そうすると次のようにページ内で直接それを使うことができます: ```html <template> @@ -53,7 +53,7 @@ export default { <!-- 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`: --> -しかし、**ひとつ問題があって**、仮に別のページで axios をインポートすると、そのページでもまたインクルードされてしまいます。この問題に対して、`axios` をアプリケーション内で一度だけインクルードしたいと思い、`nuxt.config.js` 内で `build.vendor` キーを使うようにしました。 +ただしここで **ひとつ問題があり**、もし別のページでも import axios と書くと、axios は重複してバンドルファイルに含まれてしまいます。そこで `axios` をアプリケーション内で一度だけインクルードするには `nuxt.config.js` 内で `build.vendor` キーを使います: ```js module.exports = { @@ -65,7 +65,7 @@ module.exports = { <!-- Then, I can import `axios` anywhere without having to worry about making the bundle bigger! --> -こうするとバンドルファイルが膨れ上がる心配なしに `axios` をどこでもインポートできます。 +こうすれば、バンドルファイルが膨れ上がることなく、どの場所にも `import axios` と書くことができます。 <!-- ## Vue Plugins --> @@ -77,7 +77,7 @@ module.exports = { <!-- File `plugins/vue-notifications.js`: --> -`plugins/vue-notifications.js` ファイルを次のようにします: +そのためには `plugins/vue-notifications.js` ファイルを次のように記述します: ```js import Vue from 'vue' @@ -102,11 +102,11 @@ module.exports = { <!-- 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. --> -実は `vue-notifications` は app bundle ファイルに含まれます。しかしライブラリなので、うまくキャッシュさせるために vendor bundle ファイルに含めたいとします。 +さて、上の書き方では、実は `vue-notifications` は app というバンドルファイルに含まれます。しかし `vue-notifications` はライブラリなので、vendor というバンドルファイルに含めて、うまくキャッシュさせたいと考えます。 <!-- We can update our `nuxt.config.js` to add `vue-notifications` in the vendor bundle: --> -`nuxt.config.js` を更新して vendor bundle の中に `vue-notifications` を入れます: +そうするには `nuxt.config.js` を更新して vendor というバンドルファイルの設定の中に `vue-notifications` を入れます: ```js module.exports = { @@ -119,13 +119,15 @@ module.exports = { <!-- ## 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. --> -いくつかのプラグインは **ブラウザでのみ** 動作します。`process.BROWSER_BUILD` 変数を使って、そのプラグインがクライアントサイドで動作するか確認することができます。 +プラグインのいくつかは **ブラウザでのみ** 動かしたいとします。その場合は `process.BROWSER_BUILD` 変数を使って、あるプラグインをクライアントサイドで動作させることが可能です。 -Example: +<!-- Example: --> + +例: ```js import Vue from 'vue' @@ -138,4 +140,4 @@ if (process.BROWSER_BUILD) { <!-- 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. --> -もしサーバーサイドでのみライブラリを読み込む必要がある場合は、Webpack が `server.bundle.js` ファイルを作成するときに `true` がセットされる `process.SERVER_BUILD` 変数を使うことができます。 +逆に、サーバーサイドでのみライブラリを読み込む必要がある場合は、`process.SERVER_BUILD` 変数を使うことができます。これは Webpack が `server.bundle.js` ファイルを作成するタイミングで `true` がセットされる変数です。 From 4eb7a9226e1d163d350ab9bc0706592b02f101b0 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 01:05:12 +0900 Subject: [PATCH 014/129] Make ja/guide/assets.md natural Japanese --- ja/guide/assets.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/ja/guide/assets.md b/ja/guide/assets.md index 442ad5935..fc5cd34a5 100644 --- a/ja/guide/assets.md +++ b/ja/guide/assets.md @@ -1,6 +1,6 @@ --- title: アセット -description: Nuxt.js はアセットファイルを配信するために Webpack のローダーとしてデフォルトで vue-loader、file-loader 及び url-loader を使いますが、静的ファイルのためのディレクトリを使うこともできます。 +description: Nuxt.js はアセットファイルを配信するために（デフォルトでは）Webpack のローダーとして vue-loader、file-loader 及び url-loader を使います。しかし Webpack の取り扱う対象としない静的ファイル専用のディレクトリを使うこともできます。 --- <!-- title: Assets --> @@ -8,15 +8,15 @@ description: Nuxt.js はアセットファイルを配信するために Webpack <!-- \> 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.js はアセットファイルを配信するために Webpack のローダーとしてデフォルトで vue-loader、file-loader 及び url-loader を使いますが、静的ファイルのためのディレクトリを使うこともできます。 +> Nuxt.js はアセットファイルを配信するために（デフォルトでは）Webpack のローダーとして vue-loader、file-loader 及び url-loader を使います。しかし Webpack の取り扱う対象としない静的ファイル専用のディレクトリを使うこともできます。 <!-- ## Webpacked --> -## Webpack +## Webpack で取り扱う <!-- 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. --> -デフォルトでは [vue-loader](http://vue-loader.vuejs.org/en/) がスタイルやテンプレートファイルを `css-loader` や Vue テンプレートコンパイラを用いて自動的に処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などの全ての URL はモジュールの依存関係のように解決されます。 +デフォルトでは [vue-loader](http://vue-loader.vuejs.org/en/) は `css-loader` 及び Vue テンプレートコンパイラを用いて、スタイルやテンプレートファイルを処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などのすべての URL はモジュールの依存関係のように解決されます。 <!-- For example, we have this file tree: --> @@ -53,17 +53,17 @@ 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. --> -`.png` は JavaScript ファイルではないため、Nuxt.js は Webpack が PNG ファイルを扱えるように [file-loader](https://github.com/webpack/file-loader) と [url-loader](https://github.com/webpack/url-loader) を使う設定を行います。 +PNG ファイル JavaScript ファイルではないため、Nuxt.js は Webpack が PNG ファイルを扱えるように [file-loader](https://github.com/webpack/file-loader) と [url-loader](https://github.com/webpack/url-loader) を使う設定を行います。 <!-- The benefits of them are: --> -file-loader と url-loader を使うメリット: +file-loader と url-loader の役割: <!-- - `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`. --> -- `file-loader` はアセットファイルをどこにコピーし配置すべきか、また、より良いキャッシングのためにバージョンのハッシュ値を使って、なんというファイル名にすべきかを指定します。 -- `url-loader` はもしファイルサイズが閾値よりも小さければ、ファイルを BASE64 データとして埋め込みます。これにより小さなファイルを取得するための HTTP リクエストの数を減らすことができます。もしファイルサイズが閾値よりも大きければ、自動的に `file-loader` にフォールバックします。 +- `file-loader` はアセットファイルをどこにコピーし配置すべきか、また、ファイル名をどうすべきかを決定します。ファイル名は上手にキャッシュするためにバージョンのハッシュ値を含める等を行います。 +- `url-loader` はもしファイルサイズが閾値よりも小さければ、ファイルの内容を Base64 エンコードして埋め込みます。こうすると小さなファイルを取得するための HTTP リクエストの数を減らすことができます。一方で、もしファイルサイズが閾値よりも大きければ、自動的に `file-loader` にフォールバックします。 <!-- Actually, Nuxt.js default loaders configuration is: --> @@ -92,11 +92,11 @@ file-loader と url-loader を使うメリット: <!-- 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. --> -ファイルサイズが 1KO を下回るファイルはすべて base-64 データとして埋め込まれます。反対に 1KO を上回る画像やフォントは（`.nuxt` ディレクトリ配下の）対応するディレクトリにより良いキャッシングのためのバージョンのハッシュ値を含んだファイル名でコピーされます。 +ファイルサイズが 1KB を下回るファイルはすべて Base64 エンコードされて埋め込まれます。反対に 1KB を上回る画像やフォントは（`.nuxt` ディレクトリ配下の）対応するディレクトリにコピーされます。このときファイル名はうまくキャッシュさせるためにバージョンのハッシュ値を含んだものになります。 <!-- When launching our application with `nuxt`, our template in `pages/index.vue`: --> -アプリケーションを `nuxt` コマンドで起動するとき、`pages/index.vue` 内のテンプレートは下記のようになっていて: +アプリケーションを `nuxt` コマンドで起動するとき、`pages/index.vue` 内のテンプレートは下記のようになっており: ```html <template> From 5b7728aaadb0b00de2090996bad26f74b4d79465 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 01:06:35 +0900 Subject: [PATCH 015/129] Improve a heading --- ja/guide/assets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ja/guide/assets.md b/ja/guide/assets.md index fc5cd34a5..ff8a56219 100644 --- a/ja/guide/assets.md +++ b/ja/guide/assets.md @@ -118,7 +118,7 @@ file-loader と url-loader の役割: <!-- ## Static --> -## 静的なファイル +## Webpack で扱わない静的ファイル <!-- 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. --> From 094b6154eca4481b79c3a527733bf4d8660e124d Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 22:28:54 +0900 Subject: [PATCH 016/129] Translate ja/guide/vuex-store.md --- ja/guide/vuex-store.md | 117 +++++++++++++++++++++++++++++++---------- 1 file changed, 88 insertions(+), 29 deletions(-) diff --git a/ja/guide/vuex-store.md b/ja/guide/vuex-store.md index 6e87670e0..2244a940d 100644 --- a/ja/guide/vuex-store.md +++ b/ja/guide/vuex-store.md @@ -1,25 +1,48 @@ --- -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. +title: Vuex ストア +description: 状態を管理するためにストアを使うことはすべての大規模なアプリケーションにとって重要です。Nuxt.js が Vuex をコアに組み入れたのはそのような理由からです。 --- -> 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. +<!-- 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. --> -## Activate the Store +<!-- \> 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. --> -Nuxt.js will look for the `store` directory, if it exists, it will: +> 状態を管理するためにストアを使うことはすべての大規模なアプリケーションにとって重要です。Nuxt.js が [Vuex](https://github.com/vuejs/vuex) をコアに組み入れたのはそのような理由からです。 -1. Import Vuex -2. Add `vuex` module in the vendors bundle -3. Add the `store` option to the root `Vue` instance. +<!-- ## Activate the Store --> -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 +<!-- Nuxt.js will look for the `store` directory, if it exists, it will: --> -To activate the store with the classic mode, we create the `store/index.js` file and export the store instance: +Nuxt.js は `store` ディレクトが存在するときにはそちらを探しに行きます: + +<!-- 1. Import Vuex --> +<!-- 2. Add `vuex` module in the vendors bundle --> +<!-- 3. Add the `store` option to the root `Vue` instance. --> + +1. Vuex をインポートします +2. `vuex` もモジュールを vendor のバンドルファイルに追加します +3. `store` オプションをルートの `Vue` インスタンスに追加します + +<!-- Nuxt.js lets you have **2 modes of store**, choose the one you prefer: --> + +Nuxt.js では **2つのモードのストア** を持つことができます。いずれか好みのほうを選んでください: + +<!-- - **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) --> + +- **クラシック:** `store/index.js` がストアインスタンスを返します +- **モジュール:** `store` ディレクトリ内のすべての `.js` ファイルが [Namespaced モジュール](http://vuex.vuejs.org/en/modules.html) に変換されます（`index` はルートモジュールとして存在します） + +<!-- ## Classic mode --> + +## クラシックモード + +<!-- To activate the store with the classic mode, we create the `store/index.js` file and export the store instance: --> + +ストアをクラシックモードで有効にするには `store/index.js` ファイルを作成し、ストアインスタンスをエクスポートします: ```js import Vuex from 'vuex' @@ -38,9 +61,13 @@ const store = new Vuex.Store({ export default store ``` -> We don't need to install `vuex` since it's shipped with nuxt.js +<!-- \> We don't need to install `vuex` since it's shipped with nuxt.js --> + +> `vuex` は Nuxt.js によって取り込まれているため、別途インストールする必要はありません + +<!-- We can now use `this.$store` inside our components: --> -We can now use `this.$store` inside our components: +クラシックモードを有効にすると、コンポーネント内で `this.$store` を使うことができます: ```html <template> @@ -48,11 +75,17 @@ We can now use `this.$store` inside our components: </template> ``` -## Modules mode +<!-- ## Modules mode --> + +## モジュールモード + +<!-- \> Nuxt.js lets you have a `store` directory with every file corresponding to a module. --> + +> Nuxt.js では `store` ディレクトリ内にモジュールと対応するファイルを持つことができます。 -> 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: --> -If you want this option, export the state, mutations and actions in `store/index.js` instead of a store instance: +このオプションを使いたいときは、ストアインスタンスの代わりに、`store/index.js` 内のストア、ミューテーション、アクションをエクスポートしてください: ```js export const state = { @@ -66,7 +99,10 @@ export const mutations = { } ``` -Then, you can have a `store/todos.js` file: +<!-- Then, you can have a `store/todos.js` file: --> + +すると次のような `store/todos.js` ファイルを持つことができます: + ```js export const state = { list: [] @@ -88,7 +124,10 @@ export const mutations = { } ``` -The store will be as such: +<!-- The store will be as such: --> + +ストアは下記のようになります: + ```js new Vuex.Store({ state: { counter: 0 }, @@ -121,7 +160,9 @@ new Vuex.Store({ }) ``` -And in your `pages/todos.vue`, using the `todos` module: +<!-- And in your `pages/todos.vue`, using the `todos` module: --> + +そして `pages/todos.vue` 内で `todos` モジュールを下記のように使うことができます: ```html <template> @@ -160,19 +201,33 @@ export default { </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> +<!-- <div class="Alert">You can also have modules by exporting a store instance, you will have to add them manually on your store.</div> --> + +<div class="Alert">ストアインスタンスをエクスポートすることでモジュールを持つこともできます。その際にはモジュールをストアに手動で追加する必要があります。</div> + +<!-- ## The fetch Method --> -## The fetch Method +## fetch メソッド -> 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 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) +fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては data メソッドとよく似ています。 -## The nuxtServerInit Action +<!-- More information about the fetch method: [API Pages fetch](/api/pages-fetch) --> -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. +fetch メソッドについてより深く理解するためには [API Pages fetch](/api/pages-fetch) を参照してください。 -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: +<!-- ## The nuxtServerInit Action --> + +## nuxtServerInit アクション + +<!-- 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. --> + +`nuxtServerInit` というアクションがストア内に定義されているときは、Nuxt.js はそれを context とともに呼び出します（サーバーサイドでのみ）。クライアントサイドに直接渡したいデータがサーバー上にあるときに便利です。 + +<!-- 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: --> + +例えば、サーバーサイドでセッションを持っていて、接続しているユーザーに `req.session.user` を通してアクセスできるとします。認証されたユーザーにストアを渡すために `store/index.js` 下記のように書き換えます: ```js actions: { @@ -184,6 +239,10 @@ actions: { } ``` -> 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. +<!-- \> 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. --> + +> もし Vuex ストアの _モジュール_ モードを使っているなら、（`store/index.js` 内の）プライマリモードのみ、このアクションを受け取ることができます。そこからモジュールのアクションをつなぐ必要があります。 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. + +context は `nuxtServerInit` へ第二引数として渡されます。`context.redirect()` や `context.error()` が除外される点を除いては `data` メソッドや `fetch` メソッドと共通しています。 From c5aefff56687fcde350abdc95a57f15100766523 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 22:46:17 +0900 Subject: [PATCH 017/129] Make ja/guide/vuex-store.md natural --- ja/guide/vuex-store.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/ja/guide/vuex-store.md b/ja/guide/vuex-store.md index 2244a940d..7bfb67bcf 100644 --- a/ja/guide/vuex-store.md +++ b/ja/guide/vuex-store.md @@ -1,6 +1,6 @@ --- title: Vuex ストア -description: 状態を管理するためにストアを使うことはすべての大規模なアプリケーションにとって重要です。Nuxt.js が Vuex をコアに組み入れたのはそのような理由からです。 +description: 状態を管理してくれる Vuex ストアは、あらゆる大規模アプリケーションにとても役に立ちます。Nuxt.js が Vuex をコアに組み入れたのはそのような理由からです。 --- <!-- title: Vuex Store --> @@ -8,7 +8,7 @@ description: 状態を管理するためにストアを使うことはすべて <!-- \> 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. --> -> 状態を管理するためにストアを使うことはすべての大規模なアプリケーションにとって重要です。Nuxt.js が [Vuex](https://github.com/vuejs/vuex) をコアに組み入れたのはそのような理由からです。 +> 状態を管理してくれる Vuex ストアは、あらゆる大規模アプリケーションにとても役に立ちます。Nuxt.js が [Vuex](https://github.com/vuejs/vuex) をコアに組み入れたのはそのような理由からです。 <!-- ## Activate the Store --> @@ -16,25 +16,25 @@ description: 状態を管理するためにストアを使うことはすべて <!-- Nuxt.js will look for the `store` directory, if it exists, it will: --> -Nuxt.js は `store` ディレクトが存在するときにはそちらを探しに行きます: +Nuxt.js は `store` ディレクトが存在するときにはそちらを探索します: <!-- 1. Import Vuex --> <!-- 2. Add `vuex` module in the vendors bundle --> <!-- 3. Add the `store` option to the root `Vue` instance. --> 1. Vuex をインポートします -2. `vuex` もモジュールを vendor のバンドルファイルに追加します +2. `vuex` モジュールを vendor のバンドルファイルに追加します 3. `store` オプションをルートの `Vue` インスタンスに追加します <!-- Nuxt.js lets you have **2 modes of store**, choose the one you prefer: --> -Nuxt.js では **2つのモードのストア** を持つことができます。いずれか好みのほうを選んでください: +Nuxt.js では **2つのモードのストア** があります。どちらか好みのほうを選んで使ってください: <!-- - **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) --> -- **クラシック:** `store/index.js` がストアインスタンスを返します -- **モジュール:** `store` ディレクトリ内のすべての `.js` ファイルが [Namespaced モジュール](http://vuex.vuejs.org/en/modules.html) に変換されます（`index` はルートモジュールとして存在します） +- **クラシックモード:** `store/index.js` がストアインスタンスを返します +- **モジュールモード:** `store` ディレクトリ内のすべての `.js` ファイルが [モジュール](http://vuex.vuejs.org/en/modules.html) に変換されます（`index` はルートモジュールとして存在します） <!-- ## Classic mode --> @@ -85,7 +85,7 @@ export default store <!-- If you want this option, export the state, mutations and actions in `store/index.js` instead of a store instance: --> -このオプションを使いたいときは、ストアインスタンスの代わりに、`store/index.js` 内のストア、ミューテーション、アクションをエクスポートしてください: +このオプションを使いたいときは、ストアインスタンスの代わりに、`store/index.js` 内のストア、ミューテーション、アクションをエクスポートします: ```js export const state = { @@ -101,7 +101,7 @@ export const mutations = { <!-- Then, you can have a `store/todos.js` file: --> -すると次のような `store/todos.js` ファイルを持つことができます: +また、次のような `store/todos.js` ファイルを作成できます: ```js export const state = { @@ -215,7 +215,7 @@ fetch メソッドは、ページがレンダリングされる前に、デー <!-- More information about the fetch method: [API Pages fetch](/api/pages-fetch) --> -fetch メソッドについてより深く理解するためには [API Pages fetch](/api/pages-fetch) を参照してください。 +fetch メソッドについてより深く理解するためには [ページの fetch メソッド API](/api/pages-fetch) を参照してください。 <!-- ## The nuxtServerInit Action --> @@ -223,11 +223,11 @@ fetch メソッドについてより深く理解するためには [API Pages fe <!-- 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. --> -`nuxtServerInit` というアクションがストア内に定義されているときは、Nuxt.js はそれを context とともに呼び出します（サーバーサイドでのみ）。クライアントサイドに直接渡したいデータがサーバー上にあるときに便利です。 +`nuxtServerInit` というアクションがストア内に定義されているときは、Nuxt.js はそれを context とともに呼び出します（ただしサーバーサイドに限ります）。サーバー上に、クライアントサイドに直接渡したいデータがあるときに便利です。 <!-- 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: --> -例えば、サーバーサイドでセッションを持っていて、接続しているユーザーに `req.session.user` を通してアクセスできるとします。認証されたユーザーにストアを渡すために `store/index.js` 下記のように書き換えます: +例えば、サーバーサイドでセッションを持っていて、接続しているユーザーに `req.session.user` を通じてアクセスできるとします。認証されたユーザーにストアを渡すために `store/index.js` 下記のように書き換えます: ```js actions: { @@ -241,8 +241,8 @@ actions: { <!-- \> 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. --> -> もし Vuex ストアの _モジュール_ モードを使っているなら、（`store/index.js` 内の）プライマリモードのみ、このアクションを受け取ることができます。そこからモジュールのアクションをつなぐ必要があります。 +> もし Vuex ストアの _モジュール_ モードを使っているなら、（`store/index.js` 内の）プライマリモードのみ、このアクションを受け取ることができます。そこからモジュールのアクションをつなぐ必要があります。（訳注: 訳に自信なし。原文は 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. +<!-- 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. --> context は `nuxtServerInit` へ第二引数として渡されます。`context.redirect()` や `context.error()` が除外される点を除いては `data` メソッドや `fetch` メソッドと共通しています。 From b9218db2cd6b13b978464e64b308755d860d6b1a Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 22:48:25 +0900 Subject: [PATCH 018/129] Make ja/lang.json natural --- ja/lang.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ja/lang.json b/ja/lang.json index d7f32a139..e12c28e76 100644 --- a/ja/lang.json +++ b/ja/lang.json @@ -12,7 +12,7 @@ "get_started": "はじめる", "github": "Github", "guide": "Guide", - "homepage": "ホームページ", + "homepage": "ホーム", "live_demo": "ライブデモ", "live_edit": "ライブエディット", "twitter": "Twitter", From a71faa7223ff44045af3be7faf777eff60723919 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 23:21:14 +0900 Subject: [PATCH 019/129] Make ja/guide/index.md natural --- ja/guide/index.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/ja/guide/index.md b/ja/guide/index.md index c2967d12b..b4f2ba85e 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -1,6 +1,6 @@ --- title: はじめに -description: "2016年10月25日 zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。そしてその発表から数時間後、Next.js と同じやり方で Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。" +description: "2016年10月25日、zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。そしてその発表から数時間後、Next.js と同じやり方で、しかし今度は Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。" --- <!-- title: Introduction --> @@ -8,7 +8,7 @@ description: "2016年10月25日 zeit.co のチームが React アプリケーシ <!-- \> 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. --> -> 2016年10月25日、[zeit.co](https://zeit.co/) のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク [Next.js](https://zeit.co/blog/next) を発表しました。そしてその発表からわずか数時間後、Next.js と同じやり方で [Vue.js](https://vuejs.org) をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち **Nuxt.js** の誕生です。 +> 2016年10月25日、[zeit.co](https://zeit.co/) のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク [Next.js](https://zeit.co/blog/next) を発表しました。そしてその発表からわずか数時間後、Next.js と同じやり方で、しかし今度は [Vue.js](https://vuejs.org) をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち **Nuxt.js** の誕生です。 <!-- ## What is Nuxt.js ? --> @@ -20,15 +20,15 @@ Next.js とはユニバーサルな Vue.js アプリケーションを構築す <!-- Its main scope is **UI rendering** while abstracting away the client/server distribution. --> -クライアントサイドとサーバーサイドのディストリビューションを抽象化する間の **UI レンダリング** に焦点を当てています。 +クライアントサイドとサーバーサイドのディストリビューションを抽象化している間の **UI レンダリング** に焦点を当てています。 <!-- 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. --> -私たちのゴールは、あるプロジェクトの基礎として利用したり、あるいは既に進行中の Node.js ベースのプロジェクトに追加するために十分に柔軟なフレームワークを作成することです。 +私たちのゴールは、あるプロジェクトの基礎として利用したり、あるいは既に進行中の Node.js ベースのプロジェクトに追加できる、柔軟なフレームワークを作成することです。 <!-- Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. --> -Nuxt.js は **サーバーサイドレンダリング** する Vue.js アプリケーションの開発をもっと楽しくするために必要な全ての設定をあらかじめ用意しています。 +Nuxt.js は **サーバーサイドレンダリング** する Vue.js アプリケーションの開発をもっと楽しくするために必要な設定を用意しています。 <!-- 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. --> @@ -37,7 +37,7 @@ Nuxt.js は **サーバーサイドレンダリング** する Vue.js アプリ <!-- 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. --> -Nuxt.js はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けするたくさんの機能を備えています。例えば、同期でのデータをやり取りや、ミドルウェアやレイアウトなどです。 +Nuxt.js はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けする、たくさんの機能を備えています。例えば、非同期でのデータをやり取りや、ミドルウェアやレイアウトなどです。 <!-- ## How it Works --> @@ -51,7 +51,7 @@ Nuxt.js はリッチなウェブアプリケーションを構築するために - [Vue 2](https://github.com/vuejs/vue) - [Vue-Router](https://github.com/vuejs/vue-router) -- [Vuex](https://github.com/vuejs/vuex)（[store option](/guide/vuex-store) を利用しているときに限ります） +- [Vuex](https://github.com/vuejs/vuex)（[Vuex ストアのオプション](/guide/vuex-store) を利用しているときに限ります） - [Vue-Meta](https://github.com/declandewet/vue-meta) <!-- A total of only **28kb min+gzip** (31kb with vuex). --> @@ -60,7 +60,7 @@ Nuxt.js はリッチなウェブアプリケーションを構築するために <!-- 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. --> -また、バンドルやコード分割及びミニファイするために [Webpack](https://github.com/webpack/webpack) を [vue-Loader](https://github.com/vuejs/vue-loader) と [babel-loader](https://github.com/babel/babel-loader) と合わせて使います。 +また、ソースコードのバンドルや分割及びミニファイするために [Webpack](https://github.com/webpack/webpack) を使います。[vue-Loader](https://github.com/vuejs/vue-loader) と [babel-loader](https://github.com/babel/babel-loader) も合わせて使います。 <!-- ## Features --> @@ -78,10 +78,10 @@ Nuxt.js はリッチなウェブアプリケーションを構築するために <!-- - Pre-processor: SASS, LESS, Stylus, etc --> - Vue ファイルで記述できること -- コードの自動分割 +- コードを自動的に分割すること - サーバーサイドレンダリング - 非同期データを伴うパワフルなルーティング -- 静的なファイル配信 +- 静的なファイルの配信 - ES6/ES7 のトランスパイレーション - JS と CSS のバンドル及びミニファイ - Head タグ（訳注: メタタグ）の管理 @@ -94,7 +94,7 @@ Nuxt.js はリッチなウェブアプリケーションを構築するために <!-- 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-link>` を通して遷移したときに Nuxt.js によって何が呼ばれるかを表しています。 +下の図は、サーバーサイドで処理が実行されたときや、ユーザーが `<nuxt-link>` を通して遷移したときに、Nuxt.js によって何が呼び出されるかを表しています: ![nuxt-schema](/nuxt-schema.png) @@ -108,15 +108,15 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- When launching `nuxt`, it will start a development server with hot-reloading and vue-server-renderer configured to automatically server-render your application. --> -`nuxt` コマンドを実行すると、ホットリローディング及び自動的にアプリケーションをサーバーサイドレンダリングするよう設定された vue-server-render を備えた開発サーバーが起動されます。 +`nuxt` コマンドを実行すると開発サーバーが起動されます。このサーバーはホットリローディング及び vue-server-render を備えており、vue-server-render は自動的にアプリケーションをサーバーサイドレンダリングするよう設定されています。 <!-- Take a look at [the commands](/guide/commands) to learn more about it. --> -コマンドについてより深く学ぶには [コマンド](/guide/commands) を参照してください。 +コマンドについてより深く理解するには [コマンド](/guide/commands) を参照してください。 <!-- 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. --> -既にサーバーがあるなら Nuxt.js をミドルウェアとして追加ことができます。ユニバーサルなウェブアプリケーションを開発するために Nuxt.js を利用するにあたって何も制限はありません。[Using Nuxt.js Programmatically](/api/nuxt) ガイドを見てみてください。 +既にサーバーがあるならば Nuxt.js をミドルウェアとして追加ことができます。ユニバーサルなウェブアプリケーションを開発するために Nuxt.js を利用するにあたって何も制限はありません。[Nuxt.js](/api/nuxt) ガイドを見てみてください。 <!-- ## Static Generated --> @@ -128,11 +128,11 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- When building your application it will generate the HTML of every of your routes to store it in a file. --> -`nuxt generate` はアプリケーションをビルドする際に、すべてのルーティングの状態をファイル中に保存した HTML を生成します。 +`nuxt generate` はアプリケーションをビルドする際に、各ルートごとの HTML を生成します。 <!-- Example: --> -例: +例えば、下記のファイル群がある場合: ```bash -| pages/ @@ -142,7 +142,7 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- Will generate: --> -下記を生成します: +次のファイルが生成されます: ``` -| dist/ @@ -153,7 +153,7 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- 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: --> @@ -167,7 +167,7 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- 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: --> -私たちは [docs リポジトリ](https://github.com/nuxt/docs) を更新するたびに毎回手動でアプリケーションを生成したくなかったので、AWS Lambda funtion から生成機能を実行しています: +私たちは [docs リポジトリ](https://github.com/nuxt/docs) を更新するたびに毎回手動でアプリケーションを生成するのは面倒だったので、AWS Lambda funtion から生成機能を実行しています: <!-- 1. Clone the [nuxtjs.org repository](https://github.com/nuxt/nuxtjs.org) --> <!-- 2. Install the dependencies via `npm install` --> @@ -185,4 +185,4 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- 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! --> -さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーで複数のインスタンス及びキャッシュを持つ必要がなくなるのです！ +さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーでいろいろなインスタンスを起動したり、キャッシュを持ったりする必要がなくなるのです！ From 64fd61c07df77a71f1f31d7192fb139d60fe74bf Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 24 Feb 2017 23:27:02 +0900 Subject: [PATCH 020/129] Make ja/guide/contribution-guide.md natural --- ja/guide/contribution-guide.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ja/guide/contribution-guide.md b/ja/guide/contribution-guide.md index 976473294..76a69f0f1 100644 --- a/ja/guide/contribution-guide.md +++ b/ja/guide/contribution-guide.md @@ -1,6 +1,6 @@ --- title: 貢献ガイド -description: "Nuxt.js へのどんな貢献も大歓迎します！" +description: Nuxt.js への貢献はどんなものでも大歓迎です！ --- <!-- title: Contribution Guide --> @@ -8,7 +8,7 @@ description: "Nuxt.js へのどんな貢献も大歓迎します！" <!-- \> Any contribution to Nuxt.js is more than welcome! --> -Nuxt.js へのどんな貢献も大歓迎します！ +Nuxt.js への貢献はどんなものでも大歓迎です！ <!-- ## Reporting Issues --> @@ -24,7 +24,7 @@ Nuxt.js へのどんな貢献も大歓迎します！ <!-- 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. --> -たとえそれが単にタイポの修正であっても、ぜひプルリクエストを送ってください。どんな重要な改善であっても、誰かが手を動かし始める前に [GitHub issue](https://github.com/nuxt/nuxt.js/issues) に記載してください。 +たとえそれが単にタイプミスの修正であっても、ぜひプルリクエストを送ってください。どんな重要な改善であっても、誰かが手を動かし始める前に [GitHub issue](https://github.com/nuxt/nuxt.js/issues) に記載してください。 <!-- ### Convention --> From 430545ea8cd4269749adf238c1d48b185b1d78f0 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 19:09:05 +0900 Subject: [PATCH 021/129] Translate ja/guide/commands.md --- ja/guide/commands.md | 105 ++++++++++++++++++++++++++++++++----------- 1 file changed, 79 insertions(+), 26 deletions(-) diff --git a/ja/guide/commands.md b/ja/guide/commands.md index aab7fce28..7c473353b 100644 --- a/ja/guide/commands.md +++ b/ja/guide/commands.md @@ -1,20 +1,36 @@ --- -title: Commands -description: Nuxt.js comes with a set of useful commands, both for development and production purpose. +title: コマンド +description: Nuxt.js はひととおりの便利コマンドを備えています。開発用途のものもプロダクション用途のものもあります。 --- -> Nuxt.js comes with a set of useful commands, both for development and production purpose. +<!-- title: Commands --> +<!-- description: Nuxt.js comes with a set of useful commands, both for development and production purpose. --> -## List of Commands +<!-- \> Nuxt.js comes with a set of useful commands, both for development and production purpose. --> -| Command | Description | +> Nuxt.js はひととおりの便利コマンドを備えています。開発用途のものもプロダクション用途のものもあります。 + +<!-- ## 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). | --> + +| コマンド | 説明 | |---------|-------------| -| 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). | +| nuxt | 開発サーバーを [localhost:3000](http://localhost:3000) で起動します。このサーバーはホットリローディングします。 | +| nuxt build | アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします。 | +| nuxt start | プロダクションモードでサーバーを起動します（`nuxt build` 後に実行してください） | +| nuxt generate | アプリケーションをビルドして、ルートごとに HTML ファイルを生成します（静的ファイルのホスティングに用います） | + +<!-- You should put these commands in the `package.json`: --> -You should put these commands in the `package.json`: +これらのコマンドを `package.json` に書いておくと良いでしょう: ```json "scripts": { @@ -25,32 +41,55 @@ You should put these commands in the `package.json`: } ``` -Then, you can launch your commands via `npm run <command>` (example: `npm run dev`). +<!-- Then, you can launch your commands via `npm run <command>` (example: `npm run dev`). --> + +そうすれば、`npm run <command>` 経由で Nuxt.js のコマンドを実行することができます（例: `npm run dev`） -## Development Environment +<!-- ## Development Environment --> -To launch Nuxt in development mode with the hot reloading: +## 開発環境 + +<!-- To launch Nuxt in development mode with the hot reloading: --> + +Nuxt.js をホットリローディングする開発モードで起動するには: + +<!-- ```bash --> +<!-- nuxt --> +<!-- // OR --> +<!-- npm run dev --> +<!-- ``` --> ```bash nuxt -// OR +// または npm run dev ``` -## Production Deployment +<!-- ## Production Deployment --> + +## プロダクション環境へのデプロイ + +<!-- Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. --> -Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. +Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます: サーバーサイドレンダリングするモードと静的なファイルを生成するモードです。 -### Server Rendered Deployment +<!-- ### Server Rendered Deployment --> -To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands: +### サーバーサイドレンダリングモードのデプロイ + +<!-- To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands: --> + +デプロイするために、nuxt コマンドを実行するのではなく、前もってビルドしたいと思われるでしょう。そのような理由から、ビルドとサーバー起動は分離されています: ```bash nuxt build nuxt start ``` -The `package.json` like follows is recommended: +<!-- The `package.json` like follows is recommended: --> + +`package.json` では下記のように記述することが推奨されています: + ```json { "name": "my-app", @@ -65,20 +104,34 @@ The `package.json` like follows is recommended: } ``` -Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. +<!-- Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. --> + +メモ: `.npmignore` または `.gitignore` 内に `.nuxt` を書いておくことをお勧めします。 + +<!-- ### Static Generated Deployment --> -### Static Generated Deployment +### 静的に生成されたファイルのデプロイ -Nuxt.js gives you the possibility to host your web application on any static hosting. +<!-- Nuxt.js gives you the possibility to host your web application on any static hosting. --> -To generate our web application into static files: +Nuxt.js により、静的なファイルのホスティングサービスで、ウェブアプリケーションをホストすることができます。 + +<!-- 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. +<!-- It will create a `dist` folder with everything inside ready to be deployed on a static hosting. --> + +`dist` フォルダが作成され、その中に静的なファイルのホスティングサービスにデプロイされるべきものがすべて入ります。 + +<!-- 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. --> + +プロジェクトで [動的なルーティング](/guide/routing#dynamic-routes) を使っている場合は、Nuxt.js に動的なルーティングを生成させるために [generate 設定](/api/configuration-generate) に目を通してください。 -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> --> -<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> +<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは、[data()](/guide/async-data#the-data-method) や [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api#context) は `req` 及び `res` を持ちません。</div> From 00d11a2200aef5abf5ff4c9c27583613895b8e98 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 19:13:33 +0900 Subject: [PATCH 022/129] Make ja/guide/commands.md natural --- ja/guide/commands.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ja/guide/commands.md b/ja/guide/commands.md index 7c473353b..c35da435e 100644 --- a/ja/guide/commands.md +++ b/ja/guide/commands.md @@ -1,6 +1,6 @@ --- title: コマンド -description: Nuxt.js はひととおりの便利コマンドを備えています。開発用途のものもプロダクション用途のものもあります。 +description: Nuxt.js は便利コマンドのセットを備えています。開発用途のものもプロダクション用途のものも含まれています。 --- <!-- title: Commands --> @@ -8,7 +8,7 @@ description: Nuxt.js はひととおりの便利コマンドを備えていま <!-- \> Nuxt.js comes with a set of useful commands, both for development and production purpose. --> -> Nuxt.js はひととおりの便利コマンドを備えています。開発用途のものもプロダクション用途のものもあります。 +> Nuxt.js は便利コマンドのセットを備えています。開発用途のものもプロダクション用途のものも含まれています。 <!-- ## List of Commands --> @@ -79,7 +79,7 @@ Nuxt.js ではアプリケーションをデプロイするための 2つのモ <!-- To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands: --> -デプロイするために、nuxt コマンドを実行するのではなく、前もってビルドしたいと思われるでしょう。そのような理由から、ビルドとサーバー起動は分離されています: +デプロイするために、nuxt コマンドを実行するのではなく、前もってビルドしておきたいと思われるでしょう。そのような理由から、ビルドコマンドとサーバー起動のコマンドは分かれています: ```bash nuxt build @@ -106,7 +106,7 @@ nuxt start <!-- Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. --> -メモ: `.npmignore` または `.gitignore` 内に `.nuxt` を書いておくことをお勧めします。 +メモ: `.npmignore` または `.gitignore` 内に `.nuxt` を書いておくと良いでしょう。 <!-- ### Static Generated Deployment --> @@ -114,7 +114,7 @@ nuxt start <!-- Nuxt.js gives you the possibility to host your web application on any static hosting. --> -Nuxt.js により、静的なファイルのホスティングサービスで、ウェブアプリケーションをホストすることができます。 +Nuxt.js を使うと、どんな静的なファイルのホスティングサービスでも、ウェブアプリケーションをホストすることができます。 <!-- To generate our web application into static files: --> @@ -134,4 +134,4 @@ npm run generate <!-- <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> --> -<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは、[data()](/guide/async-data#the-data-method) や [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api#context) は `req` 及び `res` を持ちません。</div> +<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは、[data()](/guide/async-data#the-data-method) や [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api#context) は `req` 及び `res` を持たなくなります。</div> From 1db63435317dd89da165d6c3a2a94301cf032b26 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 19:17:17 +0900 Subject: [PATCH 023/129] Improve ja/guide/index.md --- ja/guide/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/guide/index.md b/ja/guide/index.md index b4f2ba85e..36e44342e 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -124,7 +124,7 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- The big innovation of nuxt.js comes here: `nuxt generate` --> -`nuxt generate` という Nuxt.js の大きなイノベーションがやってきます。 +Nuxt.js による大きなイノベーションがやってきました。それが `nuxt generate` です。 <!-- When building your application it will generate the HTML of every of your routes to store it in a file. --> @@ -185,4 +185,4 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- 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! --> -さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーでいろいろなインスタンスを起動したり、キャッシュを持ったりする必要がなくなるのです！ +さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーでいろいろなインスタンスを起動したり、キャッシュを持ったりする必要がもうないのです！ From 41fc72a191ce171b89628401bcb3f3e5b25a1611 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 19:38:34 +0900 Subject: [PATCH 024/129] Make ja/guide/installation.md natural --- ja/guide/installation.md | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/ja/guide/installation.md b/ja/guide/installation.md index 3eb79558f..75ee5510a 100644 --- a/ja/guide/installation.md +++ b/ja/guide/installation.md @@ -1,6 +1,6 @@ --- title: インストール -description: Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. +description: Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存ライブラリは `nuxt` だけです。 --- <!-- title: Installation --> @@ -8,7 +8,7 @@ description: Nuxt.js is really easy to get started with. A simple project only n <!-- \> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. --> -Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要なものは `nuxt` だけです。 +Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存ライブラリは `nuxt` だけです。 <!-- ## Using Nuxt.js starter template --> @@ -16,7 +16,7 @@ Nuxt.js はとても簡単に始められます。シンプルなプロジェク <!-- To start quickly, the Nuxt.js team has created a [starter template](https://github.com/nuxt/starter). --> -素早くスタートできるようにするため、Nuxt.js チームは [スターターテンプレート](https://github.com/nuxt/starter) を作りました。 +素早くスタートできるようにするため、Nuxt.js チームは [スターターテンプレート](https://github.com/nuxt/starter) を用意しました。 <!-- [Download the .zip](https://github.com/nuxt/starter/archive/source.zip) starter template or install it with vue-cli: --> @@ -49,11 +49,11 @@ $ npm run dev <!-- The application is now running on http://localhost:3000 --> -するとアプリケーションは http://localhost:3000 で動きます。 +するとアプリケーションは 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> --> -<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません</p> +<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません</p> <!-- To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). --> @@ -65,7 +65,7 @@ $ npm run dev <!-- 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: --> -Nuxt.js アプリケーションをスクラッチから作ることもとても簡単で、必要なものは *1つのファイルと 1つのディレクトリ* だけです。アプリケーションで動かす空のディレクトリを作りましょう: +Nuxt.js アプリケーションをスクラッチから作ることもとても簡単で、必要なものは *1つのファイルと 1つのディレクトリ* だけです。まずはアプリケーションで動かす空のディレクトリを作りましょう: ```bash $ mkdir <project-name> @@ -76,11 +76,13 @@ $ cd <project-name> *メモ: `<project-name>` の箇所は置き換えてください。* -### The package.json +<!-- ### The package.json --> + +### package.json <!-- The project needs a `package.json` file to specify how to start `nuxt`: --> -`nuxt` をどのように起動するかを指定するために `package.json` ファイルが必要です。 +`nuxt` コマンドを使うように指定する `package.json` ファイルが必要です（訳注: Nuxt.js は開発サーバーを起動する `nuxt` コマンドを用意しています）: ```json { @@ -93,7 +95,7 @@ $ cd <project-name> <!-- `scripts` will launch Nuxt.js via `npm run dev`. --> -`npm run dev` すると `scripts` が Nuxt.js を起動させます。 +上のように書いておけば `npm run dev` で Nuxt.js を起動できます。 <!-- ### Installing `nuxt` --> @@ -101,7 +103,7 @@ $ cd <project-name> <!-- Once the `package.json` has been created, add `nuxt` to the project via NPM: --> -一旦 `package.json` が作成されると、NPM によってプロジェクトに `nuxt` が追加されます: +`package.json` を作成した後すぐに、`nuxt` を NPM 経由でプロジェクト追加しましょう: ```bash npm install --save nuxt @@ -113,7 +115,7 @@ npm install --save nuxt <!-- Nuxt.js will transform every `*.vue` file inside the `pages` directory as a route for the application. --> -Nuxt.js は `pages` ディレクトリ内の全ての `*.vue` ファイルを、ファイルごとにアプリケーションのひとつのルートとして変換します。 +Nuxt.js は `pages` ディレクトリ内の `*.vue` ファイルについて、各ファイルがアプリケーションのひとつのルートに対応するものとして変換します。 <!-- Create the `pages` directory: --> From 56e3995dfa5eea5057940612aef89869b896ae54 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 20:49:50 +0900 Subject: [PATCH 025/129] Make ja/guide/directory-structure.md natural --- ja/guide/directory-structure.md | 38 ++++++++++++++++----------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md index f648e0365..2f0fff11c 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -16,7 +16,7 @@ description: デフォルトの Nuxt.js アプリケーションの構造は、 <!-- ### The Assets Directory --> -### アセットディレクトリ +### assets ディレクトリ <!-- The `assets` directory contains your un-compiled assets such as LESS, SASS, or JavaScript. --> @@ -24,19 +24,19 @@ description: デフォルトの Nuxt.js アプリケーションの構造は、 <!-- [More documentation about Assets integration](/guide/assets) --> -アセットファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/assets) を参照してください。 +アセットの取り扱いについてより深く理解するには [アセットに関するドキュメント](/guide/assets) を参照してください。 <!-- ### The Components Directory --> -### コンポーネントディレクトリ +### components ディレクトリ <!-- The `components` directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components. --> -`components` ディレクトリには Vue.js のコンポーネントファイルを入れます。Nuxt.js はそれらのコンポーネントの data メソッドに過給しません（訳に自信なし。原文は Nuxt.js doesn't supercharge the data method on these components.） +`components` ディレクトリには Vue.js のコンポーネントファイルを入れます。Nuxt.js は `components` ディレクトリ内のコンポーネントの data メソッドについては手を加えません。 <!-- ### The Layouts Directory --> -### レイアウトディレクトリ +### layouts ディレクトリ <!-- The `layouts` directory contains your Application Layouts. --> @@ -48,7 +48,7 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Layouts integration](/guide/views#layouts) --> -レイアウトファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/views#layouts) を参照してください。 +レイアウトの取り扱いついてより深く理解するには [レイアウトに関するドキュメント](/guide/views#layouts) を参照してください。 <!-- ### The Middleware Directory --> @@ -58,11 +58,11 @@ _Coming soon_ <!-- ### The Pages Directory --> -### ページディレクトリ +### pages ディレクトリ <!-- 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. --> -`pages` ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内の全ての `.vue` ファイルを読み込み、アプリケーションのルーターを作成します。 +`pages` ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内のすべての `.vue` ファイルを読み込み、アプリケーションのルーターを作成します。 <!-- _This directory can not be renamed._ --> @@ -70,11 +70,11 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Pages integration](/guide/views) --> -ページファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/views) を参照してください。 +ページの取り扱いについてより深く理解するには [ページに関するドキュメント](/guide/views) を参照してください。 <!-- ### The Plugins Directory --> -### プラグインディレクトリ +### plugins ディレクトリ <!-- The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. --> @@ -82,11 +82,11 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Plugins integration](/guide/plugins) --> -プラグインの統合についてより深く理解するには [こちらのドキュメント](/guide/plugins) を参照してください。 +プラグインについてより深く理解するには [プラグインに関するドキュメント](/guide/plugins) を参照してください。 <!-- ### The Static Directory --> -### スタティックディレクトリ +### static ディレクトリ <!-- The `static` directory contains your static files. Each files inside this directory is mapped to /. --> @@ -102,15 +102,15 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Static integration](/guide/assets#static) --> -静的なファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/assets#static) を参照してください。 +静的なファイルの取り扱いについてより深く理解するには [静的なファイルに関するドキュメント](/guide/assets#static) を参照してください。 <!-- ### The Store Directory --> -### ストアディレクトリ +### store ディレクトリ <!-- 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. --> -`store` ディレクトリには [Vuex Store](http://vuex.vuejs.org) のファイルを入れます。Vuex Store は Nuxt.js フレームワークではオプションとして実装されています。このディレクトリ内に `index.js` ファイルを作成すると、Nuxt.js フレームワーク内でこのオプションが自動的に有効になります。 +`store` ディレクトリには [Vuex ストア](http://vuex.vuejs.org) のファイルを入れます。Vuex ストアは Nuxt.js フレームワークではオプションとして実装されています。このディレクトリ内に `index.js` ファイルを作成すると、Nuxt.js フレームワーク内でこのオプションが自動的に有効になります。 <!-- _This directory can not be renamed._ --> @@ -118,7 +118,7 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Store integration](/guide/vuex-store) --> -ストアファイルの統合についてより深く理解するには [こちらのドキュメント](/guide/vuex-store) を参照してください。 +ストアの取り扱いについてより深く理解するには [ストアに関するドキュメント](/guide/vuex-store) を参照してください。 <!-- ### The nuxt.config.js File --> @@ -134,7 +134,7 @@ _このファイル名は変更できません。_ <!-- [More documentation about nuxt.config.js integration](/guide/configuration) --> -nuxt.config.js についてより深く理解するには [こちらのドキュメント](/guide/configuration) を参照してください。 +nuxt.config.js についてより深く理解するには [nuxt.config.js に関するドキュメント](/guide/configuration) を参照してください。 <!-- ### The package.json File --> @@ -181,5 +181,5 @@ _このファイル名は変更できません。_ | エイリアス | 使い方 | 説明 | |-------|------|--------------| -| ~store | `const store = require('~store')` | `vuex` ストアのインスタンスをインポートします | -| ~router | `const router = require('~router')`| `vue-router` のインスタンスをインポートします | +| ~store | `const store = require('~store')` | `vuex` ストアのインスタンスをインポートします。 | +| ~router | `const router = require('~router')`| `vue-router` のインスタンスをインポートします。 | From 9360a078d6c5a70fef1f54d2fab47fb05b2a1698 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 21:06:00 +0900 Subject: [PATCH 026/129] Make ja/guide/configuration.md natural --- ja/guide/configuration.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/ja/guide/configuration.md b/ja/guide/configuration.md index 15250af2a..6a2aee2be 100644 --- a/ja/guide/configuration.md +++ b/ja/guide/configuration.md @@ -1,6 +1,6 @@ --- title: 設定 -description: Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。しかし nuxt.config.js で設定を上書きすることができます。 +description: Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしていますが nuxt.config.js で設定を上書きすることができます。 --- <!-- title: Configuration --> @@ -8,13 +8,13 @@ description: Nuxt.js ではデフォルトの設定でほとんどのユース <!-- \> The Nuxt.js default configuration covers most of usages. However, the nuxt.config.js file lets you overwrite it. --> -> Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。しかし nuxt.config.js で設定を上書きすることができます。 +> Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしていますが nuxt.config.js で設定を上書きすることができます。 ### 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 --> -このオプションで、アプリケーションのバンドルファイルのサイズを削減するために生成される vendor.bundle.js ファイル内にモジュールを追加できます。外部のモジュールを使うときに役に立ちます。 +このオプションで vendor.bundle.js ファイルにモジュールを追加できます。vendor.bundle.js は app バンドルファイルのサイズを削減するために生成されるものです。外部のモジュールを使うときに役立ちます。 <!-- [Documentation about build integration](/api/configuration-build) --> @@ -66,6 +66,8 @@ description: Nuxt.js ではデフォルトの設定でほとんどのユース このオプションで、Nuxt.js が HTML ファイルに変換するアプリケーション内の動的なルーティングのためのパラメータを指定できます。（訳に自信なし。原文は This option lets you to define each params value for every dynamic routes in your application that Nuxt.js transforms into HTML files.） +このオプションで、アプリケーション内の動的なルーティングごとにパラメータを指定できます。Nuxt.js はそれらのパラメータを変換して HTML ファイルに入れます。 + <!-- [Documentation about generate integration](/api/configuration-generate) --> [generate オプションに関するドキュメント](/api/configuration-generate) @@ -124,7 +126,7 @@ description: Nuxt.js ではデフォルトの設定でほとんどのユース <!-- This option lets you define the source directory of your nuxt.js application. --> -このオプションで、Nuxt.js のソースディレクトリを指定できます。 +このオプションで、アプリケーションのソースディレクトリを指定できます。 <!-- [Documentation about srcDir integration](/api/configuration-srcdir) --> @@ -134,7 +136,7 @@ description: Nuxt.js ではデフォルトの設定でほとんどのユース <!-- This option lets you define the default properties of the pages transitions. --> -このオプションで、ページ間の遷移のデフォルト設定を指定できます。 +このオプションで、ページ間のトランジションのデフォルト設定を指定できます。 <!-- [Documentation about transition integration](/api/configuration-transition) --> From f792a706152c4b80fd63bd583ab455f2ec8ff7d2 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 21:18:44 +0900 Subject: [PATCH 027/129] Make ja/guide/routing.md natural --- ja/guide/directory-structure.md | 2 +- ja/guide/routing.md | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md index 2f0fff11c..ffb40288f 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -52,7 +52,7 @@ _このディレクトリ名は変更できません。_ <!-- ### The Middleware Directory --> -### ミドルウェアディレクトリ +### middleware ディレクトリ _Coming soon_ diff --git a/ja/guide/routing.md b/ja/guide/routing.md index 0e31539a8..18734dbc5 100644 --- a/ja/guide/routing.md +++ b/ja/guide/routing.md @@ -58,7 +58,7 @@ router: { <!-- To define a dynamic route with a param, you need to define a .vue file OR a directory **prefixed by an underscore**. --> -パラメータを使って動的なルーティングを定義するには、.vue ファイル名またはディレクトリ名に **アンダースコアのプレフィックス** を付ける必要があります。 +パラメータを使って動的なルーティングを定義するには .vue ファイル名またはディレクトリ名に **アンダースコアのプレフィックス** を付ける必要があります。 <!-- This file tree: --> @@ -107,7 +107,7 @@ router: { <!-- 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. --> -`user-id` と名付けられたルートに `:id?` というパスがありますが、これはこの `:id` が必須ではないことを表します。もし必須にしたい場合は `users` ディレクトリ内に `index.vue` ファイルを作成してください（訳注: `users/_id` ディレクトリ内に `index.vue` ファイルを作成するのでは？） +`user-id` と名付けられたルートに `:id?` というパスがありますが、これはこの `:id` が必須ではないことを表します。もし必須にしたい場合は `users/_id` ディレクトリ内に `index.vue` ファイルを作成してください。 <!-- ### Validate Route params --> @@ -208,7 +208,7 @@ router: { <!-- This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents. --> -このシナリオはあまり追加すべきではないのですが、Nuxt.js では動的な親ルーティングの中に動的な子ルーティングを持つことが可能です（訳注: 前半部分がうまく訳せませんでした。原文は This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents.） +あまり頻繁に使うべきではありませんが、Nuxt.js では動的な親ルーティングの中に動的な子ルーティングを持つことが可能です。 <!-- This file tree: --> @@ -287,7 +287,7 @@ Nuxt.js では [<transition>](http://vuejs.org/v2/guide/transitions.html#T <!-- 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. --> -アプリケーションの全てのページでフェードさせるトランジションを定義には、ルーティング全体に適用されている CSS ファイルが必要です。まずは `assets` ディレクトリ内にファイルを作成するところから始めます: +アプリケーションのすべてのページでフェードさせるトランジションを定義には、ルーティング全体に適用されている CSS ファイルが必要です。まずは `assets` ディレクトリ内にファイルを作成するところから始めます: <!-- Our global css in `assets/main.css`: --> @@ -316,7 +316,7 @@ module.exports = { <!-- More information about the transition key: [API Configuration transition](/api/pages-transition) --> -トランジションについてより深く理解したい場合は [トランジションを設定する API](/api/pages-transition) を参照してください。 +トランジションについてより深く理解したい場合は [トランジション設定 API](/api/pages-transition) を参照してください。 <!-- ### Page Settings --> @@ -418,7 +418,7 @@ module.exports = { <!-- The `stats` middleware will be called for every route changes. --> -`stats` ミドルウェアは全てのルート変更時に呼び出されるようになります。 +`stats` ミドルウェアはすべてのルート変更時に呼び出されるようになります。 <!-- To see a real-life example using the middleware, please see [example-auth0](https://github.com/nuxt/example-auth0) on GitHub. --> From 197b3ba29889beea457c503275e42e26d868869b Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 21:31:04 +0900 Subject: [PATCH 028/129] Make ja/guide/views.md natural --- ja/guide/views.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ja/guide/views.md b/ja/guide/views.md index 414577bc5..95c69838d 100644 --- a/ja/guide/views.md +++ b/ja/guide/views.md @@ -1,6 +1,6 @@ --- title: ビュー -description: ビューセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なこと全てを説明します（ページ、レイアウト、HTML の head タグのメタ情報などを含みます） +description: このセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なことすべてを説明します（ページ、レイアウト、HTML の head タグのメタ情報などを含みます） --- <!-- title: Views --> @@ -8,7 +8,7 @@ description: ビューセクションでは Nuxt.js アプリケーションの <!-- \> 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) --> -> ビューセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なこと全てを説明します（ページ、レイアウト、HTML の head タグのメタ情報などを含みます） +> このセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なことすべてを説明します（ページ、レイアウト、HTML の head タグのメタ情報などを含みます） <!-- ## Pages --> @@ -16,7 +16,7 @@ description: ビューセクションでは Nuxt.js アプリケーションの <!-- 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. --> -全てのページコンポーネントは Vue コンポーネントですが、Nuxt.js はユニバーサルなアプリケーションを最も簡単なやり方で開発することを可能にために、特別なキーを追加します。 +すべてのページコンポーネントは Vue コンポーネントですが、Nuxt.js はユニバーサルなアプリケーションを最も簡単なやり方で開発することを可能にために、特別なキーを追加します。 <!-- ```html --> <!-- <template> --> @@ -89,9 +89,9 @@ export default { | 属性 | 説明 | |-----------|-------------| -| data | 最も重要なキーであり [Vue data](https://vuejs.org/v2/api/#Options-Data) と同じ意義を持っています。しかし非同期に動作し、また引数として context を受け取ります。どのように動作するかを知るには [非同期データに関するドキュメント](/guide/async-data) を参照してください。 | +| data | 最も重要なキーであり [Vue.js の data オプション](https://vuejs.org/v2/api/#Options-Data) と同じ意義を持っています。しかし（訳注: Nuxt.js が data に手を加えているため）非同期に動作し、また引数として context を受け取ります。どのように動作するかを知るには [非同期データに関するドキュメント](/guide/async-data) を参照してください。 | | fetch | ページがレンダリングされる前に、データをストアに入れるために使います。コンポーネントのデータをセットすること以外は data メソッドと似ています。[ページのフェッチ API に関するドキュメント](/api/pages-fetch) を参照してください。 | -| head | 現在のページの特定のメタタグを設定します。[ページの head API に関するドキュメント](/api/pages-head) を参照してください。 | +| head | 現在のページの特定のメタタグを設定します。[ページの head API](/api/pages-head) を参照してください。 | | layout | `layouts` ディレクトリ内のレイアウトを指定します。[ページのレイアウト API に関するドキュメント](/api/pages-layout) を参照してください。 | | transition | ページに特定のトランジションを設定します。[ページのトランジション API に関するドキュメント](/api/pages-transition) を参照してください。 | | scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストしたルーティング](/guide/routing#nested-routes) で使われます。 | @@ -100,7 +100,7 @@ export default { <!-- More information about the pages properties usage: [API Pages](/api) --> -ページのプロパティの使い方についてより深く理解したいときは [ページ API](/api) を参照してください。 +ページのプロパティの使い方についてより深く理解するには [ページ API](/api) を参照してください。 <!-- ## Layouts --> @@ -296,7 +296,7 @@ head: { <!-- More information about the head method: [API Configuration head](/api/configuration-head) --> -head メソッドについてより深く理解するためには [head 設定 API](/api/configuration-head) を参照してください。 +head メソッドについてより深く理解するには [head 設定 API](/api/configuration-head) を参照してください。 <!-- ### Custom Meta Tags for a Page --> @@ -308,4 +308,4 @@ head メソッドについてより深く理解するためには [head 設定 A <!-- <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> --> -<p class="Alert">子コンポーネントで利用されたときにメタ情報が重複してしまうことを避けるために `hid` キーでユニーク識別子を与えてください。また、これについてより深く理解するためには [こちら](https://github.com/declandewet/vue-meta#lists-of-tags) を参照してください。</p> +<p class="Alert">子コンポーネントで利用されたときにメタ情報が重複してしまうことを避けるために `hid` キーでユニーク識別子を与えてください。また、これについてより深く理解するには [こちら](https://github.com/declandewet/vue-meta#lists-of-tags) を参照してください。</p> From 3e636572a7aab9c9a1e95d6e79d8196d02926b44 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 21:37:17 +0900 Subject: [PATCH 029/129] Make ja/guide/async-data.md natural --- ja/guide/async-data.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md index b99db8c1f..892596339 100644 --- a/ja/guide/async-data.md +++ b/ja/guide/async-data.md @@ -1,6 +1,6 @@ --- title: 非同期なデータ -description: Nuxt.js は、コンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の data メソッドを過給します +description: Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の data メソッドに手を加えています。 --- <!-- title: Async Data --> @@ -8,7 +8,7 @@ description: Nuxt.js は、コンポーネントのデータをセットする <!-- \> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. --> -> Nuxt.js は、コンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の `data` メソッドを *過給* します（訳注: supercharges をうまく訳せませんでした。原文は Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data.） +> Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の `data` メソッドに手を加えています。 <!-- ## The data Method --> @@ -24,9 +24,7 @@ description: Nuxt.js は、コンポーネントのデータをセットする <!-- To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with: --> -To make the data method asynchronous, nuxt.js offers you different ways, choose the one you're the most familiar with: - -Nuxt.js では data メソッドを非同期にするために、いくつかの異なるやり方があるので、最もなじむものを選択してください: +Nuxt.js では data メソッドを非同期にするために、いくつかの異なるやり方があるので、お好きなものを選んでください: <!-- 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)) --> @@ -85,7 +83,7 @@ export default { <!-- If you don't need to do any asynchronous call, you can simply return an object: --> -もし非同期に実行する必要がなければ、シンプルにオブジェクトを返せば良いです: +もし非同期に実行する必要がなければ、シンプルにオブジェクトを返すことができます: ```js export default { @@ -115,7 +113,7 @@ data メソッドがセットされると、下記のように template の内 <!-- To see the list of available keys in `context`, take a look at the [API Pages data](/api). --> -`context` 内で利用できるキーの一覧を確認するには [ページ data API](/api) をご覧ください。 +`context` 内で利用できるキーの一覧を確認するには [ページ data API](/api) を参照してください。 <!-- ## Handling Errors --> @@ -123,7 +121,7 @@ data メソッドがセットされると、下記のように template の内 <!-- 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. --> -Nuxt.js は `context` の中に `error(params)` メソッドを追加しました。これを呼び出すことでエラーページを表示できます。 +Nuxt.js は `context` の中に `error(params)` メソッドを追加しています。これを呼び出すことでエラーページを表示できます。 <!-- Example with a `Promise`: --> From c2d13fa5f64506792b850c135e8757f43511dd57 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 22:40:35 +0900 Subject: [PATCH 030/129] Translate ja/guide/development-tools.md --- ja/guide/development-tools.md | 167 ++++++++++++++++++++++++++++------ ja/guide/installation.md | 4 +- 2 files changed, 141 insertions(+), 30 deletions(-) diff --git a/ja/guide/development-tools.md b/ja/guide/development-tools.md index 0d1b745f5..ffdef71dd 100644 --- a/ja/guide/development-tools.md +++ b/ja/guide/development-tools.md @@ -1,20 +1,34 @@ --- -title: Development Tools -description: Nuxt.js helps you to make your web development enjoyable. +title: 開発ツール +description: Nuxt.js は開発がより楽しいものになるよう手助けします。 --- -> Testing your application is part of the web development. Nuxt.js helps you to make it as easy as possible. +<!-- title: Development Tools --> +<!-- description: Nuxt.js helps you to make your web development enjoyable. --> -## End-to-End Testing +<!-- \> Testing your application is part of the web development. Nuxt.js helps you to make it as easy as possible. --> -[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. +> アプリケーションをテストすることはウェブ開発の一部です。Nuxt.js は可能な限り簡単にテストできるようにしています。 + +<!-- ## 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. --> + +[Ava](https://github.com/avajs/ava) は [jsdom](https://github.com/tmpvar/jsdom) と合わせて使うことができる、JavaScript のパワフルなテスティングフレームワークです。エンドツーエンドテストを簡単に行うためにこれらを使うことができます。 + +<!-- First, we need to add ava and jsdom as development dependencies: --> + +まず ava と jsdom を開発依存パッケージに追加する必要があります: -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`: +<!-- And add a test script to our `package.json`: --> + +それから `package.json` に test というスクリプトを追加します: ```javascript "scripts": { @@ -22,12 +36,18 @@ And add a test script to our `package.json`: } ``` -We are going to write our tests in the `test` folder: +<!-- We are going to write our tests in the `test` folder: --> + +`test` フォルダ内にテストを書いていくことにします: + ```bash mkdir test ``` -Let's says we have a page in `pages/index.vue`: +<!-- Let's says we have a page in `pages/index.vue`: --> + +`pages/index.vue` にページががあります: + ```html <template> <h1 class="red">Hello {{ name }}!</h1> @@ -48,21 +68,72 @@ export default { </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. +<!-- 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. --> + +`npm run dev` でアプリケーションを起動し [http://localhost:3000](http://localhost:3000) を開いているとき、`Hello world!` というタイトルが表示されています。 + +<!-- We add our test file `test/index.test.js`: --> + +`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 --> -We add our test file `test/index.test.js`: +<!-- // 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() --> +<!-- }) --> +<!-- ``` --> ```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 +// nuxt と server インスタンスを保持します +// そうすればテスト終了時にそれらをクローズできます let nuxt = null let server = null -// Init Nuxt.js and create a server listening on localhost:4000 +// Nuxt.js を初期化し localhost:4000 でリスニングするサーバーを作成します test.before('Init Nuxt.js', async t => { const rootDir = resolve(__dirname, '..') let config = {} @@ -75,14 +146,14 @@ test.before('Init Nuxt.js', async t => { server.listen(4000, 'localhost') }) -// Example of testing only generated html +// 生成された 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 +// DOM を経由してチェックするテストの例 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') @@ -92,31 +163,62 @@ test('Route / exits and render HTML with CSS applied', async t => { t.is(window.getComputedStyle(element).color, 'red') }) -// Close server and ask nuxt to stop listening to file changes +// サーバーを閉じて nuxt にファイル更新のリスニングを中止させる test.after('Closing server and nuxt.js', t => { server.close() nuxt.close() }) ``` -We can now launch our tests: +<!-- 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). +<!-- 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). --> + +jsdom はブラウザを使っていないため制約がいくつかありますが、ほとんどのテストはカバーできます。もしアプリケーションをテストするためにブラウザを使いたいときは [Nightwatch.js](http://nightwatchjs.org) を調べるとよいかもしれません。 ## ESLint -> ESLint is a great tool to keep your code clean +<!-- \> ESLint is a great tool to keep your code clean --> + +> ESLint はコードを綺麗に保てるすごいツールです。 + +<!-- You can add [ESLint](http://eslint.org) pretty easily with nuxt.js, first, you need to add the npm dependencies: --> -You can add [ESLint](http://eslint.org) pretty easily with nuxt.js, first, you need to add the npm dependencies: +とても簡単に [ESLint](http://eslint.org) を Nuxt.js と一緒に使うことができます。まず npm の依存パッケージを追加する必要があります: ```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: +<!-- Then, you can configure ESLint via a `.eslintrc.js` file in your root project directory: --> + +それから `.eslintrc.js` ファイルをプロジェクトのルートディレクトに置いて ESLint を設定できます: + +<!-- ```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: {} --> +<!-- } --> +<!-- ``` --> + ```js module.exports = { root: true, @@ -126,17 +228,19 @@ module.exports = { node: true }, extends: 'standard', - // required to lint *.vue files + // *.vue ファイルを lint するために必要 plugins: [ 'html' ], - // add your custom rules here + // ここにカスタムルールを追加します rules: {}, globals: {} } ``` -Then, you can add a `lint` script in your `package.json`: +<!-- Then, you can add a `lint` script in your `package.json`: --> + +それから `lint` スクリプトを `package.json` 内に追加できます: ```js "scripts": { @@ -144,11 +248,18 @@ Then, you can add a `lint` script in your `package.json`: } ``` -You can now launch: +<!-- You can now launch: --> + +lint を実行できます: + ```bash npm run lint ``` -ESLint will lint every of your JavaScript and Vue files while ignoring your ignored files defined in your `.gitignore`. +<!-- ESLint will lint every of your JavaScript and Vue files while ignoring your ignored files defined in your `.gitignore`. --> + +ESLint は `.gitignore` に定義されたファイルを無視しつつ、それ以外のすべての JavaScript と Vue ファイルを lint します。 + +<!-- <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> --> -<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> +<p class="Alert Alert--info">`"precommit": "npm run lint"` を package.json に追加してコードをコミットする前に自動的に lint するのはベストプラクティスのひとつです。</p> diff --git a/ja/guide/installation.md b/ja/guide/installation.md index 75ee5510a..5f77fe118 100644 --- a/ja/guide/installation.md +++ b/ja/guide/installation.md @@ -1,6 +1,6 @@ --- title: インストール -description: Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存ライブラリは `nuxt` だけです。 +description: Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは `nuxt` だけです。 --- <!-- title: Installation --> @@ -8,7 +8,7 @@ description: Nuxt.js はとても簡単に始められます。シンプルな <!-- \> Nuxt.js is really easy to get started with. A simple project only need the `nuxt` dependency. --> -Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存ライブラリは `nuxt` だけです。 +Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは `nuxt` だけです。 <!-- ## Using Nuxt.js starter template --> From 54e7fb6e1e9ddc9d49ae9bee07f5e3f91174a089 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 25 Feb 2017 22:59:50 +0900 Subject: [PATCH 031/129] Fix typo --- ja/guide/assets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ja/guide/assets.md b/ja/guide/assets.md index ff8a56219..029c070f4 100644 --- a/ja/guide/assets.md +++ b/ja/guide/assets.md @@ -114,7 +114,7 @@ file-loader と url-loader の役割: <!-- If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build#loaders). --> -これらのローダーの設定を更新したり、ローダーを使わないようにしたいするには、[ローダー設定](/api/configuration-build#loaders) を参照してください。 +これらのローダーの設定を更新したり、ローダーを使わないようにするには、[ローダー設定](/api/configuration-build#loaders) を参照してください。 <!-- ## Static --> From 5ab94bb38a545605464b1e4ac374097f9f23a47e Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sun, 26 Feb 2017 10:43:51 +0900 Subject: [PATCH 032/129] Translate ja/guide/menu.json and improve ja/guide/*.md checking the development server of nuxtjs.org --- ja/guide/async-data.md | 6 +- ja/guide/commands.md | 6 +- ja/guide/development-tools.md | 2 +- ja/guide/directory-structure.md | 6 +- ja/guide/index.md | 10 +-- ja/guide/installation.md | 6 +- ja/guide/menu.json | 104 ++++++++++++++++---------------- ja/guide/plugins.md | 2 +- ja/guide/views.md | 16 ++--- 9 files changed, 79 insertions(+), 79 deletions(-) diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md index 892596339..fbb7b8c15 100644 --- a/ja/guide/async-data.md +++ b/ja/guide/async-data.md @@ -30,8 +30,8 @@ Nuxt.js では data メソッドを非同期にするために、いくつかの <!-- 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)` --> -1. `Promise` を返す。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 -2. [async/await](https://github.com/lukehoban/ecmascript-asyncawait) を使う。（[より深く理解する](https://zeit.co/blog/async-and-await)） +1. `Promise` を返す。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます +2. [async/await](https://github.com/lukehoban/ecmascript-asyncawait) を使う（[より深く理解する](https://zeit.co/blog/async-and-await)） 3. 第二引数としてコールバックを定義する。右のように呼び出される必要があります: `callback(err, data)` <!-- ### Returning a Promise --> @@ -189,4 +189,4 @@ export default { <!-- To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). --> -エラーページをカスタマイズするためには [ビューページのレイアウトセクション](/guide/views#layouts) を参照してください。 +エラーページをカスタマイズするには [ビューのレイアウトセクション](/guide/views#layouts) を参照してください。 diff --git a/ja/guide/commands.md b/ja/guide/commands.md index c35da435e..c822544ce 100644 --- a/ja/guide/commands.md +++ b/ja/guide/commands.md @@ -23,8 +23,8 @@ description: Nuxt.js は便利コマンドのセットを備えています。 | コマンド | 説明 | |---------|-------------| -| nuxt | 開発サーバーを [localhost:3000](http://localhost:3000) で起動します。このサーバーはホットリローディングします。 | -| nuxt build | アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします。 | +| nuxt | 開発サーバーを [localhost:3000](http://localhost:3000) で起動します。このサーバーはホットリローディングします | +| nuxt build | アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします | | nuxt start | プロダクションモードでサーバーを起動します（`nuxt build` 後に実行してください） | | nuxt generate | アプリケーションをビルドして、ルートごとに HTML ファイルを生成します（静的ファイルのホスティングに用います） | @@ -67,7 +67,7 @@ npm run dev <!-- ## Production Deployment --> -## プロダクション環境へのデプロイ +## プロダクションのデプロイ <!-- Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. --> diff --git a/ja/guide/development-tools.md b/ja/guide/development-tools.md index ffdef71dd..7c07352b4 100644 --- a/ja/guide/development-tools.md +++ b/ja/guide/development-tools.md @@ -186,7 +186,7 @@ jsdom はブラウザを使っていないため制約がいくつかありま <!-- \> ESLint is a great tool to keep your code clean --> -> ESLint はコードを綺麗に保てるすごいツールです。 +> ESLint はコードを綺麗に保てる優れたツールです。 <!-- You can add [ESLint](http://eslint.org) pretty easily with nuxt.js, first, you need to add the npm dependencies: --> diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md index ffb40288f..66547616b 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -142,7 +142,7 @@ nuxt.config.js についてより深く理解するには [nuxt.config.js に関 <!-- The `package.json` file contains your Application dependencies and scripts. --> -`package.json` ファイルにはアプリケーションが依存するライブラリやスクリプトを記述します。 +`package.json` ファイルにはアプリケーションが依存するパッケージやスクリプトを記述します。 <!-- _This file can not be renamed._ --> @@ -181,5 +181,5 @@ _このファイル名は変更できません。_ | エイリアス | 使い方 | 説明 | |-------|------|--------------| -| ~store | `const store = require('~store')` | `vuex` ストアのインスタンスをインポートします。 | -| ~router | `const router = require('~router')`| `vue-router` のインスタンスをインポートします。 | +| ~store | `const store = require('~store')` | `vuex` ストアのインスタンスをインポートします | +| ~router | `const router = require('~router')`| `vue-router` のインスタンスをインポートします | diff --git a/ja/guide/index.md b/ja/guide/index.md index 36e44342e..0d158d90c 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -12,7 +12,7 @@ description: "2016年10月25日、zeit.co のチームが React アプリケー <!-- ## What is Nuxt.js ? --> -## Nuxt.js とは何ですか？ +## Nuxt.js とは何か？ <!-- Nuxt.js is a framework for creating Universal Vue.js Applications. --> @@ -120,7 +120,7 @@ Nuxt.js をプロジェクトの UI レンダリング全体を担うフレー <!-- ## Static Generated --> -## 静的な生成 +## 静的ファイルの生成 <!-- The big innovation of nuxt.js comes here: `nuxt generate` --> @@ -162,8 +162,8 @@ Nuxt.js による大きなイノベーションがやってきました。それ <!-- - [Source code](https://github.com/nuxt/nuxtjs.org) --> <!-- - [Generated code](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) --> -- [ソースコード](https://github.com/nuxt/nuxtjs.org) --> -- [生成されたコード](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) --> +- [ソースコード](https://github.com/nuxt/nuxtjs.org) +- [生成されたコード](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: --> @@ -175,7 +175,7 @@ Nuxt.js による大きなイノベーションがやってきました。それ <!-- 4. Push the `dist` folder to the `gh-pages` Branch --> 1. [nuxtjs.org リポジトリ](https://github.com/nuxt/nuxtjs.org) をクローンする -2. `npm install` で依存しているライブラリをインストールする +2. `npm install` で依存しているパッケージをインストールする 3. `nuxt generate` を実行する 4. `dist` フォルダーを `gh-pages` ブランチにプッシュする diff --git a/ja/guide/installation.md b/ja/guide/installation.md index 5f77fe118..b0fc3223c 100644 --- a/ja/guide/installation.md +++ b/ja/guide/installation.md @@ -32,7 +32,7 @@ $ vue init nuxt/starter <project-name> <!-- then install the dependencies: --> -それから依存するライブラリをインストールしてください: +それから依存するパッケージをインストールしてください: ```bash $ cd <project-name> @@ -53,7 +53,7 @@ $ npm run dev <!-- <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> --> -<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません</p> +<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません。</p> <!-- To discover more about the directory structure of the project: [Directory Structure Documentation](/guide/directory-structure). --> @@ -149,7 +149,7 @@ $ npm run dev <!-- <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> --> -<p class="Alert">Nuxt.js は `pages` ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません</p> +<p class="Alert">Nuxt.js は `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 index a82158293..a77bb8e52 100644 --- a/ja/guide/menu.json +++ b/ja/guide/menu.json @@ -1,104 +1,104 @@ [ { - "title": "Prologue", + "title": "プロローグ", "links": [ { - "to": "", "name": "Introduction", + "to": "", "name": "はじめに", "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": "#nuxt-js-とは何か-", "name": "Nuxt.js とは何か？" }, + { "to": "#どのように動作するか-", "name": "どのように動作するか？" }, + { "to": "#主な機能", "name": "主な機能" }, + { "to": "#図解", "name": "図解" }, + { "to": "#サーバーサイドレンダリング", "name": "サーバーサイドレンダリング" }, + { "to": "#静的ファイルの生成", "name": "静的ファイルの生成" } ] }, - { "to": "/contribution-guide", "name": "Contribution Guide" }, - { "to": "/release-notes", "name": "Release Notes" } + { "to": "/contribution-guide", "name": "貢献ガイド" }, + { "to": "/release-notes", "name": "リリースノート" } ] }, { - "title": "Getting Started", + "title": "はじめる", "links": [ { - "to": "/installation", "name": "Installation", + "to": "/installation", "name": "インストール", "contents": [ - { "to": "#using-nuxt-js-starter-template", "name": "Using Nuxt.js starter template" }, - { "to": "#starting-from-scratch", "name": "Starting from scratch" } + { "to": "#nuxt-js-を使ったスターターテンプレート", "name": "Nuxt.js を使ったスターターテンプレート" }, + { "to": "#スクラッチから始める", "name": "スクラッチから始める" } ] }, { - "to": "/directory-structure", "name": "Directory structure", + "to": "/directory-structure", "name": "ディレクトリ構造", "contents": [ - { "to": "#directories", "name": "Directories" }, - { "to": "#aliases", "name": "Aliases" } + { "to": "#ディレクトリ", "name": "ディレクトリ" }, + { "to": "#エイリアス-別名-", "name": "エイリアス（別名）" } ] }, - { "to": "/configuration", "name": "Configuration" }, + { "to": "/configuration", "name": "設定" }, { - "to": "/routing", "name": "Routing", + "to": "/routing", "name": "ルーティング", "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": "#ルーティングの基礎", "name": "ルーティングの基礎" }, + { "to": "#動的なルーティング", "name": "動的なルーティング" }, + { "to": "#ネストしたルーティング", "name": "ネストしたルーティング" }, + { "to": "#動的でネストしたルーティング", "name": "動的でネストしたルーティング" }, + { "to": "#トランジション", "name": "トランジション" }, + { "to": "#ミドルウェア", "name": "ミドルウェア" } ] }, { - "to": "/views", "name": "Views", + "to": "/views", "name": "ビュー", "contents": [ - { "to": "#pages", "name": "Pages" }, - { "to": "#layouts", "name": "Layouts" }, - { "to": "#html-head", "name": "HTML Head" } + { "to": "#ページ", "name": "ページ" }, + { "to": "#レイアウト", "name": "レイアウト" }, + { "to": "#html-の-head-情報", "name": "HTML の head 情報" } ] }, { - "to": "/async-data", "name": "Async Data", + "to": "/async-data", "name": "非同期なデータ", "contents": [ - { "to": "#the-data-method", "name": "The data Method" }, - { "to": "#the-context", "name": "The Context" }, - { "to": "#handling-errors", "name": "Handling Errors" } + { "to": "#data-メソッド", "name": "data メソッド" }, + { "to": "#コンテキスト", "name": "コンテキスト" }, + { "to": "#エラー処理", "name": "エラー処理" } ] }, { - "to": "/assets", "name": "Assets", + "to": "/assets", "name": "アセット", "contents": [ - { "to": "#webpacked", "name": "Webpacked" }, - { "to": "#static", "name": "Static" } + { "to": "#webpack-で取り扱う", "name": "Webpack で取り扱う" }, + { "to": "#webpack-で扱わない静的ファイル", "name": "Webpack で扱わない静的ファイル" } ] }, { - "to": "/plugins", "name": "Plugins", + "to": "/plugins", "name": "プラグイン", "contents": [ - { "to": "#external-packages", "name": "External Packages" }, - { "to": "#vue-plugins", "name": "Vue Plugins" }, - { "to": "#client-side-only", "name": "Client-side only" } + { "to": "#外部パッケージの利用", "name": "外部パッケージの利用" }, + { "to": "#vue-プラグイン", "name": "Vue プラグイン" }, + { "to": "#クライアントサイド限定のプラグイン利用", "name": "クライアントサイド限定のプラグイン利用" } ] }, { - "to": "/vuex-store", "name": "Vuex Store", + "to": "/vuex-store", "name": "Vuex ストア", "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": "#ストアを有効にする", "name": "ストアを有効にする" }, + { "to": "#クラシックモード", "name": "クラシックモード" }, + { "to": "#モジュールモード", "name": "モジュールモード" }, + { "to": "#fetch-メソッド", "name": "fetch メソッド" }, + { "to": "#nuxtserverinit-アクション", "name": "nuxtServerInit アクション" } ] }, { - "to": "/commands", "name": "Commands", + "to": "/commands", "name": "コマンド", "contents": [ - { "to": "#list-of-commands", "name": "List of Commands" }, - { "to": "#development-environment", "name": "Developemnt Enviroment" }, - { "to": "#production-deployment", "name": "Production Deployment" } + { "to": "#コマンド一覧", "name": "コマンド一覧" }, + { "to": "#開発環境", "name": "開発環境" }, + { "to": "#プロダクションのデプロイ", "name": "プロダクションのデプロイ" } ] }, { - "to": "/development-tools", "name": "Development Tools", + "to": "/development-tools", "name": "開発ツール", "contents": [ - { "to": "#end-to-end-testing", "name": "End-to-End Testing" }, + { "to": "#エンドツーエンドテスト", "name": "エンドツーエンドテスト" }, { "to": "#eslint", "name": "ESLint" } ] } diff --git a/ja/guide/plugins.md b/ja/guide/plugins.md index 6ea60ea50..424d7a42f 100644 --- a/ja/guide/plugins.md +++ b/ja/guide/plugins.md @@ -119,7 +119,7 @@ module.exports = { <!-- ## 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. --> diff --git a/ja/guide/views.md b/ja/guide/views.md index 95c69838d..84e96ca16 100644 --- a/ja/guide/views.md +++ b/ja/guide/views.md @@ -89,14 +89,14 @@ export default { | 属性 | 説明 | |-----------|-------------| -| data | 最も重要なキーであり [Vue.js の data オプション](https://vuejs.org/v2/api/#Options-Data) と同じ意義を持っています。しかし（訳注: Nuxt.js が data に手を加えているため）非同期に動作し、また引数として context を受け取ります。どのように動作するかを知るには [非同期データに関するドキュメント](/guide/async-data) を参照してください。 | -| fetch | ページがレンダリングされる前に、データをストアに入れるために使います。コンポーネントのデータをセットすること以外は data メソッドと似ています。[ページのフェッチ API に関するドキュメント](/api/pages-fetch) を参照してください。 | -| head | 現在のページの特定のメタタグを設定します。[ページの head API](/api/pages-head) を参照してください。 | -| layout | `layouts` ディレクトリ内のレイアウトを指定します。[ページのレイアウト API に関するドキュメント](/api/pages-layout) を参照してください。 | -| transition | ページに特定のトランジションを設定します。[ページのトランジション API に関するドキュメント](/api/pages-transition) を参照してください。 | -| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストしたルーティング](/guide/routing#nested-routes) で使われます。 | -| validate | [動的なルーティング](/guide/routing#dynamic-routes) のためのバリデーション関数です。 | -| middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#middleware) を参照してください。 | +| data | 最も重要なキーであり [Vue.js の data オプション](https://vuejs.org/v2/api/#Options-Data) と同じ意義を持っています。しかし（訳注: Nuxt.js が data に手を加えているため）非同期に動作し、また引数として context を受け取ります。どのように動作するかを知るには [非同期データに関するドキュメント](/guide/async-data) を参照してください | +| fetch | ページがレンダリングされる前に、データをストアに入れるために使います。コンポーネントのデータをセットすること以外は data メソッドと似ています。[ページのフェッチ API に関するドキュメント](/api/pages-fetch) を参照してください | +| head | 現在のページの特定のメタタグを設定します。[ページの head API](/api/pages-head) を参照してください | +| layout | `layouts` ディレクトリ内のレイアウトを指定します。[ページのレイアウト API に関するドキュメント](/api/pages-layout) を参照してください | +| transition | ページに特定のトランジションを設定します。[ページのトランジション API に関するドキュメント](/api/pages-transition) を参照してください | +| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストしたルーティング](/guide/routing#nested-routes) で使われます | +| validate | [動的なルーティング](/guide/routing#dynamic-routes) のためのバリデーション関数です | +| middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#middleware) を参照してください | <!-- More information about the pages properties usage: [API Pages](/api) --> From 8e03169880caa91692c35aaa28519f730d4c3115 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 20:37:58 +0900 Subject: [PATCH 033/129] Translate ja/api/index.md --- ja/api/index.md | 68 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 48 insertions(+), 20 deletions(-) diff --git a/ja/api/index.md b/ja/api/index.md index 4fb78c6f5..597555115 100644 --- a/ja/api/index.md +++ b/ja/api/index.md @@ -1,15 +1,24 @@ --- -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. +title: "API: data メソッド" +description: Nuxt.js は Vue.js の data メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を取り扱えるようにしています。 --- -# The data Method +<!-- 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. --> -> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. +<!-- # The data Method --> + +# data メソッド + +<!-- \> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. --> + +> Nuxt.js は Vue.js の `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. +<!-- `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. --> + +`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）対応するルートへナビゲーションする前に呼び出されます。このメソッドは **context** を第一引数として受け取り、context を使ってデータを取得してコンポーネントデータを返すことができます。 ```js export default { @@ -19,23 +28,42 @@ export default { } ``` -<div class="Alert Alert--orange">You do **NOT** have access of the component instance through `this` inside `data` because it is called **before initiating** the component.</div> +<!-- <div class="Alert Alert--orange">You do **NOT** have access of the component instance through `this` inside `data` because it is called **before initiating** the component.</div> --> + +<div class="Alert Alert--orange">`data` メソッド内で、コンポーネントのインスタンスに `this` を経由してアクセスしては**いけません**。なぜならそれはコンポーネントが **インスタンス化される前に** 呼び出されるからです。</div> ## Context -List of all the available keys in `context`: +<!-- List of all the available keys in `context`: --> + +`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`. | --> -| 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`. | +| `isClient` | ブーリアン | クライアント＆サーバー | クライアントサイドでレンダリングしているか否か | +| `isServer` | ブーリアン | クライアント＆サーバー | サーバーサイドでレンダリングしているか否か | +| `isDev` | ブーリアン | クライアント＆サーバー | 開発モードか否か。このキーはプロダクションモードでデータをキャッシュさせるときに役立ちます | +| `route` | [vue-router のルート](https://router.vuejs.org/en/api/route-object.html) | Client & Server | `vue-router` のルートインスタンス | +| `store` | [Vuex ストア](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | `Vuex` のストアインスタンス。**[Vuex ストア](/guide/vuex-store) が設定されている場合のみ利用できます** | +| `env` | オブジェクト | クライアント＆サーバー | `nuxt.config.js` でセットされた環境変数。詳細は [env API](/api/configuration-env) を参照してください | +| `params` | オブジェクト | クライアント＆サーバー | route.params のエイリアス | +| `query` | オブジェクト | クライアント＆サーバー | route.query のエイリアス | +| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | サーバー | Node.js サーバーのリクエスト。Nuxt.js をミドルウェアとして使っているとき、req オブジェクトは利用しているフレームワークによって異なるかもしれません。*`nuxt generate` からは利用できません* | +| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | サーバー | Node.js サーバーのレスポンス。Nuxt.js をミドルウェアとして使っているとき、req オブジェクトは利用しているフレームワークによって異なるかもしれません。*`nuxt generate` からは利用できません* | +| `redirect` | 関数 | クライアント＆サーバー | 別のルートにリダイレクトさせたいときに使います。サーバーサイドで使われるステータスコードはデフォルトで 302 です。`redirect([status,] path [, query])` | +| `error` | 関数 | クライアント＆サーバー | エラーページを表示させたいときに使います: `error(params)`。`params` は `statusCode` と `message` というフィールドを持っている必要があります | From 4fea1f47aced1ecb9025e4a272e7b9790ec567b7 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 20:45:35 +0900 Subject: [PATCH 034/129] Make ja/api/index.md natural --- ja/api/index.md | 22 +++++++++++++--------- ja/guide/async-data.md | 2 +- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/ja/api/index.md b/ja/api/index.md index 597555115..7bc1e62f9 100644 --- a/ja/api/index.md +++ b/ja/api/index.md @@ -1,6 +1,6 @@ --- title: "API: data メソッド" -description: Nuxt.js は Vue.js の data メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を取り扱えるようにしています。 +description: Nuxt.js は Vue.js の data メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を行えるようにしています。 --- <!-- title: "API: The data Method" --> @@ -12,13 +12,15 @@ description: Nuxt.js は Vue.js の data メソッドに手を加えて、コン <!-- \> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. --> -> Nuxt.js は Vue.js の `data` メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を取り扱えるようにしています。 +> Nuxt.js は Vue.js の `data` メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を行えるようにしています。 -- **Type:** `Function` +<!-- - **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. --> -`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）対応するルートへナビゲーションする前に呼び出されます。このメソッドは **context** を第一引数として受け取り、context を使ってデータを取得してコンポーネントデータを返すことができます。 +`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。このメソッドは **context** を第一引数として受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 ```js export default { @@ -30,9 +32,11 @@ export default { <!-- <div class="Alert Alert--orange">You do **NOT** have access of the component instance through `this` inside `data` because it is called **before initiating** the component.</div> --> -<div class="Alert Alert--orange">`data` メソッド内で、コンポーネントのインスタンスに `this` を経由してアクセスしては**いけません**。なぜならそれはコンポーネントが **インスタンス化される前に** 呼び出されるからです。</div> +<div class="Alert Alert--orange">`data` メソッド内で、コンポーネントのインスタンスに `this` を経由してアクセスしては**いけません**。なぜなら `data` メソッドはコンポーネントが **インスタンス化される前に** 呼び出されるためです。</div> + +<!-- ## Context --> -## Context +## コンテキスト <!-- List of all the available keys in `context`: --> @@ -63,7 +67,7 @@ export default { | `env` | オブジェクト | クライアント＆サーバー | `nuxt.config.js` でセットされた環境変数。詳細は [env API](/api/configuration-env) を参照してください | | `params` | オブジェクト | クライアント＆サーバー | route.params のエイリアス | | `query` | オブジェクト | クライアント＆サーバー | route.query のエイリアス | -| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | サーバー | Node.js サーバーのリクエスト。Nuxt.js をミドルウェアとして使っているとき、req オブジェクトは利用しているフレームワークによって異なるかもしれません。*`nuxt generate` からは利用できません* | -| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | サーバー | Node.js サーバーのレスポンス。Nuxt.js をミドルウェアとして使っているとき、req オブジェクトは利用しているフレームワークによって異なるかもしれません。*`nuxt generate` からは利用できません* | -| `redirect` | 関数 | クライアント＆サーバー | 別のルートにリダイレクトさせたいときに使います。サーバーサイドで使われるステータスコードはデフォルトで 302 です。`redirect([status,] path [, query])` | +| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | サーバー | Node.js サーバーのリクエスト。Nuxt.js をミドルウェアとして使っているとき、req オブジェクトは利用しているフレームワークによって異なります。*`nuxt generate` からは利用できません* | +| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | サーバー | Node.js サーバーのレスポンス。Nuxt.js をミドルウェアとして使っているとき、res オブジェクトは利用しているフレームワークによって異なります。*`nuxt generate` からは利用できません* | +| `redirect` | 関数 | クライアント＆サーバー | 別のルートにリダイレクトさせたいときに使います。サーバーサイドで使われるステータスコードはデフォルトで 302 です: `redirect([status,] path [, query])` | | `error` | 関数 | クライアント＆サーバー | エラーページを表示させたいときに使います: `error(params)`。`params` は `statusCode` と `message` というフィールドを持っている必要があります | diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md index fbb7b8c15..eb375ce02 100644 --- a/ja/guide/async-data.md +++ b/ja/guide/async-data.md @@ -16,7 +16,7 @@ description: Nuxt.js はコンポーネントのデータをセットする前 <!-- `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. --> -`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [context](/api#context) を受け取り、context を、データをフェッチしたりコンポーネントのデータを返すために使うことができます。 +`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [context](/api#context) を受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 <!-- <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> --> From bb789066db09325610645f0d14bd7c94788d15c4 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 20:58:36 +0900 Subject: [PATCH 035/129] Translate ja/api/pages-fetch.md --- ja/api/index.md | 2 +- ja/api/pages-fetch.md | 36 +++++++++++++++++++++++++++--------- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/ja/api/index.md b/ja/api/index.md index 7bc1e62f9..435e61012 100644 --- a/ja/api/index.md +++ b/ja/api/index.md @@ -20,7 +20,7 @@ description: Nuxt.js は Vue.js の data メソッドに手を加えて、コン <!-- `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. --> -`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。このメソッドは **context** を第一引数として受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 +`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。このメソッドは第一引数として **context** を受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 ```js export default { diff --git a/ja/api/pages-fetch.md b/ja/api/pages-fetch.md index aa8cf8c72..0bcf04280 100644 --- a/ja/api/pages-fetch.md +++ b/ja/api/pages-fetch.md @@ -1,19 +1,35 @@ --- -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. +title: "API: fetch メソッド" +description: fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては data メソッドとよく似ています。 --- -# The fetch Method +<!-- 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 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 --> -- **Type:** `Function` +# fetch メソッド -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 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 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. +> fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては 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. --> + +`fetch` メソッドは、*もしセットされていれば*、コンポーネントがローディングされる前に毎回呼び出されます（**ページコンポーネントに限ります**）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。 + +<!-- 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. --> + +`fetch` メソッドは第一引数として [context](/api#context) を受け取り、context を使ってデータを取得してデータをストアに入れることができます。fetch メソッドを非同期にするためには **Promise を返すようにしてください**。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 + +<!-- Example of `pages/index.vue`: --> + +`pages/index.vue` の例: -Example of `pages/index.vue`: ```html <template> <h1>Stars: {{ $store.state.stars }}</h1> @@ -31,7 +47,9 @@ export default { </script> ``` -You can also use async/await to make your code cleaner: +<!-- You can also use async/await to make your code cleaner: --> + +async/await を使ってコードをスッキリさせることもできます: ```html <template> From 8c2215cddc1b8cd13c62a223fec4d37bd82789a7 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 21:12:47 +0900 Subject: [PATCH 036/129] Translate ja/api/pages-head.md --- ja/api/pages-head.md | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/ja/api/pages-head.md b/ja/api/pages-head.md index 7df5436d6..d63e42b1f 100644 --- a/ja/api/pages-head.md +++ b/ja/api/pages-head.md @@ -1,17 +1,30 @@ --- -title: "API: The head Method" -description: Nuxt.js uses vue-meta to update the `headers` and `html attributes` of your application. +title: "API: head メソッド" +description: Nuxt.js はアプリケーションの `headers` 及び `html attributes` を更新するために vue-meta と使います。 --- -# The head Method +<!-- title: "API: The head Method" --> +<!-- description: Nuxt.js uses vue-meta to update the `headers` and `html attributes` of your application. --> -> Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. +<!-- # The head Method --> -- **Type:** `Object` or `Function` +# head メソッド -Use the `head` method to set the HTML Head tags for the current page. +<!-- \> Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. --> -Your component data are available with `this` in the `head` method, you can use set custom meta tags with the page data. +> Nuxt.js はアプリケーションの `headers` 及び `html attributes` を更新するために [vue-meta](https://github.com/declandewet/vue-meta) を使います。 + +<!-- - **Type:** `Object` or `Function` --> + +- **タイプ:** `オブジェクト` または `関数` + +<!-- Use the `head` method to set the HTML Head tags for the current page. --> + +現在のページの HTML の head タグを設定するために `head` メソッド使います。 + +<!-- Your component data are available with `this` in the `head` method, you can use set custom meta tags with the page data. --> + +コンポーネントのデータは `head` メソッド内で `this` を使って利用できます。ページのデータを使って独自のメタタグを設定することもできます。 ```html <template> @@ -37,4 +50,6 @@ export default { </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> +<!-- <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> --> + +<p class="Alert">子コンポーネント利用されたときにメタ情報が重複してしまうことを避けるために `hid` キーでユニーク識別子を与えてください。これについてより深く理解するには [こちら](https://github.com/declandewet/vue-meta#lists-of-tags) を参照してください。</p> From 9a692d5125fca2969196432cbf0b884b0e57a12b Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 21:22:55 +0900 Subject: [PATCH 037/129] Translate ja/api/pages-layout.md --- ja/api/pages-layout.md | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/ja/api/pages-layout.md b/ja/api/pages-layout.md index 5d28db248..d7157785c 100644 --- a/ja/api/pages-layout.md +++ b/ja/api/pages-layout.md @@ -1,15 +1,26 @@ --- -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. +title: "API: layout プロパティ" +description: layouts ディレクトリの（第一階層の）すべてのファイルはページコンポーネントの layout プロパティで利用できるカスタムレイアウトを作ります。 --- -# The layout Property +<!-- 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. --> -> 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 --> -- **Type:** `String` (default: `'default'`) +# layout プロパティ -Use the `layout` key in your pages components to define which layout to use: +<!-- \> Every file (first level) in the layouts directory will create a custom layout accessible with the layout property in the page component. --> + +> layouts ディレクトリの（第一階層の）すべてのファイルはページコンポーネントの layout プロパティで利用できるカスタムレイアウトを作ります。 + +<!-- - **Type:** `String` (default: `'default'`) --> + +- **タイプ:** `文字列`（デフォルト: `'default'`） + +<!-- Use the `layout` key in your pages components to define which layout to use: --> + +どのレイアウトを使うか指定するために、ページコンポーネントで `layout` キーを使ってください: ```js export default { @@ -17,8 +28,13 @@ export default { } ``` -In this example, Nuxt.js will include the `layouts/blog.vue` file as a layout for this page component. +<!-- In this example, Nuxt.js will include the `layouts/blog.vue` file as a layout for this page component. --> + +この例では Nuxt.js は `layouts/blog.vue` ファイルをこのページコンポーネントのレイアウトとしてインクルードします。 + +<!-- Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action. --> -Check the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38) to see it in action. +動作する様子を [デモ動画](https://www.youtube.com/watch?v=YOKnSTp7d38) で確認してみてください。 -To understand how the layouts work with nuxt.js, take a look at the [layout documentation](/guide/views#layouts). +<!-- To understand how the layouts work with nuxt.js, take a look at the [layout documentation](/guide/views#layouts). --> +Nuxt.js でレイアウトがどのように動作するかをより深く理解するには [layout ドキュメント](/guide/views#layouts) を参照してください。 From 2849373c8a78cab8a0c7f3c0fdb962e473f6aa77 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 21:25:52 +0900 Subject: [PATCH 038/129] Make ja/api/pages-layout.md natural --- ja/api/pages-layout.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/api/pages-layout.md b/ja/api/pages-layout.md index d7157785c..f63163066 100644 --- a/ja/api/pages-layout.md +++ b/ja/api/pages-layout.md @@ -1,6 +1,6 @@ --- title: "API: layout プロパティ" -description: layouts ディレクトリの（第一階層の）すべてのファイルはページコンポーネントの layout プロパティで利用できるカスタムレイアウトを作ります。 +description: layouts ディレクトリの（第一階層の）ファイルはカスタムレイアウトになります。これらはページコンポーネントの layout プロパティで指定して利用できます。 --- <!-- title: "API: The layout Property" --> @@ -12,7 +12,7 @@ description: layouts ディレクトリの（第一階層の）すべてのフ <!-- \> Every file (first level) in the layouts directory will create a custom layout accessible with the layout property in the page component. --> -> layouts ディレクトリの（第一階層の）すべてのファイルはページコンポーネントの layout プロパティで利用できるカスタムレイアウトを作ります。 +> layouts ディレクトリの（第一階層の）ファイルはカスタムレイアウトになります。これらはページコンポーネントの layout プロパティで指定して利用できます。 <!-- - **Type:** `String` (default: `'default'`) --> From caa53835b44fb98558ac82cda52631a8ad993469 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 21:33:40 +0900 Subject: [PATCH 039/129] Translate ja/api/pages-middleware.md --- ja/api/pages-middleware.md | 57 +++++++++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 10 deletions(-) diff --git a/ja/api/pages-middleware.md b/ja/api/pages-middleware.md index 45c8155cc..693cbf03a 100644 --- a/ja/api/pages-middleware.md +++ b/ja/api/pages-middleware.md @@ -1,21 +1,46 @@ --- -title: "API: The middleware Property" -description: Set the middleware for a specific page of the application. +title: "API: middleware プロパティ" +description: アプリケーションの特定のページにミドルウェアを設定します。 --- -# The middleware Property +<!-- title: "API: The middleware Property" --> +<!-- description: Set the middleware for a specific page of the application. --> -- Type: `String` or `Array` - - Items: `String` +<!-- # The middleware Property --> -Set the middleware for a specific page of the application. +# middleware プロパティ -Example: +<!-- - 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> --> +<!-- ``` --> + ```html <template> - <h1>Secret page</h1> + <h1>シークレットページ</h1> </template> <script> @@ -26,13 +51,25 @@ export default { ``` `middleware/authenticated.js` + +<!-- ```js --> +<!-- export default function ({ store, redirect }) { --> +<!-- // If the user is not authenticated --> +<!-- if (!store.state.authenticated) { --> +<!-- return redirect('/login') --> +<!-- } --> +<!-- } --> +<!-- ``` --> + ```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). +<!-- To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). --> + +ミドルウェアについてより深く理解するには [ミドルウェアのガイド](/guide/routing#middleware) を参照してください。 From db3b92e130c5d90b2cc04d5f55a54f381fcba88a Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 21:49:49 +0900 Subject: [PATCH 040/129] Translate ja/api/pages-scrolltotop.md --- ja/api/pages-scrolltotop.md | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/ja/api/pages-scrolltotop.md b/ja/api/pages-scrolltotop.md index b07b319bd..d7f9e7d52 100644 --- a/ja/api/pages-scrolltotop.md +++ b/ja/api/pages-scrolltotop.md @@ -1,15 +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. +title: "API: scrollToTop プロパティ" +description: scrollToTop プロパティを使うと、ページをレンダリングする前にトップまでスクロールか否かを Nuxt.js に伝えることができます。 --- -# The scrollToTop Property +<!-- 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 lets you tell nuxt.js to scroll to the top before rendering the page. +<!-- # The scrollToTop Property --> -- **Type:** `Boolean` (default: `false`) +# scrollToTop プロパティ -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`: +<!-- \> The scrollToTop property lets you tell nuxt.js to scroll to the top before rendering the page. --> + +> scrollToTop プロパティを使うと、ページをレンダリングする前にトップまでスクロールか否かを Nuxt.js に伝えることができます。 + +<!-- - **Type:** `Boolean` (default: `false`) --> + +- **タイプ:** `ブーリアン`（デフォルト: `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`: --> + +デフォルトでは、Nuxt.js は別のページへ遷移する際にトップまでスクロールしますが、子ルートがあるときは、Nuxt.js はスクロール位置をキープします。もし子ルートをレンダリングするときにトップまでスクロールさせたいときは `scrollToTop: true` と設定してください: ```html <template> @@ -23,4 +34,6 @@ export default { </script> ``` -If you want to overwrite the default scroll behavior of nuxt.js, take a look at the [scrollBehavior option](/api/configuration-router#scrollBehavior). +<!-- If you want to overwrite the default scroll behavior of nuxt.js, take a look at the [scrollBehavior option](/api/configuration-router#scrollBehavior). --> + +もし Nuxt.js のデフォルトのスクロールの挙動を上書きしたいときは [scrollBehavior オプション](/api/configuration-router#scrollBehavior) を参照してください。 From 7f39c47651ce2af88fedf8128825f3afbc0e589b Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 21:54:02 +0900 Subject: [PATCH 041/129] Make ja/api/pages-scrolltotop.md natural --- ja/api/pages-scrolltotop.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ja/api/pages-scrolltotop.md b/ja/api/pages-scrolltotop.md index d7f9e7d52..d5d6197e2 100644 --- a/ja/api/pages-scrolltotop.md +++ b/ja/api/pages-scrolltotop.md @@ -1,6 +1,6 @@ --- title: "API: scrollToTop プロパティ" -description: scrollToTop プロパティを使うと、ページをレンダリングする前にトップまでスクロールか否かを Nuxt.js に伝えることができます。 +description: scrollToTop プロパティで、ページをレンダリングする前にトップまでスクロールか否かを指定できます。 --- <!-- title: "API: The scrollToTop Property" --> @@ -12,7 +12,7 @@ description: scrollToTop プロパティを使うと、ページをレンダリ <!-- \> The scrollToTop property lets you tell nuxt.js to scroll to the top before rendering the page. --> -> scrollToTop プロパティを使うと、ページをレンダリングする前にトップまでスクロールか否かを Nuxt.js に伝えることができます。 +> scrollToTop プロパティで、ページをレンダリングする前にトップまでスクロールか否かを指定できます。 <!-- - **Type:** `Boolean` (default: `false`) --> @@ -20,7 +20,7 @@ description: scrollToTop プロパティを使うと、ページをレンダリ <!-- 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`: --> -デフォルトでは、Nuxt.js は別のページへ遷移する際にトップまでスクロールしますが、子ルートがあるときは、Nuxt.js はスクロール位置をキープします。もし子ルートをレンダリングするときにトップまでスクロールさせたいときは `scrollToTop: true` と設定してください: +別のページへ遷移する際にトップまでスクロールしますが、子ルートがあるときはスクロール位置をキープする、というのが Nuxt.js のデフォルトの挙動です。子ルートをレンダリングするときにトップまでスクロールさせたいときは `scrollToTop: true` と設定してください: ```html <template> @@ -36,4 +36,4 @@ export default { <!-- If you want to overwrite the default scroll behavior of nuxt.js, take a look at the [scrollBehavior option](/api/configuration-router#scrollBehavior). --> -もし Nuxt.js のデフォルトのスクロールの挙動を上書きしたいときは [scrollBehavior オプション](/api/configuration-router#scrollBehavior) を参照してください。 +スクロールについて Nuxt.js のデフォルトの挙動を上書きしたいときは [scrollBehavior オプション](/api/configuration-router#scrollBehavior) を参照してください。 From a6e9540fc17a744d7c01de9ed3d87ec165b821b7 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 22:48:01 +0900 Subject: [PATCH 042/129] Translate ja/api/pages-transition.md --- ja/api/pages-transition.md | 133 +++++++++++++++++++++++++++---------- 1 file changed, 98 insertions(+), 35 deletions(-) diff --git a/ja/api/pages-transition.md b/ja/api/pages-transition.md index 085761cf0..341b97521 100644 --- a/ja/api/pages-transition.md +++ b/ja/api/pages-transition.md @@ -1,30 +1,56 @@ --- -title: "API: The transition Property" -description: Nuxt.js uses the transition component to let you create amazing transitions/animations between your pages. +title: "API: transition プロパティ" +description: Nuxt.js では transition コンポーネントを使って、ページ間を遷移する際のイイ感じのトランジション/アニメーションを行うことができます。 --- -# The transition Property +<!-- title: "API: The transition Property" --> +<!-- description: Nuxt.js uses the transition component to let you create amazing transitions/animations between your pages. --> -> 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. +<!-- # The transition Property --> -- **Type:** `String` or `Object` or `Function` +# transition プロパティ -To define a custom transition for a specific route, simply add the `transition` key to the page component. +<!-- \> 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. --> + +> Nuxt.js は [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) コンポーネントを使って、ページ間を遷移する際のイイ感じのトランジション/アニメーションを行うことができます。 + +<!-- - **Type:** `String` or `Object` or `Function` --> + +- **タイプ:** `文字列` または `オブジェクト` または `関数` + +<!-- To define a custom transition for a specific route, simply add the `transition` key to the page component. --> + +特定のルートに対してカスタムトランジションを設定するには、ページコンポーネントに `transition` キーを追加してください。 + +<!-- ```js --> +<!-- export default { --> +<!-- // Can be a String --> +<!-- transition: '' --> +<!-- // Or an Object --> +<!-- transition: {} --> +<!-- // or a Function --> +<!-- transition (to, from) {} --> +<!-- } --> +<!-- ``` --> ```js export default { - // Can be a String + // 文字列を指定できます transition: '' - // Or an Object + // またはオブジェクト transition: {} - // or a Function + // または関数 transition (to, from) {} } ``` -## String +<!-- ## String --> + +## 文字列 + +<!-- If the `transition` key is set as a string, it will be used as the `transition.name`. --> -If the `transition` key is set as a string, it will be used as the `transition.name`. +`transition` キーに文字列がセットされたときは `transition.name` として用いられます。 ```js export default { @@ -32,15 +58,21 @@ export default { } ``` -Nuxt.js will use these settings to set the component as follows: +<!-- Nuxt.js will use these settings to set the component as follows: --> + +Nuxt.js はこれらの設定を、下記のようにコンポーネントをセットするために使います: ```html <transition name="test"> ``` -## Object +<!-- ## Object --> + +## オブジェクト -If the `transition` key is set as an object: +<!-- If the `transition` key is set as an object: --> + +`transition` キーにオブジェクトがセットされたとき: ```js export default { @@ -51,29 +83,47 @@ export default { } ``` -Nuxt.js will use these settings to set the component as follows: +<!-- Nuxt.js will use these settings to set the component as follows: --> + +Nuxt.js はこれらの設定を、下記のようにコンポーネントをセットするために使います: ```html <transition name="test" mode="out-in"> ``` -The following properties that the `transition` object can have: +<!-- The following properties that the `transition` object can have: --> + +`transition` オブジェクトが持つことができるプロパティは次のとおり: -| key | Type | Default | definition | +<!-- | 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) | --> + +| キー | タイプ | デフォルト | 定義 | |------|------|---------|-----------| -| `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) | +| `name` | 文字列 | `"page"` | すべてのトランジション時に適用されるトランジション名 | +| `mode` | 文字列 | `"out-in"` | すべてのトランジション時に適用されるトランジションモード。詳細は [Vue.js のドキュメント](http://vuejs.org/v2/guide/transitions.html#Transition-Modes) 参照 | +| `css` | ブーリアン | `true` | CSS トランジションクラスを適用するか否か。デフォルトは true です。false を設定すると、コンポーネントのイベントで登録された JavaScript フックのみがトリガーになります | +| `type` | 文字列 | `n/a` | トランジション終了のタイミングを判定するために待ち受けるトランジションのイベントタイプを指定します。"transition" または "animation" を指定できます。デフォルトでは、より時間がかかるほうのタイプが自動的に選ばれます | +| `enterClass` | 文字列 | `n/a` | トランジション開始時の状態のクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | +| `enterToClass` | 文字列 | `n/a` | トランジション終了時の状態のクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | +| `enterActiveClass` | 文字列 | `n/a` | トランジション中に適用されるクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | +| `leaveClass` | 文字列 | `n/a` | トランジション開始時の状態のクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | +| `leaveToClass` | 文字列 | `n/a` | トランジション終了時の状態のクラスです。詳細は [Vue.js のドキュメント](https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes) 参照 | +| `leaveActiveClass` | 文字列 | `n/a` | トランジション中に適用されるクラスです。詳細は [Vue.js のドキュメント](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): --> -You can also define methods in the `transition`, these are for the [JavaScript hooks](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks): +`transition` の中でメソッドを定義することもでき、メソッドは [JavaScript フック](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) に使われます: - beforeEnter(el) - enter(el, done) @@ -84,11 +134,17 @@ You can also define methods in the `transition`, these are for the [JavaScript h - 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.* +<!-- *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.* --> + +*メモ: JavaScript のみのトランジションのために明示的に `css: false` を追加しておくのは良いアイディアです。これは Vue は CSS 判定をスキップさせます。また誤って CSS ルールがトランジションに干渉するのを防ぎます。* -## Function +<!-- ## Function --> -If the `transition` key is set as a function: +## 関数 + +<!-- If the `transition` key is set as a function: --> + +`transition` キーに関数がセットされたとき: ```js export default { @@ -99,7 +155,14 @@ export default { } ``` -Transitions applied on navigation: -- `/` to `/posts` => `slide-left` -- `/posts` to `/posts?page=3` => `slide-left` -- `/posts?page=3` to `/posts?page=2` => `slide-right` +<!-- Transitions applied on navigation: --> + +トランジションはページ遷移時に適用されます: + +<!-- - `/` to `/posts` => `slide-left` --> +<!-- - `/posts` to `/posts?page=3` => `slide-left` --> +<!-- - `/posts?page=3` to `/posts?page=2` => `slide-right` --> + +- `/` から `/posts` へ遷移するとき => `slide-left` +- `/posts` から `/posts?page=3` へ遷移するとき => `slide-left` +- `/posts?page=3` から `/posts?page=2` へ遷移するとき => `slide-right` From ec9d7fad620f86ee68757e9bdf7d52cb3f1ae70a Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 22:53:15 +0900 Subject: [PATCH 043/129] Make ja/api/pages-transition.md natural --- ja/api/pages-transition.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ja/api/pages-transition.md b/ja/api/pages-transition.md index 341b97521..689cdd8cc 100644 --- a/ja/api/pages-transition.md +++ b/ja/api/pages-transition.md @@ -1,6 +1,6 @@ --- title: "API: transition プロパティ" -description: Nuxt.js では transition コンポーネントを使って、ページ間を遷移する際のイイ感じのトランジション/アニメーションを行うことができます。 +description: Nuxt.js では transition コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。 --- <!-- title: "API: The transition Property" --> @@ -12,7 +12,7 @@ description: Nuxt.js では transition コンポーネントを使って、ペ <!-- \> 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. --> -> Nuxt.js は [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) コンポーネントを使って、ページ間を遷移する際のイイ感じのトランジション/アニメーションを行うことができます。 +> Nuxt.js は [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。 <!-- - **Type:** `String` or `Object` or `Function` --> @@ -60,7 +60,7 @@ export default { <!-- Nuxt.js will use these settings to set the component as follows: --> -Nuxt.js はこれらの設定を、下記のようにコンポーネントをセットするために使います: +上のように設定されると、コンポーネントは次のようにセットされます: ```html <transition name="test"> @@ -85,7 +85,7 @@ export default { <!-- Nuxt.js will use these settings to set the component as follows: --> -Nuxt.js はこれらの設定を、下記のようにコンポーネントをセットするために使います: +上のように設定されると、コンポーネントは次のようにセットされます: ```html <transition name="test" mode="out-in"> @@ -93,7 +93,7 @@ Nuxt.js はこれらの設定を、下記のようにコンポーネントをセ <!-- The following properties that the `transition` object can have: --> -`transition` オブジェクトが持つことができるプロパティは次のとおり: +`transition` オブジェクトが持つことができるプロパティは以下のとおり: <!-- | key | Type | Default | definition | --> <!-- |------|------|---------|-----------| --> @@ -123,7 +123,7 @@ Nuxt.js はこれらの設定を、下記のようにコンポーネントをセ <!-- You can also define methods in the `transition`, these are for the [JavaScript hooks](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks): --> -`transition` の中でメソッドを定義することもでき、メソッドは [JavaScript フック](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) に使われます: +`transition` の中でメソッドを定義することもでき、メソッドは [JavaScript フック](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) で使われます: - beforeEnter(el) - enter(el, done) @@ -157,7 +157,7 @@ export default { <!-- Transitions applied on navigation: --> -トランジションはページ遷移時に適用されます: +トランジションは各ページ遷移時に次のように適用されます: <!-- - `/` to `/posts` => `slide-left` --> <!-- - `/posts` to `/posts?page=3` => `slide-left` --> From 6cf7f85b8786a9fa7b28c3da7d99ee5f6d799932 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 23:03:39 +0900 Subject: [PATCH 044/129] Translate ja/api/pages-validate.md --- ja/api/pages-validate.md | 49 ++++++++++++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 10 deletions(-) diff --git a/ja/api/pages-validate.md b/ja/api/pages-validate.md index 9ed52230d..20787e05e 100644 --- a/ja/api/pages-validate.md +++ b/ja/api/pages-validate.md @@ -1,29 +1,58 @@ --- -title: "API: The validate Method" -description: Nuxt.js lets you define a validator method inside your dynamic route component. +title: "API: validate メソッド" +description: Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。 --- -# The validate Method +<!-- title: "API: The validate Method" --> +<!-- description: Nuxt.js lets you define a validator method inside your dynamic route component. --> -> Nuxt.js lets you define a validator method inside your dynamic route component. +<!-- # The validate Method --> -- **Type:** `Function` +# validate メソッド + +<!-- \> Nuxt.js lets you define a validator method inside your dynamic route component. --> + +> Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。 + +<!-- - **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 --> +<!-- } --> +<!-- ``` --> ```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 + return true // params バリデーションを通過したとき + return false // Nuxt.js がルートをレンダリングするのを中止して、エラーページを表示させる } ``` -Nuxt.js lets you define a validator method inside your dynamic route component (In this example: `pages/users/_id.vue`). +<!-- Nuxt.js lets you define a validator method inside your dynamic route component (In this example: `pages/users/_id.vue`). --> + +Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます（下記の例は `pages/users/_id.vue` 内です） + +<!-- If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page. --> + +バリデーションメソッドが `true` を返さないときは Nuxt.js は自動的に 404 エラーページをロードします。 -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) --> +<!-- } --> +<!-- } --> +<!-- ``` --> ```js export default { validate ({ params }) { - // Must be a number + // 数値でなければならない return /^\d+$/.test(params.id) } } From e818f1e268a2b643ee2987f9f094e50ba92eea32 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 23:10:06 +0900 Subject: [PATCH 045/129] Translate ja/api/components-nuxt.md --- ja/api/components-nuxt.md | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/ja/api/components-nuxt.md b/ja/api/components-nuxt.md index 7f1f0a7aa..97b4c6448 100644 --- a/ja/api/components-nuxt.md +++ b/ja/api/components-nuxt.md @@ -1,13 +1,22 @@ --- -title: "API: The <nuxt> Component" -description: Display the page components inside a layout. +title: "API: <nuxt> コンポーネント" +description: レイアウト内でページコンポーネントを表示します。 --- -# The <nuxt> Component +<!-- title: "API: The <nuxt> Component" --> +<!-- description: Display the page components inside a layout. --> -> This component is used only in [layouts](/guide/views#layouts) to display the page components. +<!-- # The <nuxt> Component --> -Example (`layouts/default.vue`): +# <nuxt> コンポーネント + +<!-- \> This component is used only in [layouts](/guide/views#layouts) to display the page components. --> + +> このコンポーネントは [レイアウト](/guide/views#layouts) 内でのみ、ページコンポーネントを表示するために使われます。 + +<!-- Example (`layouts/default.vue`): --> + +例（`layouts/default.vue`）: ```html <template> @@ -19,4 +28,6 @@ Example (`layouts/default.vue`): </template> ``` -To see an example, take a look at the [layouts example](/examples/layouts). +<!-- To see an example, take a look at the [layouts example](/examples/layouts). --> + +例が見たいときは [レイアウトの例](/examples/layouts) を参照してください。 From 0173395caeaf7f2b1b6ff8edf23fc9507810263c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 23:38:44 +0900 Subject: [PATCH 046/129] Translate ja/api/components-nuxt-child.md --- ja/api/components-nuxt-child.md | 32 ++++++++++++++++++++++++-------- ja/api/components-nuxt.md | 2 +- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/ja/api/components-nuxt-child.md b/ja/api/components-nuxt-child.md index 5cdb900d9..c7dce9c0f 100644 --- a/ja/api/components-nuxt-child.md +++ b/ja/api/components-nuxt-child.md @@ -1,13 +1,22 @@ --- -title: "API: The <nuxt-child> Component" -description: Display the current page +title: "API: <nuxt-child> コンポーネント" +description: 現在のページを表示します。 --- -# The <nuxt-child> Component +<!-- title: "API: The <nuxt-child> Component" --> +<!-- description: Display the current page --> -> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes). +<!-- # The <nuxt-child> Component --> -Example: +# <nuxt-child> コンポーネント + +<!-- \> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes). --> + +> このコンポーネントは [ネストしたルーティング](/guide/routing#nested-routes) 内で子コンポーネントを表示するために使われます。 + +<!-- Example: --> + +例: ```bash -| pages/ @@ -16,7 +25,10 @@ Example: ---| parent.vue ``` -This file tree will generate these routes: +<!-- This file tree will generate these routes: --> + +このファイルの木構造から次のルーティングが生成されます: + ```js [ { @@ -34,7 +46,9 @@ This file tree will generate these routes: ] ``` -To display the `child.vue` component, I have to insert `<nuxt-child/>` inside `pages/parent.vue`: +<!-- To display the `child.vue` component, I have to insert `<nuxt-child/>` inside `pages/parent.vue`: --> + +`child.vue` コンポーネントを表示するには `pages/parent.vue` 内に `<nuxt-child/>` を挿入する必要があります: ```html <template> @@ -45,4 +59,6 @@ To display the `child.vue` component, I have to insert `<nuxt-child/>` inside `p </template> ``` -To see an example, take a look at the [nested-routes example](/examples/nested-routes). +<!-- To see an example, take a look at the [nested-routes example](/examples/nested-routes). --> + +実際の例を見たいときは [ネストしたルーティングの例](/examples/nested-routes) を参照してください。 diff --git a/ja/api/components-nuxt.md b/ja/api/components-nuxt.md index 97b4c6448..c8b301976 100644 --- a/ja/api/components-nuxt.md +++ b/ja/api/components-nuxt.md @@ -30,4 +30,4 @@ description: レイアウト内でページコンポーネントを表示しま <!-- To see an example, take a look at the [layouts example](/examples/layouts). --> -例が見たいときは [レイアウトの例](/examples/layouts) を参照してください。 +実際の例を見たいときは [レイアウトの例](/examples/layouts) を参照してください。 From 687328b2986f04b84ee92f694c5d80761195383d Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 27 Feb 2017 23:53:03 +0900 Subject: [PATCH 047/129] Translate ja/api/components-nuxt-link.md --- ja/api/components-nuxt-link.md | 40 ++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/ja/api/components-nuxt-link.md b/ja/api/components-nuxt-link.md index 910a18504..5373931bc 100644 --- a/ja/api/components-nuxt-link.md +++ b/ja/api/components-nuxt-link.md @@ -1,23 +1,45 @@ --- -title: "API: The <nuxt-link> Component" -description: Link the pages between them with nuxt-link. +title: "API: <nuxt-link> コンポーネント" +description: ページ間を nuxt-link を使ってリンクさせます。 --- -# The <nuxt-link> Component +<!-- title: "API: The <nuxt-link> Component" --> +<!-- description: Link the pages between them with nuxt-link. --> -> This component is used to link the page components between them. +<!-- # The <nuxt-link> Component --> -At the moment, `<nuxt-link>` is the same as [`<router-link>`](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). +# The <nuxt-link> コンポーネント -Example (`pages/index.vue`): +<!-- \> This component is used to link the page components between them. --> + +ページ間を nuxt-link を使ってリンクさせます。 + +<!-- At the moment, `<nuxt-link>` is the same as [`<router-link>`](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). --> + +現在のところ `<nuxt-link>` は [`<router-link>`](https://router.vuejs.org/en/api/router-link.html) と同じです。したがって、このコンポーネントの使い方を [vue-router のドキュメント](https://router.vuejs.org/en/api/router-link.html) で確認することをお勧めします。 + +<!-- Example (`pages/index.vue`): --> + +例（`pages/index.vue`）: + +<!-- ```html --> +<!-- <template> --> +<!-- <div> --> +<!-- <h1>Home page</h1> --> +<!-- <nuxt-link to="/about">About</nuxt-link> --> +<!-- </div> --> +<!-- </template> --> +<!-- ``` --> ```html <template> <div> - <h1>Home page</h1> - <nuxt-link to="/about">About</nuxt-link> + <h1>ホーム</h1> + <nuxt-link to="/about">このサイトについて</nuxt-link> </div> </template> ``` -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. +<!-- 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. --> + +将来においては、Nuxt.js アプリケーションの応答性を改善するためにバックグランドでプリフェッチするような機能を nuxt-link コンポーネントに追加する予定です。 From e4ae920cae0c19fa1c4b7a9bfba9f6fefce5ca23 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:44:16 +0900 Subject: [PATCH 048/129] Translate ja/examples/cached-components.md --- ja/examples/cached-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/cached-components.md b/ja/examples/cached-components.md index 1f95cb110..3d7fd91b9 100644 --- a/ja/examples/cached-components.md +++ b/ja/examples/cached-components.md @@ -1,6 +1,6 @@ --- -title: Cached Components -description: Cached Components example with Nuxt.js +title: キャッシュされたコンポーネント +description: Nuxt.js のキャッシュされたコンポーネントの例 github: cached-components documentation: /api/configuration-cache --- \ No newline at end of file From 7976c5223b498d5c4001d923b5bc8061aefdeddd Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:45:00 +0900 Subject: [PATCH 049/129] Make ja/examples/cached-components.md natural --- ja/examples/cached-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/cached-components.md b/ja/examples/cached-components.md index 3d7fd91b9..225e07e29 100644 --- a/ja/examples/cached-components.md +++ b/ja/examples/cached-components.md @@ -1,6 +1,6 @@ --- -title: キャッシュされたコンポーネント -description: Nuxt.js のキャッシュされたコンポーネントの例 +title: コンポーネントのキャッシュ +description: Nuxt.js のコンポーネントのキャッシュの例 github: cached-components documentation: /api/configuration-cache --- \ No newline at end of file From 57ab2562b847d431df938d18a9ddc0bd05caec48 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:45:22 +0900 Subject: [PATCH 050/129] Translate ja/examples/async-data.md --- ja/examples/async-data.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/async-data.md b/ja/examples/async-data.md index 0fa258040..2aee6b856 100644 --- a/ja/examples/async-data.md +++ b/ja/examples/async-data.md @@ -1,6 +1,6 @@ --- -title: Async Data -description: Async Data example with Nuxt.js +title: 非同期データ +description: Nuxt.js で非同期データを取り扱う例 github: async-data documentation: /guide/async-data --- From 05c655dfc41362f8e95e19a7f4f8f0d782e921e1 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:46:46 +0900 Subject: [PATCH 051/129] Translate ja/examples/custom-loading.md --- ja/examples/custom-loading.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/custom-loading.md b/ja/examples/custom-loading.md index d2715818b..d7c8a58e1 100644 --- a/ja/examples/custom-loading.md +++ b/ja/examples/custom-loading.md @@ -1,6 +1,6 @@ --- -title: Custom Loading Component -description: Custom Loading Component example with Nuxt.js +title: カスタムローディングコンポーネント +description: Nuxt.js のカスタムローディングコンポーネントの例 github: custom-loading livedemo: https://custom-loading.nuxtjs.org documentation: /api/configuration-loading From d60612f09c261cae31cb585e2db1467ff7a7bdb1 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:47:58 +0900 Subject: [PATCH 052/129] Translate ja/examples/custom-routes.md --- ja/examples/custom-routes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/custom-routes.md b/ja/examples/custom-routes.md index a9887d9d1..1421a27cd 100644 --- a/ja/examples/custom-routes.md +++ b/ja/examples/custom-routes.md @@ -1,6 +1,6 @@ --- -title: Custom Routes -description: Custom Routes example with Nuxt.js +title: カスタムルーティング +description: Nuxt.js でカスタムルーティングを行う例 github: custom-routes livedemo: https://custom-routes.nuxtjs.org documentation: /guide/routing#dynamic-routes From db9419425bd6931dc691b3fed6f58cb317c45ced Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:49:07 +0900 Subject: [PATCH 053/129] Translate ja/examples/global-css.md --- ja/examples/global-css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/global-css.md b/ja/examples/global-css.md index ecf624f44..20fa78f76 100644 --- a/ja/examples/global-css.md +++ b/ja/examples/global-css.md @@ -1,6 +1,6 @@ --- -title: Global CSS -description: Global CSS example with Nuxt.js +title: グローバル CSS +description: グローバル CSS の例 github: global-css livedemo: https://global-css.nuxtjs.org documentation: /api/configuration-css From b68c419d59bf84478390fa650c30354bc92c230c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:55:01 +0900 Subject: [PATCH 054/129] Improve translation --- ja/examples/async-data.md | 3 +++ ja/examples/cached-components.md | 7 +++++-- ja/examples/custom-loading.md | 5 ++++- ja/examples/custom-routes.md | 5 ++++- ja/examples/global-css.md | 3 +++ 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/ja/examples/async-data.md b/ja/examples/async-data.md index 2aee6b856..9084ffe9e 100644 --- a/ja/examples/async-data.md +++ b/ja/examples/async-data.md @@ -4,3 +4,6 @@ description: Nuxt.js で非同期データを取り扱う例 github: async-data documentation: /guide/async-data --- + +<!-- title: Async Data --> +<!-- description: Async Data example with Nuxt.js --> diff --git a/ja/examples/cached-components.md b/ja/examples/cached-components.md index 225e07e29..791410c25 100644 --- a/ja/examples/cached-components.md +++ b/ja/examples/cached-components.md @@ -1,6 +1,9 @@ --- title: コンポーネントのキャッシュ -description: Nuxt.js のコンポーネントのキャッシュの例 +description: コンポーネントのキャッシュを行う例 github: cached-components documentation: /api/configuration-cache ---- \ No newline at end of file +--- + +<!-- title: Cached Components --> +<!-- description: Cached Components example with Nuxt.js --> diff --git a/ja/examples/custom-loading.md b/ja/examples/custom-loading.md index d7c8a58e1..071fe2c70 100644 --- a/ja/examples/custom-loading.md +++ b/ja/examples/custom-loading.md @@ -1,7 +1,10 @@ --- title: カスタムローディングコンポーネント -description: Nuxt.js のカスタムローディングコンポーネントの例 +description: カスタムローディングコンポーネントの例 github: custom-loading livedemo: https://custom-loading.nuxtjs.org documentation: /api/configuration-loading --- + +<!-- title: Custom Loading Component --> +<!-- description: Custom Loading Component example with Nuxt.js --> diff --git a/ja/examples/custom-routes.md b/ja/examples/custom-routes.md index 1421a27cd..e7e53c4bc 100644 --- a/ja/examples/custom-routes.md +++ b/ja/examples/custom-routes.md @@ -1,7 +1,10 @@ --- title: カスタムルーティング -description: Nuxt.js でカスタムルーティングを行う例 +description: カスタムルーティングを行う例 github: custom-routes livedemo: https://custom-routes.nuxtjs.org documentation: /guide/routing#dynamic-routes --- + +<!-- title: Custom Routes --> +<!-- description: Custom Routes example with Nuxt.js --> diff --git a/ja/examples/global-css.md b/ja/examples/global-css.md index 20fa78f76..c32bb88bf 100644 --- a/ja/examples/global-css.md +++ b/ja/examples/global-css.md @@ -5,3 +5,6 @@ github: global-css livedemo: https://global-css.nuxtjs.org documentation: /api/configuration-css --- + +<!-- title: Global CSS --> +<!-- description: Global CSS example with Nuxt.js --> From 64de0f53a0171cb7c4937a152898e18fafa270f4 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:58:17 +0900 Subject: [PATCH 055/129] Translate ja/examples/hello-world.md --- ja/examples/hello-world.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ja/examples/hello-world.md b/ja/examples/hello-world.md index 472023d18..0eb44f393 100644 --- a/ja/examples/hello-world.md +++ b/ja/examples/hello-world.md @@ -1,9 +1,12 @@ --- title: Hello World -description: Hello World example with Nuxt.js +description: Hello World する例 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 +documentation: /guide/installation#スクラッチから始める --- + +<!-- title: Hello World --> +<!-- description: Hello World example with Nuxt.js --> From a01a8e72af74e7d48909e70a40f1ef04a8398526 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 00:59:45 +0900 Subject: [PATCH 056/129] Translate ja/examples/i18n.md --- ja/examples/i18n.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ja/examples/i18n.md b/ja/examples/i18n.md index ab3b9c629..755532312 100644 --- a/ja/examples/i18n.md +++ b/ja/examples/i18n.md @@ -1,7 +1,10 @@ --- -title: Internationalization (i18n) -description: Internationalization (i18n) example with Nuxt.js +title: 国際化（i18n） +description: 国際化（i18n）の例 github: i18n livedemo: https://i18n.nuxtjs.org -documentation: /guide/routing#middleware +documentation: /guide/routing#ミドルウェア --- + +<!-- title: Internationalization (i18n) --> +<!-- description: Internationalization (i18n) example with Nuxt.js --> From ec46176857d1094702896c1a212bee3bd5e8f8e3 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:00:37 +0900 Subject: [PATCH 057/129] Translate ja/examples/layouts.md --- ja/examples/layouts.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ja/examples/layouts.md b/ja/examples/layouts.md index c5960c826..2766f5ffa 100644 --- a/ja/examples/layouts.md +++ b/ja/examples/layouts.md @@ -1,8 +1,11 @@ --- -title: Layouts -description: Layouts example with Nuxt.js +title: レイアウト +description: レイアウトの例 github: custom-layouts livedemo: https://nuxt-custom-layouts.gomix.me/ liveedit: https://gomix.com/#!/project/nuxt-custom-layouts -documentation: /guide/views#layouts +documentation: /guide/views#レイアウト --- + +<!-- title: Layouts --> +<!-- description: Layouts example with Nuxt.js --> From 2e7b9787727430b53511d23291306006363622c1 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:01:48 +0900 Subject: [PATCH 058/129] Translate ja/examples/middleware.md --- ja/examples/middleware.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ja/examples/middleware.md b/ja/examples/middleware.md index afd8a1552..1cddc895c 100644 --- a/ja/examples/middleware.md +++ b/ja/examples/middleware.md @@ -1,7 +1,10 @@ --- -title: Middleware -description: Middleware example with Nuxt.js +title: ミドルウェア +description: ミドルウェアの例 github: middleware livedemo: https://middleware.nuxtjs.org -documentation: /guide/routing#middleware +documentation: /guide/routing#ミドルウェア --- + +<!-- title: Middleware --> +<!-- description: Middleware example with Nuxt.js --> From fa7ef14bc73f9899ce3944b89778c32dba1d22bf Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:05:20 +0900 Subject: [PATCH 059/129] Translate ja/examples/nested-routes.md --- ja/examples/nested-routes.md | 9 ++++++--- ja/guide/menu.json | 2 +- ja/guide/routing.md | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/ja/examples/nested-routes.md b/ja/examples/nested-routes.md index 471fd28cc..0fc5283be 100644 --- a/ja/examples/nested-routes.md +++ b/ja/examples/nested-routes.md @@ -1,7 +1,10 @@ --- -title: Nested Routes -description: Nested Routes example with Nuxt.js +title: ルーティングのネスト +description: ルーティングのネストの例 github: nested-routes livedemo: https://nested-routes.nuxtjs.org -documentation: /guide/routing#nested-routes +documentation: /guide/routing#ルーティングのネスト --- + +title: Nested Routes +description: Nested Routes example with Nuxt.js diff --git a/ja/guide/menu.json b/ja/guide/menu.json index a77bb8e52..9ce894bcf 100644 --- a/ja/guide/menu.json +++ b/ja/guide/menu.json @@ -40,7 +40,7 @@ "contents": [ { "to": "#ルーティングの基礎", "name": "ルーティングの基礎" }, { "to": "#動的なルーティング", "name": "動的なルーティング" }, - { "to": "#ネストしたルーティング", "name": "ネストしたルーティング" }, + { "to": "#ルーティングのネスト", "name": "ルーティングのネスト" }, { "to": "#動的でネストしたルーティング", "name": "動的でネストしたルーティング" }, { "to": "#トランジション", "name": "トランジション" }, { "to": "#ミドルウェア", "name": "ミドルウェア" } diff --git a/ja/guide/routing.md b/ja/guide/routing.md index 18734dbc5..2be6caf4b 100644 --- a/ja/guide/routing.md +++ b/ja/guide/routing.md @@ -149,7 +149,7 @@ export default { <!-- ## Nested Routes --> -## ネストしたルーティング +## ルーティングのネスト <!-- Nuxt.js lets you create nested route by using the children routes of vue-router. --> From f8165f6cefefd08de5144c8a57920174e4d88427 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:06:51 +0900 Subject: [PATCH 060/129] Translate ja/examples/plugins.md --- ja/examples/plugins.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ja/examples/plugins.md b/ja/examples/plugins.md index d33ed90a5..d4ffe0596 100644 --- a/ja/examples/plugins.md +++ b/ja/examples/plugins.md @@ -1,7 +1,10 @@ --- -title: Plugins -description: Using external modules and plugins with nuxt.js +title: プラグイン +description: 外部モジュール及びプラグインを利用する例 github: plugins-vendor livedemo: https://plugins-vendor.nuxtjs.org documentation: /guide/plugins --- + +<!-- title: Plugins --> +<!-- description: Using external modules and plugins with nuxt.js --> From 44199c39d7145530d8783e3c639e554d8b7b2e9b Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:08:38 +0900 Subject: [PATCH 061/129] Translate ja/examples/routes-transitions.md --- ja/examples/routes-transitions.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ja/examples/routes-transitions.md b/ja/examples/routes-transitions.md index 913888b35..cbc797967 100644 --- a/ja/examples/routes-transitions.md +++ b/ja/examples/routes-transitions.md @@ -1,8 +1,11 @@ --- -title: Routes transitions -description: Routes transitions example with Nuxt.js +title: トランジション +description: ページ間を遷移する際のトランジションの例 github: routes-transitions youtube: https://www.youtube.com/embed/RIXOzJWFfc8 livedemo: https://routes-transitions.nuxtjs.org -documentation: /guide/routing#transitions +documentation: /guide/routing#トランジション --- + +<!-- title: Routes transitions --> +<!-- description: Routes transitions example with Nuxt.js --> From 285b2c2774bf03d27aa363d569af8635a69afc6a Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:10:51 +0900 Subject: [PATCH 062/129] Translate ja/examples/seo-html-head.md --- ja/examples/seo-html-head.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ja/examples/seo-html-head.md b/ja/examples/seo-html-head.md index 02525b10b..40d32c4b1 100644 --- a/ja/examples/seo-html-head.md +++ b/ja/examples/seo-html-head.md @@ -1,7 +1,10 @@ --- -title: SEO HTML Head -description: SEO HTML Head example with Nuxt.js +title: HTML の haad 情報 +description: SEO のために HTML の head 情報を設定する例 github: head-elements livedemo: https://head-elements.nuxtjs.org -documentation: /guide/views#html-head +documentation: /guide/views#html-の-head-情報 --- + +<!-- title: SEO HTML Head --> +<!-- description: SEO HTML Head example with Nuxt.js --> From d2257f0ce60ec8bbac34bdfff7b0bb04c93f8f17 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:11:54 +0900 Subject: [PATCH 063/129] Translate ja/examples/testing.md --- ja/examples/testing.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ja/examples/testing.md b/ja/examples/testing.md index 1221672b4..1c759aded 100644 --- a/ja/examples/testing.md +++ b/ja/examples/testing.md @@ -1,6 +1,9 @@ --- -title: Testing -description: Testing example with Nuxt.js +title: テスト +description: テストの例 github: with-ava -documentation: /guide/development-tools#end-to-end-testing +documentation: /guide/development-tools#エンドツーエンドテスト --- + +<!-- title: Testing --> +<!-- description: Testing example with Nuxt.js --> From feb0a6e2d1e853f258eecd211ee47ad52e6d186c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 01:12:59 +0900 Subject: [PATCH 064/129] Translate ja/examples/vuex-store.md --- ja/examples/vuex-store.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ja/examples/vuex-store.md b/ja/examples/vuex-store.md index e4ff096c1..33dfb1ac9 100644 --- a/ja/examples/vuex-store.md +++ b/ja/examples/vuex-store.md @@ -1,7 +1,10 @@ --- -title: Vuex Store -description: Vuex Store example with Nuxt.js +title: Vuex ストア +description: Nuxt.js で Vuex ストアを使う例 github: vuex-store livedemo: https://vuex-store.nuxtjs.org documentation: /guide/vuex-store --- + +<!-- title: Vuex Store --> +<!-- description: Vuex Store example with Nuxt.js --> From d52a85baf760534152063699716444289c8cfad2 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 18:17:48 +0900 Subject: [PATCH 065/129] Translate ja/api/configuration-build.md --- ja/api/configuration-build.md | 212 ++++++++++++++++++++++++++-------- 1 file changed, 166 insertions(+), 46 deletions(-) diff --git a/ja/api/configuration-build.md b/ja/api/configuration-build.md index a80297d1f..eed6329a4 100644 --- a/ja/api/configuration-build.md +++ b/ja/api/configuration-build.md @@ -1,27 +1,56 @@ --- -title: "API: The build Property" -description: Nuxt.js lets you customize the webpack configuration for building your web application as you want. +title: "API: build プロパティ" +description: Nuxt.js ではウェブアプリケーションを好きなようにビルドできるよう Webpack 設定をカスタマイズできます。 --- -# The build Property +<!-- title: "API: The build Property" --> +<!-- description: Nuxt.js lets you customize the webpack configuration for building your web application as you want. --> -> Nuxt.js lets you customize the webpack configuration for building your web application as you want. +<!-- # The build Property --> + +# build プロパティ + +<!-- \> Nuxt.js lets you customize the webpack configuration for building your web application as you want. --> + +> Nuxt.js ではウェブアプリケーションを好きなようにビルドできるよう Webpack 設定をカスタマイズできます。 ## 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. +<!-- \> Nuxt.js use [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) to let you visualize your bundles and how to optimize them. --> + +> Nuxt.js はバンドルファイルと最適化の仕方を視覚化するために [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) を用います。 + +<!-- - Type: `Boolean` or `Object` --> +<!-- - Default: `false` --> + +- タイプ: `ブーリアン` または `オブジェクト` +- デフォルト: `false` + +<!-- If an object, see available properties [here](https://github.com/th0r/webpack-bundle-analyzer#as-plugin). --> -- Type: `Boolean` or `Object` -- Default: `false` +オブジェクトの場合は、利用できるプロパティは [こちら](https://github.com/th0r/webpack-bundle-analyzer#as-plugin) を参照してください。 -If an object, see available properties [here](https://github.com/th0r/webpack-bundle-analyzer#as-plugin). +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + +<!-- ```js --> +<!-- module.exports = { --> +<!-- build: { --> +<!-- analyze: true --> +<!-- // or --> +<!-- analyze: { --> +<!-- analyzerMode: 'static' --> +<!-- } --> +<!-- } --> +<!-- } --> +<!-- ``` --> -Example (`nuxt.config.js`): ```js module.exports = { build: { analyze: true - // or + // または analyze: { analyzerMode: 'static' } @@ -29,15 +58,24 @@ module.exports = { } ``` -<p class="Alert Alert--teal">**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)</p> +<!-- <p class="Alert Alert--teal">**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)</p> --> + +<p class="Alert Alert--teal">**メモ:** アプリケーションをビルドしてバンドルアナライザを [http://localhost:8888](http://localhost:8888) で起動するために、`nuxt build --analyzer` または `nuxt build -a` コマンドを使うことができます。</p> ## babel -- Type: `Object` +<!-- - Type: `Object` --> + +- タイプ: `オブジェクト` + +<!-- \> Customize babel configuration for JS and Vue files. --> + +> JS や Vue ファイルのために babel の設定をカスタマイズします。 + +<!-- Default: --> -> Customize babel configuration for JS and Vue files. +デフォルト: -Default: ```js { plugins: [ @@ -51,7 +89,10 @@ Default: } ``` -Example (`nuxt.config.js`): +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + ```js module.exports = { build: { @@ -64,20 +105,46 @@ module.exports = { ## extend -- Type: `Function` +<!-- - Type: `Function` --> + +- タイプ: `関数` + +<!-- \> Extend the webpack configuration manually for the client & server bundles. --> + +クライアント及びサーバーのバンドルについて Webpack の設定を手動で拡張します。 + +<!-- The extend is called twice, one time for the server bundle, and one time for the client bundle. The arguments of the method are: --> + +拡張は二度呼び出されます。一度はサーバーのバンドルのため、一度はクライアントのバンドルのためです。メソッドの引数: -> Extend the webpack configuration manually for the client & server bundles. +<!-- 1. Webpack config object --> +<!-- 2. Object with the folowing keys (all boolean): `dev`, `isClient`, `isServer` --> -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` +1. Webpack 設定オブジェクト +2. 次のキーを持つオブジェクト（すべてブーリアン）: `dev`, `isClient`, `isServer` + +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + +<!-- ```js --> +<!-- module.exports = { --> +<!-- build: { --> +<!-- extend (config, { isClient }) { --> +<!-- // Extend only webpack config for client-bundle --> +<!-- if (isClient) { --> +<!-- config.devtool = 'eval-source-map' --> +<!-- } --> +<!-- } --> +<!-- } --> +<!-- } --> +<!-- ``` --> -Example (`nuxt.config.js`): ```js module.exports = { build: { extend (config, { isClient }) { - // Extend only webpack config for client-bundle + // クライアントのバンドルの Webpack 設定のみを拡張する if (isClient) { config.devtool = 'eval-source-map' } @@ -86,15 +153,24 @@ module.exports = { } ``` -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). +<!-- 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). --> + +デフォルトの Webpack の設定についてもう少し見てみたい場合は Nuxt.js の [webpack ディレクトリ](https://github.com/nuxt/nuxt.js/tree/master/lib/webpack) を参照してください。 ## filenames -- Type: `Object` +<!-- - Type: `Object` --> + +- タイプ: `オブジェクト` + +<!-- \> Customize bundle filenames --> -> Customize bundle filenames +> バンドルのファイル名をカスタマイズします。 + +<!-- Default: --> + +デフォルト: -Default: ```js { css: 'style.css', @@ -103,7 +179,10 @@ Default: } ``` -Example (`nuxt.config.js`): +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + ```js module.exports = { build: { @@ -118,12 +197,20 @@ module.exports = { ## loaders -- Type: `Array` - - Items: `Object` +<!-- - Type: `Array` --> +<!-- - Items: `Object` --> + +- タイプ: `配列` + - 要素: `オブジェクト` + +<!-- \> Cusomize webpack loaders --> + +> Webpack のローダーをカスタマイズします。 -> Cusomize webpack loaders +<!-- Default: --> + +デフォルト: -Default: ```js [ { @@ -145,7 +232,10 @@ Default: ] ``` -Example (`nuxt.config.js`): +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + ```js module.exports = { build: { @@ -163,16 +253,26 @@ module.exports = { } ``` -<p class="Alert Alert--orange">When the loaders are defined in the `nuxt.config.js`, the default loaders will be overwritten.</p> +<!-- <p class="Alert Alert--orange">When the loaders are defined in the `nuxt.config.js`, the default loaders will be overwritten.</p> --> + +<p class="Alert Alert--orange">loaders が `nuxt.config.js` で定義されているときは、デフォルトのローダー設定は上書きされます。</p> ## plugins -- Type: `Array` -- Default: `[]` +<!-- - Type: `Array` --> +<!-- - Default: `[]` --> + +- タイプ: `配列` +- デフォルト: `[]` + +<!-- \> Add Webpack plugins --> -> Add Webpack plugins +> Webpack のプラグインを追加します。 + +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: -Example (`nuxt.config.js`): ```js const webpack = require('webpack') @@ -189,11 +289,18 @@ module.exports = { ## postcss -- **Type:** `Array` +<!-- - **Type:** `Array` --> + +- **タイプ:** `配列` + +<!-- \> Customize [postcss](https://github.com/postcss/postcss) options --> -> Customize [postcss](https://github.com/postcss/postcss) options +> [postcss](https://github.com/postcss/postcss) オプションをカスタマイズします。 + +<!-- Default: --> + +デフォルト: -Default: ```js [ require('autoprefixer')({ @@ -202,7 +309,10 @@ Default: ] ``` -Example (`nuxt.config.js`): +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + ```js module.exports = { build: { @@ -220,12 +330,19 @@ module.exports = { ## 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) +<!-- \> 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) --> + +> Nuxt.js では、 app バンドルファイルのサイズを小さくするために生成される `vendor.bundle.js` ファイル内にモジュールを追加できます。外部モジュール（例えば `axios` など）を使うときにとても役に立ちます。 + +<!-- - **Type:** `Array` --> +<!-- - **Items:** `String` --> -- **Type:** `Array` - - **Items:** `String` +- **タイプ:** `配列` + - **要素:** `文字列` -To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`: +<!-- To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`: --> + +vendor バンドルファイル内にモジュール/ファイルを追加するには、`nuxt.config.js` 内の `build.vendor` キーに追加します: ```js module.exports = { @@ -235,7 +352,10 @@ module.exports = { } ``` -You can also give a path to a file, like a custom lib you created: +<!-- You can also give a path to a file, like a custom lib you created: --> + +自分で作成したカスタムライブラリなど、パスを指定することもできます: + ```js module.exports = { build: { From f612c4926bde79bf1b834b0987956415713e7e3c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 18:34:24 +0900 Subject: [PATCH 066/129] Make ja/api/configuration-build.md natural --- ja/api/configuration-build.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ja/api/configuration-build.md b/ja/api/configuration-build.md index eed6329a4..27efec16e 100644 --- a/ja/api/configuration-build.md +++ b/ja/api/configuration-build.md @@ -1,6 +1,6 @@ --- title: "API: build プロパティ" -description: Nuxt.js ではウェブアプリケーションを好きなようにビルドできるよう Webpack 設定をカスタマイズできます。 +description: Nuxt.js ではウェブアプリケーションを自由にビルドできるよう Webpack 設定をカスタマイズできます。 --- <!-- title: "API: The build Property" --> @@ -12,13 +12,13 @@ description: Nuxt.js ではウェブアプリケーションを好きなよう <!-- \> Nuxt.js lets you customize the webpack configuration for building your web application as you want. --> -> Nuxt.js ではウェブアプリケーションを好きなようにビルドできるよう Webpack 設定をカスタマイズできます。 +> Nuxt.js ではウェブアプリケーションを自由にビルドできるよう Webpack 設定をカスタマイズできます。 ## 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. --> -> Nuxt.js はバンドルファイルと最適化の仕方を視覚化するために [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) を用います。 +> Nuxt.js では [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) を使ってバンドルファイルと最適化の仕方を視覚化できます。 <!-- - Type: `Boolean` or `Object` --> <!-- - Default: `false` --> @@ -60,7 +60,7 @@ module.exports = { <!-- <p class="Alert Alert--teal">**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)</p> --> -<p class="Alert Alert--teal">**メモ:** アプリケーションをビルドしてバンドルアナライザを [http://localhost:8888](http://localhost:8888) で起動するために、`nuxt build --analyzer` または `nuxt build -a` コマンドを使うことができます。</p> +<p class="Alert Alert--teal">**情報:** `nuxt build --analyzer` または `nuxt build -a` コマンドを使って、アプリケーションをビルドしてバンドルアナライザを [http://localhost:8888](http://localhost:8888) で起動できます。</p> ## babel @@ -115,7 +115,7 @@ module.exports = { <!-- The extend is called twice, one time for the server bundle, and one time for the client bundle. The arguments of the method are: --> -拡張は二度呼び出されます。一度はサーバーのバンドルのため、一度はクライアントのバンドルのためです。メソッドの引数: +extend メソッドは一度はサーバーのバンドルのため、一度はクライアントのバンドルのため、つまり二度呼び出されます。メソッドの引数は次のとおり: <!-- 1. Webpack config object --> <!-- 2. Object with the folowing keys (all boolean): `dev`, `isClient`, `isServer` --> @@ -332,7 +332,7 @@ module.exports = { <!-- \> 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) --> -> Nuxt.js では、 app バンドルファイルのサイズを小さくするために生成される `vendor.bundle.js` ファイル内にモジュールを追加できます。外部モジュール（例えば `axios` など）を使うときにとても役に立ちます。 +> Nuxt.js では `vendor.bundle.js` ファイル内にモジュールを追加できます。このファイルは app バンドルファイルのサイズを小さくするために生成します。外部モジュール（例えば `axios` など）を使うときにとても便利です。 <!-- - **Type:** `Array` --> <!-- - **Items:** `String` --> @@ -354,7 +354,7 @@ module.exports = { <!-- You can also give a path to a file, like a custom lib you created: --> -自分で作成したカスタムライブラリなど、パスを指定することもできます: +ファイルへのパスを指定することもできます。例えば自分で作成した独自ライブラリを使いたいときなどはファイルへのパスを指定します: ```js module.exports = { From 94931a0f19a1e2c5d3d31318056bda7886e8eb6d Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 19:00:00 +0900 Subject: [PATCH 067/129] Translate ja/api/configuration-cache.md --- ja/api/configuration-cache.md | 58 +++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/ja/api/configuration-cache.md b/ja/api/configuration-cache.md index 5db7a1db0..413c52cf0 100644 --- a/ja/api/configuration-cache.md +++ b/ja/api/configuration-cache.md @@ -1,23 +1,48 @@ --- -title: "API: The cache Property" -description: Nuxt.js use lru-cache to allow cached components for better render performances +title: "API: cache プロパティ" +description: Nuxt.js はレンダリングのパフォーマンス向上を目的としてコンポーネントをキャッシュするために lru-cache を使います。 --- -# The cache Property +<!-- title: "API: The cache Property" --> +<!-- description: Nuxt.js use lru-cache to allow cached components for better render performances --> -> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allow cached components for better render performances +# cache プロパティ -## Usage +<!-- \> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allow cached components for better render performances --> -- **Type:** `Boolean` or `Object` (Default: `false`) +> Nuxt.js はレンダリングのパフォーマンス向上を目的としてコンポーネントをキャッシュするために [lru-cache](https://github.com/isaacs/node-lru-cache) を使います。 -If an object, see [lru-cache options](https://github.com/isaacs/node-lru-cache#options). +<!-- ## Usage --> + +## 使い方 + +<!-- - **Type:** `Boolean` or `Object` (Default: `false`) --> + +- **タイプ:** `ブーリアン` または `オブジェクト`（デフォルト: `false`） + +<!-- If an object, see [lru-cache options](https://github.com/isaacs/node-lru-cache#options). --> + +オブジェクトの場合は [lru-cache オプション](https://github.com/isaacs/node-lru-cache#options) を参照してください。 + +<!-- Use the `cache` key in your `nuxt.config.js`: --> + +`nuxt.config.js` 内で `cache` キーを使います: + +<!-- ```js --> +<!-- module.exports = { --> +<!-- cache: true --> +<!-- // or --> +<!-- cache: { --> +<!-- max: 1000, --> +<!-- maxAge: 900000 --> +<!-- } --> +<!-- } --> +<!-- ``` --> -Use the `cache` key in your `nuxt.config.js`: ```js module.exports = { cache: true - // or + // または cache: { max: 1000, maxAge: 900000 @@ -25,9 +50,16 @@ module.exports = { } ``` -If `cache` is set to `true` the default keys given are: +<!-- If `cache` is set to `true` the default keys given are: --> + +`cache` に `true` がセットされた場合はデフォルトのキーが適用されます: + +<!-- | 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. | --> -| 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. | +| `max` | 必須ではない | 整数 | 1000 | キャッシュするコンポーネントの最大数。1001個目のコンポーネントが追加されるときに、新しくキャッシュするコンポーネントのためにスペースを空ける目的で、最初にキャッシュされたコンポーネントがキャッシュから削除されます | +| `maxAge` | 必須ではない | 整数 | 900000 | キャッシュさせる最大時間をミリ秒で指定します。デフォルトは 15分間です | From 037af580bb3a724cf83ec292c7242c5d91f1cbf7 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 19:02:06 +0900 Subject: [PATCH 068/129] Make ja/api/configuration-cache.md natural --- ja/api/configuration-cache.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/api/configuration-cache.md b/ja/api/configuration-cache.md index 413c52cf0..cdcdce5ee 100644 --- a/ja/api/configuration-cache.md +++ b/ja/api/configuration-cache.md @@ -10,7 +10,7 @@ description: Nuxt.js はレンダリングのパフォーマンス向上を目 <!-- \> Nuxt.js use [lru-cache](https://github.com/isaacs/node-lru-cache) to allow cached components for better render performances --> -> Nuxt.js はレンダリングのパフォーマンス向上を目的としてコンポーネントをキャッシュするために [lru-cache](https://github.com/isaacs/node-lru-cache) を使います。 +> Nuxt.js はレンダリングのパフォーマンス向上を目的としてコンポーネントをキャッシュするために [lru-cache](https://github.com/isaacs/node-lru-cache) を使います。 <!-- ## Usage --> @@ -61,5 +61,5 @@ module.exports = { | キー | 必須か否か | タイプ | デフォルト | 説明 | |------|------------|-----|---------|------------| -| `max` | 必須ではない | 整数 | 1000 | キャッシュするコンポーネントの最大数。1001個目のコンポーネントが追加されるときに、新しくキャッシュするコンポーネントのためにスペースを空ける目的で、最初にキャッシュされたコンポーネントがキャッシュから削除されます | +| `max` | 必須ではない | 整数 | 1000 | キャッシュするコンポーネントの最大数。1001個目のコンポーネントが追加されるときに、スペースを空けるために、最初にキャッシュされたコンポーネントがキャッシュから削除されます | | `maxAge` | 必須ではない | 整数 | 900000 | キャッシュさせる最大時間をミリ秒で指定します。デフォルトは 15分間です | From ed032f59538e8f33b2a05aca3d726b1d66c0640c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 22:04:28 +0900 Subject: [PATCH 069/129] Translate ja/api/configuration-css.md --- ja/api/configuration-css.md | 61 ++++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/ja/api/configuration-css.md b/ja/api/configuration-css.md index 8abd539fc..33c8f42b2 100644 --- a/ja/api/configuration-css.md +++ b/ja/api/configuration-css.md @@ -1,32 +1,65 @@ --- -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). +title: "API: css プロパティ" +description: Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。 --- -# The css Property +<!-- 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). --> -> Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every pages). +<!-- # The css Property --> -- **Type:** `Array` - - **Items:** `String` or `Object` +# css プロパティ -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)) +<!-- \> Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every pages). --> -In `nuxt.config.js`, add the CSS resources: +> Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。 + +<!-- - **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)) --> + +- src: `文字列`（ファイルのパス） +- lang: `文字列`（[使われているプリプロセッサ](/guide/pages#using-pre-processors)） + +<!-- In `nuxt.config.js`, add the CSS resources: --> + +`nuxt.config.js` 内で CSS リソースを追加するには: + +<!-- ```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' --> +<!-- ] --> +<!-- } --> +<!-- ``` --> ```js module.exports = { css: [ - // Load a node.js module + // node.js モジュールをロード 'hover.css/css/hover-min.css', - // node.js module but we specify the pre-processor + // node.js モジュールだがプリプロセッサを指定 { src: 'bulma', lang: 'sass' }, - // Css file in the project + // プロジェクト内の CSS ファイル '~assets/css/main.css' ] } ``` -<p class="Alert">**In production**, all CSS will be minified and extracted in a file named `styles.css` and added in the `<head>` of the page.</p> +<!-- <p class="Alert">**In production**, all CSS will be minified and extracted in a file named `styles.css` and added in the `<head>` of the page.</p> --> + +<p class="Alert">**プロダクションでは**、すべての CSS はミニファイされ `styles.css` というファイルに抽出されます。そして、ページの `<head>` タグに追加されます。</p> From b37eba1a43632c9cc4528081b4da99b521a51148 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 22:09:17 +0900 Subject: [PATCH 070/129] Make ja/api/configuration-css.md natural --- ja/api/configuration-css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/api/configuration-css.md b/ja/api/configuration-css.md index 33c8f42b2..162ae919f 100644 --- a/ja/api/configuration-css.md +++ b/ja/api/configuration-css.md @@ -52,7 +52,7 @@ module.exports = { css: [ // node.js モジュールをロード 'hover.css/css/hover-min.css', - // node.js モジュールだがプリプロセッサを指定 + // node.js モジュール。プリプロセッサを指定 { src: 'bulma', lang: 'sass' }, // プロジェクト内の CSS ファイル '~assets/css/main.css' @@ -62,4 +62,4 @@ module.exports = { <!-- <p class="Alert">**In production**, all CSS will be minified and extracted in a file named `styles.css` and added in the `<head>` of the page.</p> --> -<p class="Alert">**プロダクションでは**、すべての CSS はミニファイされ `styles.css` というファイルに抽出されます。そして、ページの `<head>` タグに追加されます。</p> +<p class="Alert">**プロダクションでは**、すべての CSS はミニファイされ `styles.css` というファイルに抽出されます。そしてページの `<head>` タグ内に `style.css` を読み込む link タグが追加されます。</p> From abad3ddb270d254fde7bd9a1f7b5fb9bcc3f3a6a Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 22:19:12 +0900 Subject: [PATCH 071/129] Translate ja/api/configuration-dev.md --- ja/api/configuration-dev.md | 79 ++++++++++++++++++++++++++++++------- 1 file changed, 64 insertions(+), 15 deletions(-) diff --git a/ja/api/configuration-dev.md b/ja/api/configuration-dev.md index a913984a0..63f199c85 100644 --- a/ja/api/configuration-dev.md +++ b/ja/api/configuration-dev.md @@ -1,24 +1,45 @@ --- -title: "API: The dev Property" -description: Define the development or production mode. +title: "API: dev プロパティ" +description: 開発モードかプロダクションモードかを指定します。 --- -# The dev Property +<!-- title: "API: The dev Property" --> +<!-- description: Define the development or production mode. --> -- Type: `Boolean` -- Default: `true` +<!-- # The dev Property --> -> Define the development or production mode of nuxt.js +# dev プロパティ -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` +<!-- - Type: `Boolean` --> +<!-- - Default: `true` --> -This property should be used when using [nuxt.js programmatically](/api/nuxt): +- タイプ: `ブーリアン` +- デフォルト: `true` -Example: +<!-- \> Define the development or production mode of nuxt.js --> + +> Nuxt.js の開発モードなのかプロダクションモードなのかを指定します。 + +<!-- This property is overwritten by [nuxt commands](/guide/commands): --> + +このプロパティは [nuxt コマンド](/guide/commands) によって上書きされます: + +<!-- - `dev` is forced to `true` with `nuxt` --> +<!-- - `dev` is force to `false` with `nuxt build`, `nuxt start` and `nuxt generate` --> + +- `dev` は `nuxt` コマンドで強制的に `true` になります +- `dev` は `nuxt build`、`nuxt start`、`nuxt generate` コマンドで強制的に `false` になります + +<!-- This property should be used when using [nuxt.js programmatically](/api/nuxt): --> + +このプロパティは [nuxt.js programmatically](/api/nuxt) を用いるときに使われるべきです: + +<!-- Example: --> + +例: `nuxt.config.js` + ```js module.exports = { dev: (process.env.NODE_ENV !== 'production') @@ -26,17 +47,42 @@ module.exports = { ``` `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) --> +<!-- ``` --> + ```js const Nuxt = require('nuxt') const app = require('express')() const port = process.env.PORT || 3000 -// We instantiate Nuxt.js with the options +// Nuxt.js をオプションを用いてインスタンス化する 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) => { @@ -45,12 +91,15 @@ if (config.dev) { }) } -// Listen the server +// サーバーを Listen する app.listen(port, '0.0.0.0') console.log('Server listening on localhost:' + port) ``` -Then in your `package.json`: +<!-- Then in your `package.json`: --> + +それから `package.json` に次のように書きます: + ```json { "scripts": { From da2a9fddcfc73fbed01470d8e5eed3b2c53ad35d Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 28 Feb 2017 22:25:53 +0900 Subject: [PATCH 072/129] Make ja/api/configuration-dev.md natural --- ja/api/configuration-dev.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ja/api/configuration-dev.md b/ja/api/configuration-dev.md index 63f199c85..0141fc316 100644 --- a/ja/api/configuration-dev.md +++ b/ja/api/configuration-dev.md @@ -27,12 +27,12 @@ description: 開発モードかプロダクションモードかを指定しま <!-- - `dev` is forced to `true` with `nuxt` --> <!-- - `dev` is force to `false` with `nuxt build`, `nuxt start` and `nuxt generate` --> -- `dev` は `nuxt` コマンドで強制的に `true` になります -- `dev` は `nuxt build`、`nuxt start`、`nuxt generate` コマンドで強制的に `false` になります +- `nuxt` コマンドを使うときは `dev` は強制的に `true` になります +- `nuxt build`、`nuxt start`、`nuxt generate` コマンドを使うときは `dev` は強制的に `false` になります <!-- This property should be used when using [nuxt.js programmatically](/api/nuxt): --> -このプロパティは [nuxt.js programmatically](/api/nuxt) を用いるときに使われるべきです: +このプロパティは [Nuxt.js をプログラムで使う](/api/nuxt) ときに合わせて使うと良いです: <!-- Example: --> @@ -77,7 +77,7 @@ const Nuxt = require('nuxt') const app = require('express')() const port = process.env.PORT || 3000 -// Nuxt.js をオプションを用いてインスタンス化する +// Nuxt.js をオプションを使ってインスタンス化する let config = require('./nuxt.config.js') const nuxt = new Nuxt(config) app.use(nuxt.render) From b63ff49ab35bf07a9d5749a0b70c8e4f6622053a Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 21:28:35 +0900 Subject: [PATCH 073/129] Translate ja/api/configuration-env.md --- ja/api/configuration-env.md | 52 +++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/ja/api/configuration-env.md b/ja/api/configuration-env.md index 12765e988..3a47f1927 100644 --- a/ja/api/configuration-env.md +++ b/ja/api/configuration-env.md @@ -1,15 +1,26 @@ --- -title: "API: The env Property" -description: Share environment variables between client and server. +title: "API: env プロパティ" +description: クライアントとサーバー間で環境変数を共有します。 --- -# The env Property +<!-- title: "API: The env Property" --> +<!-- description: Share environment variables between client and server. --> -- Type: `Object` +<!-- # The env Property --> -> Nuxt.js lets you create environment variables that will be shared for the client and server-side. +# env プロパティ -Example (`nuxt.config.js`): +<!-- - Type: `Object` --> + +- タイプ: `オブジェクト` + +<!-- \> Nuxt.js lets you create environment variables that will be shared for the client and server-side. --> + +Nuxt.js ではクライアントサイドとサーバーサイドで共有される環境変数を作成できます。 + +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: ```js module.exports = { @@ -19,17 +30,30 @@ module.exports = { } ``` -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`. +<!-- 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`. --> + +このように記述すると `baseUrl` プロパティは、環境変数 `BASE_URL` が定義されていればそれと同様になり、そうでなければ `http://localhost:3000` と同様になります。 + +<!-- Then, I can access my `baseUrl` variable with 2 ways: --> -Then, I can access my `baseUrl` variable with 2 ways: -1. Via `process.env.baseUrl` -2. Via `context.baseUrl`, see [context api](/api#context) +そして `baseUrl` 変数にアクセスするには 2つの方法があります: -You can use the `env` property for giving public token for example. +<!-- 1. Via `process.env.baseUrl` --> +<!-- 2. Via `context.baseUrl`, see [context api](/api#context) --> -For the example above, we can use it to configure [axios](https://github.com/mzabriskie/axios). +1. `process.env.baseUrl` を経由する +2. `context.baseUrl` を経由する。詳細は [context API](/api#context) + +<!-- You can use the `env` property for giving public token for example. --> + +例えば公開トークンを付与するために `env` プロパティを使うことができます。 + +<!-- For the example above, we can use it to configure [axios](https://github.com/mzabriskie/axios). --> + +そのような例として [axios](https://github.com/mzabriskie/axios) を設定するために env プロパティを使うことができます。 `plugins/axios.js`: + ```js import axios from 'axios' @@ -38,4 +62,6 @@ export default axios.create({ }) ``` -Then, in your pages, you can import axios like this: `import axios from '~plugins/axios'` +<!-- Then, in your pages, you can import axios like this: `import axios from '~plugins/axios'` --> + +そうするとページ内で次のように axios をインポートできます: `import axios from '~plugins/axios'` From 2a6b44cb3e560c388077298d7d0ab59c9b2eb229 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 21:34:08 +0900 Subject: [PATCH 074/129] Make ja/api/configuration-env.md natural --- ja/api/configuration-env.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ja/api/configuration-env.md b/ja/api/configuration-env.md index 3a47f1927..275c4c0c6 100644 --- a/ja/api/configuration-env.md +++ b/ja/api/configuration-env.md @@ -1,6 +1,6 @@ --- title: "API: env プロパティ" -description: クライアントとサーバー間で環境変数を共有します。 +description: クライアントサイドとサーバーサイドで環境変数を共有します。 --- <!-- title: "API: The env Property" --> @@ -32,7 +32,7 @@ module.exports = { <!-- 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`. --> -このように記述すると `baseUrl` プロパティは、環境変数 `BASE_URL` が定義されていればそれと同様になり、そうでなければ `http://localhost:3000` と同様になります。 +このように記述すると `baseUrl` プロパティは、環境変数 `BASE_URL` が定義されていればそれと同じになり、そうでなければ `http://localhost:3000` になります。 <!-- Then, I can access my `baseUrl` variable with 2 ways: --> @@ -41,16 +41,16 @@ module.exports = { <!-- 1. Via `process.env.baseUrl` --> <!-- 2. Via `context.baseUrl`, see [context api](/api#context) --> -1. `process.env.baseUrl` を経由する +1. `process.env.baseUrl` 経由でアクセスする 2. `context.baseUrl` を経由する。詳細は [context API](/api#context) <!-- You can use the `env` property for giving public token for example. --> -例えば公開トークンを付与するために `env` プロパティを使うことができます。 +例えば `env` プロパティを使って公開トークンを付与することができます。 <!-- For the example above, we can use it to configure [axios](https://github.com/mzabriskie/axios). --> -そのような例として [axios](https://github.com/mzabriskie/axios) を設定するために env プロパティを使うことができます。 +上記の例として env プロパティを使って [axios](https://github.com/mzabriskie/axios) を設定できます。 `plugins/axios.js`: @@ -64,4 +64,4 @@ export default axios.create({ <!-- Then, in your pages, you can import axios like this: `import axios from '~plugins/axios'` --> -そうするとページ内で次のように axios をインポートできます: `import axios from '~plugins/axios'` +このように記述するとページ内で `import axios from '~plugins/axios'` という具合に axios をインポートできます。 From 0a4905d0feaade70d69ab3064a1480e6be6d9f5c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 21:51:48 +0900 Subject: [PATCH 075/129] Translate ja/api/configuration-generate.md --- ja/api/configuration-generate.md | 82 ++++++++++++++++++++++++-------- 1 file changed, 62 insertions(+), 20 deletions(-) diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md index 1e3886819..f5172e07a 100644 --- a/ja/api/configuration-generate.md +++ b/ja/api/configuration-generate.md @@ -1,22 +1,38 @@ --- -title: "API: The generate Property" -description: Configure the generation of your universal web application to a static web application. +title: "API: generate プロパティ" +description: ユニバーサルなウェブアプリケーションから静的なウェブアプリケーションの生成について設定します。 --- -# The generate Property +<!-- title: "API: The generate Property" --> +<!-- description: Configure the generation of your universal web application to a static web application. --> -- Type: `Object` +<!-- # The generate Property --> + +# generate プロパティ + +<!-- - Type: `Object` --> + +- タイプ: `オブジェクト` + +<!-- \> Configure the generation of your universal web application to a static web application. --> + +> ユニバーサルなウェブアプリケーションから静的なウェブアプリケーションの生成について設定します。 -> 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. --> -When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use the configuration defined in the `generate` property. +`nuxt generate` を実行するか `nuxt.generate()` を呼び出したときに、Nuxt.js は `generete` プロパティで定義された設定を使います。 ## dir -- Type: 'Sring' -- Default: `'dist'` +<!-- - Type: 'Sring' --> +<!-- - Default: `'dist'` --> -Directory name created by `nuxt generate`. +- タイプ: '文字列' +- デフォルト: `'dist'` + +<!-- Directory name created by `nuxt generate`. --> + +`nuxt generate` で作成されるディレクトリ名です。 ## routeParams @@ -24,9 +40,15 @@ Directory name created by `nuxt generate`. - 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. +- タイプType: `オブジェクト` + - キー: `文字列`（ルートのパス） + - 値: `配列` または `関数` + +[動的なルーティング](/guide/routing#dynamic-routes) を使うときは、生成するためにパラメータとそれぞれの動的なルートとのマッピングを定義する必要があります。 -Example: +<!-- Example: --> + +例: ```bash -| pages/ @@ -35,15 +57,22 @@ Example: -----| _id.vue ``` -The routes generated by nuxt.js are `/` and `/users/:id`. +<!-- The routes generated by nuxt.js are `/` and `/users/:id`. --> + +Nuxt.js によって生成されるルートは `/` と `/users/:id` です。 -If you try to launch `nuxt generate`, the terminal will exit with an error: +<!-- If you try to launch `nuxt generate`, the terminal will exit with an error: --> + +`nuxt generate` を実行しようとすると、ターミナルはエラーで終了するでしょう: ```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`: +<!-- We add the mapping for `/users/:id` in `nuxt.config.js`: --> + +`nuxt.config.js` 内に `/users/:id` のマッピングを追加します: + ```js module.exports = { generate: { @@ -58,7 +87,10 @@ module.exports = { } ``` -Then when we launch `nuxt generate`: +<!-- Then when we launch `nuxt generate`: --> + +それから `nuxt generate` を実行します: + ```bash [nuxt] Generating... [...] @@ -74,13 +106,22 @@ 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) +<!-- Great, but what if we have **dynamic params**? --> + +いいですね。しかし、もし **動的なパラメータ** が必要な場合はどうでしょう？ -### Function which returns a Promise +<!-- 1. Use a `Function` which returns a `Promise` --> +<!-- 2. Use a `Function` with a callback(err, params) --> + +1. `Promise` を返す `関数` を使ってください +2. コールバックと一緒に `関数` を使ってください + +<!-- ### Function which returns a Promise --> + +### Promise を返す関数を使う `nuxt.config.js` + ```js import axios from 'axios' @@ -100,9 +141,10 @@ module.exports = { } ``` -## Function with a callback +## コールバックと一緒に関数を使う `nuxt.config.js` + ```js import axios from 'axios' From 337c83fa4c33de6c45421bd62bc9a41a092033ca Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 21:57:23 +0900 Subject: [PATCH 076/129] Make ja/api/configuration-generate.md natural --- ja/api/configuration-generate.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md index f5172e07a..9971d43ce 100644 --- a/ja/api/configuration-generate.md +++ b/ja/api/configuration-generate.md @@ -20,7 +20,7 @@ description: ユニバーサルなウェブアプリケーションから静的 <!-- When launching `nuxt generate` or calling `nuxt.generate()`, nuxt.js will use the configuration defined in the `generate` property. --> -`nuxt generate` を実行するか `nuxt.generate()` を呼び出したときに、Nuxt.js は `generete` プロパティで定義された設定を使います。 +`nuxt generate` コマンドを実行するか `nuxt.generate()` を呼び出したとき、Nuxt.js は `generete` プロパティで定義された設定を使います。 ## dir @@ -36,15 +36,17 @@ description: ユニバーサルなウェブアプリケーションから静的 ## routeParams -- Type: `Object` - - Key: `String` (route path) - - Value: `Array` or `Function` +<!-- - Type: `Object` --> +<!-- - Key: `String` (route path) --> +<!-- - Value: `Array` or `Function` --> - タイプType: `オブジェクト` - キー: `文字列`（ルートのパス） - 値: `配列` または `関数` -[動的なルーティング](/guide/routing#dynamic-routes) を使うときは、生成するためにパラメータとそれぞれの動的なルートとのマッピングを定義する必要があります。 +<!-- When using [dynamic routes](/guide/routing#dynamic-routes), you need to define a mapping of params for each dynamic route to generate. --> + +[動的なルーティング](/guide/routing#dynamic-routes) を使うときは、パラメータとそれぞれの動的なルートとのマッピングを定義する必要があります。 <!-- Example: --> @@ -63,7 +65,7 @@ Nuxt.js によって生成されるルートは `/` と `/users/:id` です。 <!-- If you try to launch `nuxt generate`, the terminal will exit with an error: --> -`nuxt generate` を実行しようとすると、ターミナルはエラーで終了するでしょう: +上のような設定で `nuxt generate` コマンドを実行しようとすると、ターミナルはエラー終了するでしょう: ```bash Could not generate the dynamic route /users/:id, please add the mapping params in nuxt.config.js (generate.routeParams). @@ -71,7 +73,7 @@ Could not generate the dynamic route /users/:id, please add the mapping params i <!-- We add the mapping for `/users/:id` in `nuxt.config.js`: --> -`nuxt.config.js` 内に `/users/:id` のマッピングを追加します: +そこで `nuxt.config.js` 内に `/users/:id` のマッピングを追加します: ```js module.exports = { @@ -89,7 +91,7 @@ module.exports = { <!-- Then when we launch `nuxt generate`: --> -それから `nuxt generate` を実行します: +そして `nuxt generate` を実行します: ```bash [nuxt] Generating... @@ -113,8 +115,8 @@ nuxt:generate HTML Files generated in 7.6s +6ms <!-- 1. Use a `Function` which returns a `Promise` --> <!-- 2. Use a `Function` with a callback(err, params) --> -1. `Promise` を返す `関数` を使ってください -2. コールバックと一緒に `関数` を使ってください +1. `Promise` を返す `関数` を使う +2. コールバックと一緒に `関数` を使う <!-- ### Function which returns a Promise --> From 949959e44f811a90a08336db5930f931ad4e5377 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 22:06:48 +0900 Subject: [PATCH 077/129] Translate ja/api/configuration-head.md --- ja/api/configuration-head.md | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/ja/api/configuration-head.md b/ja/api/configuration-head.md index 3c8e71286..ccef7fd8d 100644 --- a/ja/api/configuration-head.md +++ b/ja/api/configuration-head.md @@ -1,13 +1,22 @@ --- -title: "API: The head Property" -description: Nuxt.js let you define all default meta for your application inside nuxt.config.js. +title: "API: head プロパティ" +description: Nuxt.js では nuxt.config.js 内にアプリケーションのすべてのデフォルトのメタ情報を定義できます。 --- -# The head Property +<!-- title: "API: The head Property" --> +<!-- description: Nuxt.js let you define all default meta for your application inside nuxt.config.js. --> -> Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: +<!-- # The head Property --> -- **Type:** `Object` +# head プロパティ + +<!-- \> Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: --> + +Nuxt.js では `nuxt.config.js` 内にアプリケーションのすべてのデフォ府とのメタ情報を定義できます。それには `head` プロパティを使います: + +<!-- - **Type:** `Object` --> + +- **タイプ:** `オブジェクト` ```js module.exports = { @@ -22,6 +31,10 @@ module.exports = { } ``` -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). +<!-- 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). --> + +`head` に設定できるオプション一覧を知るには [vue-meta documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties) を参照してください。 + +<!-- <p class="Alert Alert--teal"><b>INFO:</b> You can also use `head` in the page components and access to the component data through `this`, see [component head property](/api/pages-head).</p> --> -<p class="Alert Alert--teal"><b>INFO:</b> You can also use `head` in the page components and access to the component data through `this`, see [component head property](/api/pages-head).</p> +<p class="Alert Alert--teal"><b>情報:</b> ページコンポーネントでも `head` を使うことができます。`this` を経由してコンポーネントのデータにアクセスできます。[コンポーネントの head プロパティ](/api/pages-head) を参照してください。</p> From f7811f7d14a441185f41a09661a5bebde1e124bb Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 22:08:22 +0900 Subject: [PATCH 078/129] Make ja/api/configuration-head.md natural --- ja/api/configuration-head.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ja/api/configuration-head.md b/ja/api/configuration-head.md index ccef7fd8d..04cb4adf8 100644 --- a/ja/api/configuration-head.md +++ b/ja/api/configuration-head.md @@ -1,6 +1,6 @@ --- title: "API: head プロパティ" -description: Nuxt.js では nuxt.config.js 内にアプリケーションのすべてのデフォルトのメタ情報を定義できます。 +description: Nuxt.js では nuxt.config.js 内にアプリケーションのデフォルトのメタ情報を定義できます。 --- <!-- title: "API: The head Property" --> @@ -12,7 +12,7 @@ description: Nuxt.js では nuxt.config.js 内にアプリケーションのす <!-- \> Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property: --> -Nuxt.js では `nuxt.config.js` 内にアプリケーションのすべてのデフォ府とのメタ情報を定義できます。それには `head` プロパティを使います: +Nuxt.js では `nuxt.config.js` 内にアプリケーションのデフォルトのメタ情報を定義できます。それには `head` プロパティを使います: <!-- - **Type:** `Object` --> @@ -33,8 +33,8 @@ module.exports = { <!-- 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). --> -`head` に設定できるオプション一覧を知るには [vue-meta documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties) を参照してください。 +`head` に設定できるオプション一覧は [vue-meta のドキュメント](https://github.com/declandewet/vue-meta#recognized-metainfo-properties) を参照してください。 <!-- <p class="Alert Alert--teal"><b>INFO:</b> You can also use `head` in the page components and access to the component data through `this`, see [component head property](/api/pages-head).</p> --> -<p class="Alert Alert--teal"><b>情報:</b> ページコンポーネントでも `head` を使うことができます。`this` を経由してコンポーネントのデータにアクセスできます。[コンポーネントの head プロパティ](/api/pages-head) を参照してください。</p> +<p class="Alert Alert--teal"><b>情報:</b> ページのコンポーネントでも `head` を使うことができ、`this` を経由してコンポーネントのデータにアクセスできます。詳しくは [コンポーネントの head プロパティ](/api/pages-head) を参照してください。</p> From c8006df40bd8d180cb91986b7c55976b5d67dc7f Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 22:47:28 +0900 Subject: [PATCH 079/129] Translate ja/api/configuration-loading.md --- ja/api/configuration-loading.md | 106 +++++++++++++++++++++++--------- 1 file changed, 78 insertions(+), 28 deletions(-) diff --git a/ja/api/configuration-loading.md b/ja/api/configuration-loading.md index a1276936a..ac60c0fc4 100644 --- a/ja/api/configuration-loading.md +++ b/ja/api/configuration-loading.md @@ -1,19 +1,34 @@ --- -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. +title: "API: loading プロパティ" +description: Nuxt.js はルートから別のルートへ遷移する間、プログレスバーを表示するために自身のコンポーネントを使います。これをカスタマイズしたり、プログレスバーを使わないようにしたり、独自のコンポーネントを作成したりできます。 --- -# The loading Property +<!-- 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. --> -- Type: `Boolean` or `Object` or `String` +<!-- # The loading Property --> -> 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. +# loadding プロパティ -## Disable the Progress Bar +<!-- - Type: `Boolean` or `Object` or `String` --> -- 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: +<!-- \> 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. --> + +> Nuxt.js はルートから別のルートへ遷移する間、プログレスバーを表示するために自身のコンポーネントを使います。これをカスタマイズしたり、プログレスバーを使わないようにしたり、独自のコンポーネントを作成したりできます。 + +<!-- ## 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: --> + +ルートから別のルートへ遷移する間にプログレスバーを表示したくないときは `nuxt.config.js` ファイル内に単に `loading: false` と記述します: ```js module.exports = { @@ -21,20 +36,35 @@ module.exports = { } ``` -## Customize the Progress Bar +<!-- ## Customize the Progress Bar --> + +## プログレスバーをカスタマイズする + +<!-- - Type: `Object` --> + +- タイプ: `オブジェクト` -- Type: `Object` +<!-- List of properties to customize the progress bar. --> -List of properties to customize the progress bar. +プログレスバーをカスタマイズするプロパティ一覧。 -| Key | Type | Default | Description | +<!-- | 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. | --> + +| キー | タイプ | デフォルト | 説明 | |-----|------|---------|-------------| -| `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. | +| `color` | 文字列 | `'black'` | プログレスバーの CSS カラー | +| `failedColor` | 文字列 | `'red'` | 当該ルートをレンダリング中にエラーが発生した場合のプログレスバーの CSS カラー（例えば `data` または `fetch` がエラーを返したとき） | +| `height` | 文字列 | `'2px'` | プログレスバーの高さ（プログレスバーの `style` プロパティで使われます） | +| `duration` | 数値 | `5000` | プログレスバーの最大継続時間をミリ秒で指定します。Nuxt.js は各ルートは 5秒以内にレンダリングされると想定しています | + +<!-- For a blue progress bar with 5px of height, we update the `nuxt.config.js` to the following: --> -For a blue progress bar with 5px of height, we update the `nuxt.config.js` to the following: +青いプログレスバーを 5px の高さで表示するには `nuxt.config.js` を次のように更新します: ```js module.exports = { @@ -45,22 +75,40 @@ module.exports = { } ``` -## Use a Custom Loading Component +<!-- ## Use a Custom Loading Component --> + +## 独自のコンポーネントを使う + +<!-- - Type: `String` --> + +- タイプ: `文字列` -- 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. --> -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. +Nuxt.js がデフォルトのコンポーネントの代わりに呼び出す、独自のコンポーネントを作成できます。そのためには `loading` オプション内に独自コンポーネントのパスを指定する必要があります。そうすれば独自コンポーネントは Nuxt.js により直接呼び出されます。 -**Your component has to expose some of theses methods:** +<!-- **Your component has to expose some of theses methods:** --> -| Method | Required | Description | +**独自コンポーネントはいくつかのメソッドを使えるようにしている必要があります:** + +<!-- | 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. | --> + +| メソッド | 必須か否か | 説明 | |--------|----------|-------------| -| `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. | +| `start()` | 必須 | ルートが変更されたときに呼び出されます。ここが独自コンポーネントが表示される時点です | +| `finish()` | 必須 | ルートがロード（及びデータ取得）されたときに呼び出されます。ここが独自コンポーネントが非表示になる時点です | +| `fail()` | *必須でない* | ルートがロードできなかったときに呼び出されます（例えばデータの取得に失敗したなど） | +| `increase(num)` | *必須でない* | ルートのコンポーネントがロードされている間に呼び出されます。`num` は 100 未満の整数です | + +<!-- We can create our custom component in `components/loading.vue`: --> + +`components/loading.vue` に独自コンポーネントを作ることができます: -We can create our custom component in `components/loading.vue`: ```html <template lang="html"> <div class="loading-page" v-if="loading"> @@ -100,7 +148,9 @@ export default { </style> ``` -Then, we update our `nuxt.config.js` to tell Nuxt.js to use our component: +<!-- Then, we update our `nuxt.config.js` to tell Nuxt.js to use our component: --> + +それから `nuxt.config.js` を更新して、独自コンポーネントを使うことを Nuxt.js に伝えます: ```js module.exports = { From 788a0c5d61ace844bea07b035f4f86484b529799 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 22:58:13 +0900 Subject: [PATCH 080/129] Make ja/api/configuration-loading.md natural --- ja/api/configuration-loading.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ja/api/configuration-loading.md b/ja/api/configuration-loading.md index ac60c0fc4..fc8a902fc 100644 --- a/ja/api/configuration-loading.md +++ b/ja/api/configuration-loading.md @@ -46,7 +46,7 @@ module.exports = { <!-- List of properties to customize the progress bar. --> -プログレスバーをカスタマイズするプロパティ一覧。 +プログレスバーをカスタマイズするために使えるプロパティ一覧。 <!-- | Key | Type | Default | Description | --> <!-- |-----|------|---------|-------------| --> @@ -58,13 +58,13 @@ module.exports = { | キー | タイプ | デフォルト | 説明 | |-----|------|---------|-------------| | `color` | 文字列 | `'black'` | プログレスバーの CSS カラー | -| `failedColor` | 文字列 | `'red'` | 当該ルートをレンダリング中にエラーが発生した場合のプログレスバーの CSS カラー（例えば `data` または `fetch` がエラーを返したとき） | +| `failedColor` | 文字列 | `'red'` | ルートをレンダリング中にエラーが発生した場合のプログレスバーの CSS カラー（例えば `data` または `fetch` がエラーを返したとき） | | `height` | 文字列 | `'2px'` | プログレスバーの高さ（プログレスバーの `style` プロパティで使われます） | -| `duration` | 数値 | `5000` | プログレスバーの最大継続時間をミリ秒で指定します。Nuxt.js は各ルートは 5秒以内にレンダリングされると想定しています | +| `duration` | 数値 | `5000` | プログレスバーを表示する時間の最大値をミリ秒で指定します。Nuxt.js は各ルートが 5秒以内にレンダリングされると想定しています | <!-- For a blue progress bar with 5px of height, we update the `nuxt.config.js` to the following: --> -青いプログレスバーを 5px の高さで表示するには `nuxt.config.js` を次のように更新します: +例として、青いプログレスバーを 5px の高さで表示するには `nuxt.config.js` を次のように編集します: ```js module.exports = { @@ -89,7 +89,7 @@ Nuxt.js がデフォルトのコンポーネントの代わりに呼び出す、 <!-- **Your component has to expose some of theses methods:** --> -**独自コンポーネントはいくつかのメソッドを使えるようにしている必要があります:** +**独自コンポーネントはいくつかのメソッドを備えている必要があります:** <!-- | Method | Required | Description | --> <!-- |--------|----------|-------------| --> @@ -100,8 +100,8 @@ Nuxt.js がデフォルトのコンポーネントの代わりに呼び出す、 | メソッド | 必須か否か | 説明 | |--------|----------|-------------| -| `start()` | 必須 | ルートが変更されたときに呼び出されます。ここが独自コンポーネントが表示される時点です | -| `finish()` | 必須 | ルートがロード（及びデータ取得）されたときに呼び出されます。ここが独自コンポーネントが非表示になる時点です | +| `start()` | 必須 | ルートが変更されたときに呼び出されます。このときに独自コンポーネントの表示が開始されます | +| `finish()` | 必須 | ルートがロード（及びデータ取得）されたときに呼び出されます。このときに独自コンポーネントが表示が終了します | | `fail()` | *必須でない* | ルートがロードできなかったときに呼び出されます（例えばデータの取得に失敗したなど） | | `increase(num)` | *必須でない* | ルートのコンポーネントがロードされている間に呼び出されます。`num` は 100 未満の整数です | @@ -150,7 +150,7 @@ export default { <!-- Then, we update our `nuxt.config.js` to tell Nuxt.js to use our component: --> -それから `nuxt.config.js` を更新して、独自コンポーネントを使うことを Nuxt.js に伝えます: +それから `nuxt.config.js` を編集して、独自コンポーネントを使うことを Nuxt.js に伝えます: ```js module.exports = { From 217125cd13d13b3aef80cc14ba9f47676745efe0 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 23:10:17 +0900 Subject: [PATCH 081/129] Translate ja/api/configuration-plugins.md --- ja/api/configuration-plugins.md | 44 ++++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/ja/api/configuration-plugins.md b/ja/api/configuration-plugins.md index 6998e0082..33358cccf 100644 --- a/ja/api/configuration-plugins.md +++ b/ja/api/configuration-plugins.md @@ -1,23 +1,39 @@ --- -title: "API: The plugins Property" -description: Use vue.js plugins with the plugins option of nuxt.js. +title: "API: plugins プロパティ" +description: Nuxt.js の plugins オプションで Vue.js プラグインを使うことができます。 --- -# The plugins Property +<!-- title: "API: The plugins Property" --> +<!-- description: Use vue.js plugins with the plugins option of nuxt.js. --> -- Type: `Array` - - Items: `String` +<!-- # The plugins Property --> -> The plugins property lets you add vue.js plugins easily to your main application. +# plugins プロパティ + +<!-- - Type: `Array` --> +<!-- - Items: `String` --> + +- タイプ: `配列` + - 要素: `文字列` + +<!-- \> The plugins property lets you add vue.js plugins easily to your main application. --> + +> plugins プロパティを使うと Vue.js プラグインをメインアプリケーションに簡単に追加できます。 + +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: -Example (`nuxt.config.js`): ```js module.exports = { plugins: ['~plugins/vue-notifications'] } ``` -Then, we need to create a file in `plugins/vue-notifications.js`: +<!-- Then, we need to create a file in `plugins/vue-notifications.js`: --> + +それから `plugins/vue-notifications.js` ファイルを作る必要があります: + ```js import Vue from 'vue' import VueNotifications from 'vue-notifications' @@ -25,8 +41,14 @@ import VueNotifications from 'vue-notifications' Vue.use(VueNotifications) ``` -All the paths defined in the `plugins` property will be **imported** before initializing the main application. +<!-- All the paths defined in the `plugins` property will be **imported** before initializing the main application. --> + +`plugins` プロパティで設定されたパスはすべて、メインアプリケーションが初期化される前に **インポート** されます。 + +<!-- 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`. --> + +`Vue.use()` を使う必要があるときは毎回 `plugins/` 内にファイルを作成し、そのパスを `nuxt.config.js` 内の `plugins` に追加する必要があります。 -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). --> -To learn more how to use the plugins, see the [guide documentation](/guide/plugins#vue-plugins). +plugins の使い方をより深く理解するには [guide ドキュメント](/guide/plugins#vue-plugins) を参照してください。 From 70d44abea047e75c994ecafa4c64709b04d6a485 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 23:32:39 +0900 Subject: [PATCH 082/129] Translate ja/api/configuration-rootdir.md --- ja/api/configuration-rootdir.md | 34 ++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/ja/api/configuration-rootdir.md b/ja/api/configuration-rootdir.md index f4570d221..906e4b2bd 100644 --- a/ja/api/configuration-rootdir.md +++ b/ja/api/configuration-rootdir.md @@ -1,17 +1,33 @@ --- -title: "API: The rootDir Property" -description: Define the workspace of nuxt.js application +title: "API: rootDir プロパティ" +description: Nuxt.js アプリケーションのワークスペースを指定します。 --- -# The rootDir Property +<!-- title: "API: The rootDir Property" --> +<!-- description: Define the workspace of nuxt.js application --> -- Type: `String` -- Default: `process.cwd()` +<!-- # The rootDir Property --> -> Define the workspace of your nuxt.js application. +# rootDir プロパティ -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). +<!-- - Type: `String` --> +<!-- - Default: `process.cwd()` --> -This property should be used when using [nuxt.js programmatically](/api/nuxt). +- タイプ: `文字列` +- デフォルト: `process.cwd()` -<p class="Alert Alert--blue">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).</p> +<!-- \> Define the workspace of your nuxt.js application. --> + +Nuxt.js アプリケーションのワークスペースを指定します。 + +<!-- 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). --> + +このプロパティは [nuxt コマンド](/guide/commands) により上書きされ、そのコマンドの引数がセットされます（例: `nuxt my-app/` を実行すると `rootDir` に `my-app/` が絶対パス付きでセットされます） + +<!-- This property should be used when using [nuxt.js programmatically](/api/nuxt). --> + +このプロパティは [Nuxt.js をプログラムで使う](/api/nuxt) ときに用いられるべきです。 + +<!-- <p class="Alert Alert--blue">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).</p> --> + +<p class="Alert Alert--blue">このオプションの否定的な側面は `node_modules` ディレクトリが `rootDir` フォルダ内にあることを求められることです。もしアプリケーションのパスを node_modules なしで設定したいときは [`srcDir` オプション](/api/configuration-srcdir) を使ってください。</p> From c52d898af83e77104a64591aa8718bb2be23aeb2 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 23:35:55 +0900 Subject: [PATCH 083/129] Make ja/api/configuration-rootdir.md natural --- ja/api/configuration-rootdir.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/api/configuration-rootdir.md b/ja/api/configuration-rootdir.md index 906e4b2bd..c13f08814 100644 --- a/ja/api/configuration-rootdir.md +++ b/ja/api/configuration-rootdir.md @@ -26,8 +26,8 @@ Nuxt.js アプリケーションのワークスペースを指定します。 <!-- This property should be used when using [nuxt.js programmatically](/api/nuxt). --> -このプロパティは [Nuxt.js をプログラムで使う](/api/nuxt) ときに用いられるべきです。 +このプロパティは [Nuxt.js をプログラムで使う](/api/nuxt) ときに用いると良いです。 <!-- <p class="Alert Alert--blue">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).</p> --> -<p class="Alert Alert--blue">このオプションの否定的な側面は `node_modules` ディレクトリが `rootDir` フォルダ内にあることを求められることです。もしアプリケーションのパスを node_modules なしで設定したいときは [`srcDir` オプション](/api/configuration-srcdir) を使ってください。</p> +<p class="Alert Alert--blue">このオプションは `node_modules` ディレクトリが `rootDir` フォルダ内にあることを求めるという側面もあります。もしアプリケーションのパスを node_modules なしで設定したいときは [`srcDir` オプション](/api/configuration-srcdir) を使ってください。</p> From 2e3e88a4bc8a6ce9d1c8fffc288d5b31d589f058 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 23:45:03 +0900 Subject: [PATCH 084/129] Translate ja/api/configuration-srcdir.md --- ja/api/configuration-srcdir.md | 35 +++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/ja/api/configuration-srcdir.md b/ja/api/configuration-srcdir.md index 9b23566d0..e64c34230 100644 --- a/ja/api/configuration-srcdir.md +++ b/ja/api/configuration-srcdir.md @@ -1,16 +1,28 @@ --- -title: "API: The srcDir Property" -description: Define the source directory of your nuxt.js application +title: "API: srcDir プロパティ" +description: Nuxt.js アプリケーションのソースディレクトリを指定します。 --- -# The srcDir Property +<!-- title: "API: The srcDir Property" --> +<!-- description: Define the source directory of your nuxt.js application --> -- Type: `String` -- Default: [rootDir value](/api/configuration-rootdir) +<!-- # The srcDir Property --> -> Define the source directory of your nuxt.js application +# srcDir プロパティ -Example (`nuxt.config.js`): +<!-- - Type: `String` --> +<!-- - Default: [rootDir value](/api/configuration-rootdir) --> + +- タイプ: `文字列` +- デフォルト: [rootDir の値](/api/configuration-rootdir) + +<!-- \> Define the source directory of your nuxt.js application --> + +> Nuxt.js アプリケーションのソースディレクトリを指定します。 + +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: ```js module.exports = { @@ -18,7 +30,10 @@ module.exports = { } ``` -Then, your application structure can be: +<!-- Then, your application structure can be: --> + +上のように指定すると、アプリケーションの構造を次のようにできます: + ```bash -| app/ ---| node_modules/ @@ -29,4 +44,6 @@ Then, your application structure can be: ---| 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`. +<!-- This option is useful to have a custom server and using nuxt.js, so all npm dependencies can be regrouped in one `package.json`. --> + +このオプションは Nuxt.js を使いつつカスタムサーバーを持つときに役に立ちます。そのようなときに、すべての npm 依存パッケージをひとつの `package.json` 内に再編成できます。 From c2ba153172c4f49b1855ee9203d3669ec72b8ea5 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 23:46:19 +0900 Subject: [PATCH 085/129] Make ja/api/configuration-srcdir.md natural --- ja/api/configuration-srcdir.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ja/api/configuration-srcdir.md b/ja/api/configuration-srcdir.md index e64c34230..5e496a659 100644 --- a/ja/api/configuration-srcdir.md +++ b/ja/api/configuration-srcdir.md @@ -46,4 +46,4 @@ module.exports = { <!-- This option is useful to have a custom server and using nuxt.js, so all npm dependencies can be regrouped in one `package.json`. --> -このオプションは Nuxt.js を使いつつカスタムサーバーを持つときに役に立ちます。そのようなときに、すべての npm 依存パッケージをひとつの `package.json` 内に再編成できます。 +このオプションは Nuxt.js を使いつつ独自のサーバーを持ちたいときに役に立ちます。そのようなときに、すべての npm 依存パッケージをひとつの `package.json` 内にまとめることができます。 From b9fe63feee0221ad62434faa7f99911f6b577dde Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 1 Mar 2017 23:54:02 +0900 Subject: [PATCH 086/129] Translate ja/api/configuration-transition.md --- ja/api/configuration-transition.md | 48 ++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/ja/api/configuration-transition.md b/ja/api/configuration-transition.md index 9fa7efc79..5b4620a55 100644 --- a/ja/api/configuration-transition.md +++ b/ja/api/configuration-transition.md @@ -1,15 +1,27 @@ --- -title: "API: The transition Property" -description: Set the default properties of the pages transitions. +title: "API: transition プロパティ" +description: ページのトランジションのデフォルト設定を指定します。 --- -# The transition Property +<!-- title: "API: The transition Property" --> +<!-- description: Set the default properties of the pages transitions. --> -- Type: `String` or `Object` +<!-- # The transition Property --> -> Used to set the default properties of the pages transitions. +# transition プロパティ + +<!-- - Type: `String` or `Object` --> + +- タイプ: `文字列` または `オブジェクト` + +<!-- \> Used to set the default properties of the pages transitions. --> + +> ページのトランジションのデフォルト設定を指定するために使われます。 + +<!-- Default: --> + +デフォルト: -Default: ```js { name: 'page', @@ -17,12 +29,28 @@ Default: } ``` -Example (`nuxt.config.js`): +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: + +<!-- ```js --> +<!-- module.exports = { --> +<!-- transition: 'page' --> +<!-- // or --> +<!-- transition: { --> +<!-- name: 'page', --> +<!-- mode: 'out-in', --> +<!-- beforeEnter (el) { --> +<!-- console.log('Before enter...'); --> +<!-- } --> +<!-- } --> +<!-- } --> +<!-- ``` --> ```js module.exports = { transition: 'page' - // or + // または transition: { name: 'page', mode: 'out-in', @@ -33,4 +61,6 @@ module.exports = { } ``` -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). +<!-- 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). --> + +`nuxt.config.js` 内の transition キーはページのトランジションのデフォルト設定を指定するために使われます。`transition` キーがオブジェクトのときに利用可能なキーについてより深く理解するには [ページのトランジションプロパティ](/api/pages-transition#object) を参照してください。 From ea7312f4cf36c91dd0e4c2be1f00dccca6784412 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 2 Mar 2017 21:05:26 +0900 Subject: [PATCH 087/129] Translate ja/api/configuration-router.md --- ja/api/configuration-router.md | 177 ++++++++++++++++++++++++++------- 1 file changed, 140 insertions(+), 37 deletions(-) diff --git a/ja/api/configuration-router.md b/ja/api/configuration-router.md index a95817023..5731a35c1 100644 --- a/ja/api/configuration-router.md +++ b/ja/api/configuration-router.md @@ -1,20 +1,35 @@ --- -title: "API: The router Property" -description: The router property lets you customize nuxt.js router. +title: "API: router プロパティ" +description: router プロパティを使って Nuxt.js のルーター機能をカスタマイズできます。 --- -# The router Property +<!-- title: "API: The router Property" --> +<!-- description: The router property lets you customize nuxt.js router. --> -> The router property lets you customize nuxt.js router ([vue-router](https://router.vuejs.org/en/)). +<!-- # The router Property --> + +# router プロパティ + +<!-- \> The router property lets you customize nuxt.js router ([vue-router](https://router.vuejs.org/en/)). --> + +> router プロパティを使って Nuxt.js のルーター機能（[vue-router](https://router.vuejs.org/en/)）をカスタマイズできます。 ## base -- Type: `String` -- Default: `'/'` +<!-- - 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/'`. +<!-- 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/'`. --> + +アプリケーションのベース URL です。例えばシングルページアプリケーション全体を `/app/` 配下で配信したい場合は base に `'/app/'` を設定します。 + +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: -Example (`nuxt.config.js`): ```js module.exports = { router: { @@ -23,18 +38,30 @@ module.exports = { } ``` -<p class="Alert Alert-blue">When `base` is set, nuxt.js will also add in the document header `<base href="{{ router.base }}"/>`.</p> +<!-- <p class="Alert Alert-blue">When `base` is set, nuxt.js will also add in the document header `<base href="{{ router.base }}"/>`.</p> --> + +<p class="Alert Alert-blue">`base` がセットされているときは Nuxt.js はドキュメントのヘッダーに `<base href="{{ router.base }}"/>` を追加します。</p> -> This option is given directly to the vue-router [Router constructor](https://router.vuejs.org/en/api/options.html). +<!-- \> This option is given directly to the vue-router [Router constructor](https://router.vuejs.org/en/api/options.html). --> + +> このオプションは vue-router の [Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 ## linkActiveClass -- Type: `String` -- Default: `'nuxt-link-active'` +<!-- - Type: `String` --> +<!-- - Default: `'nuxt-link-active'` --> + +- タイプ: `文字列` +- デフォルト: `'nuxt-link-active'` + +<!-- Globally configure [`<nuxt-link>`](/api/components-nuxt-link) default active class. --> + +[`<nuxt-link>`](/api/components-nuxt-link) のデフォルトの active class をグローバルに設定します。 -Globally configure [`<nuxt-link>`](/api/components-nuxt-link) default active class. +<!-- Example (`nuxt.config.js`): --> + +例（`nuxt.config.js`）: -Example (`nuxt.config.js`): ```js module.exports = { router: { @@ -43,32 +70,66 @@ module.exports = { } ``` -> This option is given directly to the [vue-router Router constructor](https://router.vuejs.org/en/api/options.html). +<!-- \> This option is given directly to the [vue-router Router constructor](https://router.vuejs.org/en/api/options.html). --> -## scrollBehavior +> このオプションは [vue-router の Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 -- Type: `Function` +## scrollBehavior -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. +<!-- - 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. --> + +`scrollBehavior` オプションを使って、ページ間のスクロール位置についての独自の振る舞いを定義できます。このメソッドはページがレンダリングされるたびに毎回呼び出されます。 + +<!-- By default, the scrollBehavior option is set to: --> + +デフォルトでは scrollBehavior オプションは次のようにセットされています: + +<!-- ```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 --> +<!-- } --> +<!-- } --> +<!-- ``` --> -By default, the scrollBehavior option is set to: ```js const scrollBehavior = (to, from, savedPosition) => { - // savedPosition is only available for popstate navigations. + // savedPosition は popState ナビゲーションでのみ利用できます 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 + // 子パスのひとつが scrollToTop オプションが true にセットされているとき position = { x: 0, y: 0 } } - // if link has anchor, scroll to anchor by returning the selector + // アンカーがあるときは、セレクタを返すことでアンカーまでスクロールする if (to.hash) { position = { selector: to.hash } } @@ -77,9 +138,12 @@ const scrollBehavior = (to, from, savedPosition) => { } ``` -Example of forcing the scroll position to the top for every routes: +<!-- Example of forcing the scroll position to the top for every routes: --> + +すべてのルートにおいて強制的にトップまでスクロールさせる例: `nuxt.config.js` + ```js module.exports = { router: { @@ -90,46 +154,83 @@ module.exports = { } ``` -> This option is given directly to the vue-router [Router constructor](https://router.vuejs.org/en/api/options.html). +<!-- \> This option is given directly to the vue-router [Router constructor](https://router.vuejs.org/en/api/options.html). --> + +> このオプションは vue-router の [Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 ## middleware -- Type: `String` or `Array` - - Items: `String` +<!-- - Type: `String` or `Array` --> +<!-- - Items: `String` --> + +- タイプ: `文字列` または `配列` + - 要素: `文字列` + +<!-- Set the default(s) middleware for every pages of the application. --> -Set the default(s) middleware for every pages of the application. -Example: +アプリケーションのすべてのページに対してデフォルトのミドルウェアをセットします。 + +<!-- Example: --> + +例: `nuxt.config.js` + +<!-- ```js --> +<!-- module.exports = { --> +<!-- router: { --> +<!-- // Run the middleware/user-agent.js on every pages --> +<!-- middleware: 'user-agent' --> +<!-- } --> +<!-- } --> +<!-- ``` --> + ```js module.exports = { router: { - // Run the middleware/user-agent.js on every pages + // すべてのページで middleware/user-agent.js を実行します 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 --> +<!-- } --> +<!-- ``` --> + ```js export default function (context) { - // Add the userAgent property in the context (available in `data` and `fetch`) + // userAgent プロパティを context 内に追加します（context は `data` メソッドや `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). +<!-- To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). --> + +ミドルウェアについてより深く理解するには [middleware guide](/guide/routing#middleware) ガイドを参照してください。 ## extendRoutes -- Type: `Function` +<!-- - Type: `Function` --> + +- タイプ: `関数` -You may want to extend the routes created by nuxt.js. You can do it via the `extendRoutes` option. +<!-- 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.js によって作成されるルーティングを拡張したいことがあるかもしれません。それは `extendRoutes` オプションで実現できます。 + +<!-- Example of adding a custom route: --> + +独自のルートを追加する例: `nuxt.config.js` + ```js const resolve = require('path').resolve @@ -146,4 +247,6 @@ module.exports = { } ``` -The schema of the route should respect the [vue-router](https://router.vuejs.org/en/) schema. +<!-- The schema of the route should respect the [vue-router](https://router.vuejs.org/en/) schema. --> + +ルートのスキーマは [vue-router](https://router.vuejs.org/en/) のスキーマを尊重すべきです。 From 62e3fbec58388fd25a0ddfbbb54638de98117e03 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 2 Mar 2017 21:08:42 +0900 Subject: [PATCH 088/129] Make ja/api/configuration-router.md natural --- ja/api/configuration-router.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/api/configuration-router.md b/ja/api/configuration-router.md index 5731a35c1..342b501b4 100644 --- a/ja/api/configuration-router.md +++ b/ja/api/configuration-router.md @@ -1,6 +1,6 @@ --- title: "API: router プロパティ" -description: router プロパティを使って Nuxt.js のルーター機能をカスタマイズできます。 +description: router プロパティを使って Nuxt.js のルーターをカスタマイズできます。 --- <!-- title: "API: The router Property" --> @@ -12,7 +12,7 @@ description: router プロパティを使って Nuxt.js のルーター機能を <!-- \> The router property lets you customize nuxt.js router ([vue-router](https://router.vuejs.org/en/)). --> -> router プロパティを使って Nuxt.js のルーター機能（[vue-router](https://router.vuejs.org/en/)）をカスタマイズできます。 +> router プロパティを使って Nuxt.js のルーター（[vue-router](https://router.vuejs.org/en/)）をカスタマイズできます。 ## base From 1541d36407856ccae2e0ba287768d85308e8ed81 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 2 Mar 2017 23:20:07 +0900 Subject: [PATCH 089/129] Translate ja/api/nuxt.md --- ja/api/nuxt.md | 46 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/ja/api/nuxt.md b/ja/api/nuxt.md index 4ff4de310..83eb579f5 100644 --- a/ja/api/nuxt.md +++ b/ja/api/nuxt.md @@ -1,21 +1,45 @@ --- 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. +description: Nuxt.js をプログラムで使って、Nuxt.js をウェブアプリケーションをレンダリングする独自サーバーをつくる自由を与えるミドルウェアとして使うことができます。 --- -# Using Nuxt.js Programmatically +<!-- 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. --> -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. +<!-- # Using Nuxt.js Programmatically --> + +# Nuxt.js をプログラムで使う + +<!-- You might want to use your own server with your middleware and your API. That's why you can use Nuxt.js programmatically. --> + +ミドルウェアや API と一緒に独自サーバーを使いたいときがあるかもしれません。それが Nuxt.js をプログラムで使うことができる理由です。 + +<!-- 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. --> +Nuxt.js はコードをより楽しいものし、より読みやすくする ES2015 以上でビルドされます。トランスパイラを利用せず、また V8 エンジンで実装された機能に依存しません。このような理由から Nuxt.js は Node.js `4.0` 以上をターゲットにしています。 + +<!-- You can require Nuxt.js like this: --> + +Nuxt.js をこのように require できます: -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. +<!-- To see the list of options to give to Nuxt.js, see the configuration section. --> + +Nuxt.js に与えられるオプション一覧を見るには、設定のセクションを参照してください。 + +<!-- ```js --> +<!-- const options = {} --> + +<!-- const nuxt = new Nuxt(options) --> +<!-- nuxt.build() --> +<!-- .then(() => { --> +<!-- // We can use nuxt.render(req, res) or nuxt.renderRoute(route, context) --> +<!-- }) --> +<!-- ``` --> ```js const options = {} @@ -23,15 +47,19 @@ const options = {} const nuxt = new Nuxt(options) nuxt.build() .then(() => { - // We can use nuxt.render(req, res) or nuxt.renderRoute(route, context) + // nuxt.render(req, res) あるいは 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. +<!-- 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. --> + +手早く始めるために [nuxt-express](https://github.com/nuxt/express) や [adonuxt](https://github.com/nuxt/adonuxt) スターターを見ることができます。 ### Debug logs -If you want to display nuxt.js logs, you can add to the top of your file: +<!-- If you want to display nuxt.js logs, you can add to the top of your file: --> + +Nuxt.js のログを表示したいときはファイルのトップに下記を追加してください: ```js process.env.DEBUG = 'nuxt:*' From 83874d387fc942f2b2c68341fa10f2d62c3dda4f Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 2 Mar 2017 23:29:02 +0900 Subject: [PATCH 090/129] Make ja/api/nuxt.md natural --- ja/api/nuxt.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ja/api/nuxt.md b/ja/api/nuxt.md index 83eb579f5..052c649bb 100644 --- a/ja/api/nuxt.md +++ b/ja/api/nuxt.md @@ -1,6 +1,6 @@ --- title: "API: Nuxt(options)" -description: Nuxt.js をプログラムで使って、Nuxt.js をウェブアプリケーションをレンダリングする独自サーバーをつくる自由を与えるミドルウェアとして使うことができます。 +description: Nuxt.js はプログラム上で、ミドルウェアとして使うことができます。そうすることでウェブアプリケーションをレンダリングする独自のサーバーを自由に作ることができます。 --- <!-- title: "API: Nuxt(options)" --> @@ -12,7 +12,7 @@ description: Nuxt.js をプログラムで使って、Nuxt.js をウェブアプ <!-- You might want to use your own server with your middleware and your API. That's why you can use Nuxt.js programmatically. --> -ミドルウェアや API と一緒に独自サーバーを使いたいときがあるかもしれません。それが Nuxt.js をプログラムで使うことができる理由です。 +ミドルウェアや API と合わせて独自サーバーを使いたいときがあるかもしれません。そのため、Nuxt.js はプログラムで使うことができるようにしています。 <!-- 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. --> Nuxt.js はコードをより楽しいものし、より読みやすくする ES2015 以上でビルドされます。トランスパイラを利用せず、また V8 エンジンで実装された機能に依存しません。このような理由から Nuxt.js は Node.js `4.0` 以上をターゲットにしています。 @@ -29,7 +29,7 @@ const Nuxt = require('nuxt') <!-- To see the list of options to give to Nuxt.js, see the configuration section. --> -Nuxt.js に与えられるオプション一覧を見るには、設定のセクションを参照してください。 +Nuxt.js に渡すことができるオプション一覧を見るには、設定のセクションを参照してください。 <!-- ```js --> <!-- const options = {} --> @@ -53,13 +53,13 @@ nuxt.build() <!-- 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. --> -手早く始めるために [nuxt-express](https://github.com/nuxt/express) や [adonuxt](https://github.com/nuxt/adonuxt) スターターを見ることができます。 +手っ取り早く始めるために [nuxt-express](https://github.com/nuxt/express) や [adonuxt](https://github.com/nuxt/adonuxt) スターターを参照できます。 ### Debug logs <!-- If you want to display nuxt.js logs, you can add to the top of your file: --> -Nuxt.js のログを表示したいときはファイルのトップに下記を追加してください: +Nuxt.js のログを表示したいときはファイルのトップに次のコードを追加してください: ```js process.env.DEBUG = 'nuxt:*' From d4d195d6815db4237f90aabdd191517a9641af0f Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 3 Mar 2017 19:27:43 +0900 Subject: [PATCH 091/129] Translate ja/api/nuxt-render.md --- ja/api/nuxt-render.md | 70 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 57 insertions(+), 13 deletions(-) diff --git a/ja/api/nuxt-render.md b/ja/api/nuxt-render.md index a3ee5e8eb..c334d3e44 100644 --- a/ja/api/nuxt-render.md +++ b/ja/api/nuxt-render.md @@ -1,34 +1,76 @@ --- title: "API: nuxt.render(req, res)" -description: You can use Nuxt.js as a middleware for your node.js server. +description: Nuxt.js を独自の Node.js サーバーのミドルウェアとして使うことができます。 --- +<!-- 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` +<!-- - 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` --> + +- タイプ: `関数` +- 引数: + 1. [リクエスト](https://nodejs.org/api/http.html#http_class_http_incomingmessage) + 2. [レスポンス](https://nodejs.org/api/http.html#http_class_http_serverresponse) +- 戻り値: `プロミス` + +<!-- \> You can use nuxt.js as a middleware with `nuxt.render` for your node.js server. --> + +> `nuxt.render` を使うと Nuxt.js を独自の Node.js サーバーのミドルウェアとして使うことができます。 + +<!-- Example with [Express.js](https://github.com/expressjs/express): --> + +[Express.js](https://github.com/expressjs/express) と一緒に使う例: -> You can use nuxt.js as a middleware with `nuxt.render` for your node.js server. +<!-- ```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) --> +<!-- ``` --> -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 +// Nuxt.js をオプションとともにインスタンス化 let config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) -// Render every route with nuxt.js +// すべてのルートを Nuxt.js でレンダリングする app.use(nuxt.render) -// Build only in dev mode with hot-reloading +// ホットリローディングする開発モードのときのみビルドする if (config.dev) { nuxt.build() .catch((error) => { @@ -37,9 +79,11 @@ if (config.dev) { }) } -// Listen the server +// サーバーを Listen する 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> +<!-- <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> --> + +<p class="Alert">ミドルウェアの最後で **nuxt.render** を呼び出すことが推奨されます。なぜなら nuxt.render はウェブアプリケーションのレンダリングをハンドリングし、next() メソッドを呼び出さないためです。</p> From 9e14ecd22f4edd640f8a27556a00d98112159d19 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 3 Mar 2017 20:36:31 +0900 Subject: [PATCH 092/129] Translate ja/api/nuxt-render-route.md --- ja/api/nuxt-render-route.md | 76 ++++++++++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 17 deletions(-) diff --git a/ja/api/nuxt-render-route.md b/ja/api/nuxt-render-route.md index b99091adb..2e038ec66 100644 --- a/ja/api/nuxt-render-route.md +++ b/ja/api/nuxt-render-route.md @@ -1,26 +1,68 @@ --- title: "API: nuxt.renderRoute(route, context)" -description: Render a specific route with a given context. +description: 特定のルートを与えられたコンテキストでレンダリングします。 --- +<!-- 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` +<!-- - 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` --> + +- タイプ: `関数` +- 引数: + 1. `文字列`, レンダリングするルート + 2. *オプション*, `オブジェクト`, 付与するコンテキスト, 利用できるキー: `req` 及び `res` +- 戻り値: `Promise` + - `html`: `文字列` + - `error`: `null` または `オブジェクト` + - `redirected`: `false` または `オブジェクト` + +<!-- \> 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). --> + +このメソッドは大抵は [nuxt.renderAndGetWindow](/api/nuxt-render-and-get-window) とともに [テストする目的](guide/development-tools#end-to-end-testing) で使われます。 + +<!-- <p class="Alert Alert--info">`nuxt.renderRoute` should be executed after the build process in production mode (dev: false).</p> --> + +<p class="Alert Alert--info">`nuxt.renderRoute` はプロダクションモード（dev: false）ではビルド処理の後に実行されるべきです。</p> + +<!-- Example: --> + +例: + +<!-- ```js --> +<!-- const Nuxt = require('nuxt') --> +<!-- let config = require('./nuxt.config.js') --> +<!-- config.dev = false --> +<!-- const nuxt = new Nuxt(config) --> -> Render a specific route with a given context. +<!-- nuxt.build() --> +<!-- .then(() => { --> +<!-- return nuxt.renderRoute('/') --> +<!-- }) --> +<!-- .then(({ html, error, redirected }) => { --> +<!-- // html will be always a string --> -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). +<!-- // error not null when the error layout is displayed, the error format is: --> +<!-- // { statusCode: 500, message: 'My error message' } --> -<p class="Alert Alert--info">`nuxt.renderRoute` should be executed after the build process in production mode (dev: false).</p> +<!-- // redirect is not false when redirect() has been used in data() or fetch() --> +<!-- // { path: '/other-path', query: {}, status: 302 } --> +<!-- }) --> +<!-- ``` --> -Example: ```js const Nuxt = require('nuxt') let config = require('./nuxt.config.js') @@ -32,12 +74,12 @@ nuxt.build() return nuxt.renderRoute('/') }) .then(({ html, error, redirected }) => { - // html will be always a string + // html は常に文字列 - // error not null when the error layout is displayed, the error format is: - // { statusCode: 500, message: 'My error message' } + // エラーレイアウトが表示されるときは error は null ではありません。エラーフォーマットは下記: + // { statusCode: 500, message: 'エラーメッセージ' } - // redirect is not false when redirect() has been used in data() or fetch() + // data() や fetch() で redirect() が使われたときは redirected は false ではありません // { path: '/other-path', query: {}, status: 302 } }) ``` From 57362625fe98debb8b00c888676214c1d38485ab Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 3 Mar 2017 20:57:21 +0900 Subject: [PATCH 093/129] Translate ja/api/nuxt-render-and-get-window.md --- ja/api/nuxt-render-and-get-window.md | 58 +++++++++++++++++++++------- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/ja/api/nuxt-render-and-get-window.md b/ja/api/nuxt-render-and-get-window.md index b8c4368f9..50f7c4c45 100644 --- a/ja/api/nuxt-render-and-get-window.md +++ b/ja/api/nuxt-render-and-get-window.md @@ -1,35 +1,67 @@ --- title: "API: nuxt.renderAndGetWindow(url, options)" -description: Get the window from a given url of a nuxt.js application. +description: 与えられた Nuxt.js アプリケーションの URL から window を取得します。 --- +<!-- 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` +<!-- - Type: `Function` --> +<!-- - Argument: `String` --> +<!-- 1. `String`: url to render --> +<!-- 2. *Optional*, `Object`: options --> +<!-- - virtualConsole: `Boolean` (default: `true`) --> +<!-- - Returns: `Promise` --> +<!-- - Returns: `window` --> + +- タイプ: `関数` +- 引数: `文字列` + 1. `文字列`: レンダリングする URL + 2. *オプション*, `オブジェクト`: オプション + - virtualConsole: `ブーリアン`（デフォルト: `true`） +- 戻り値: `Promise` + - 戻り値: `window` + +<!-- \> Get the window from a given url of a nuxt.js application. --> + +> 与えられた Nuxt.js アプリケーションの URL から window を取得します。 + +<!-- <p class="Alert Alert--info">This method is made for [test purposes](guide/development-tools#end-to-end-testing).</p> --> -> Get the window from a given url of a nuxt.js application. +<p class="Alert Alert--info">このメソッドは [テストする目的](guide/development-tools#end-to-end-testing) のためのモードです。</p> -<p class="Alert Alert--info">This method is made for [test purposes](guide/development-tools#end-to-end-testing).</p> +<!-- To use this function, you have to install `jsdom`: --> + +この関数を使うためには `jsdom` をインストールする必要があります。: -To use this function, you have to install `jsdom`: ```bash npm install --save-dev jsdom ``` -Example: +<!-- Example: --> + +例: + +<!-- ```js --> +<!-- const Nuxt = require('nuxt') --> +<!-- const nuxt = new Nuxt() --> + +<!-- nuxt.renderAndGetWindow('http://localhost:3000') --> +<!-- .then((window) => { --> +<!-- // Display the head <title> --> +<!-- console.log(window.document.title) --> +<!-- }) --> +<!-- ``` --> + ```js const Nuxt = require('nuxt') const nuxt = new Nuxt() nuxt.renderAndGetWindow('http://localhost:3000') .then((window) => { - // Display the head <title> + // head 内の <title> の内容を表示 console.log(window.document.title) }) ``` From 3079749c0eb257fdcf57a80956b39ee9d6bfafb8 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 3 Mar 2017 21:09:53 +0900 Subject: [PATCH 094/129] Make ja/api/nuxt-* natural --- ja/api/nuxt-render-and-get-window.md | 8 ++++---- ja/api/nuxt-render-route.md | 10 +++++----- ja/api/nuxt-render.md | 6 +++--- ja/api/nuxt.md | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ja/api/nuxt-render-and-get-window.md b/ja/api/nuxt-render-and-get-window.md index 50f7c4c45..2686e2b0a 100644 --- a/ja/api/nuxt-render-and-get-window.md +++ b/ja/api/nuxt-render-and-get-window.md @@ -1,6 +1,6 @@ --- title: "API: nuxt.renderAndGetWindow(url, options)" -description: 与えられた Nuxt.js アプリケーションの URL から window を取得します。 +description: Nuxt.js アプリケーションの URL を渡して window を取得します。 --- <!-- title: "API: nuxt.renderAndGetWindow(url, options)" --> @@ -21,16 +21,16 @@ description: 与えられた Nuxt.js アプリケーションの URL から wind 1. `文字列`: レンダリングする URL 2. *オプション*, `オブジェクト`: オプション - virtualConsole: `ブーリアン`（デフォルト: `true`） -- 戻り値: `Promise` +- 戻り値: `プロミス` - 戻り値: `window` <!-- \> Get the window from a given url of a nuxt.js application. --> -> 与えられた Nuxt.js アプリケーションの URL から window を取得します。 +> Nuxt.js アプリケーションの URL を渡して window を取得します。 <!-- <p class="Alert Alert--info">This method is made for [test purposes](guide/development-tools#end-to-end-testing).</p> --> -<p class="Alert Alert--info">このメソッドは [テストする目的](guide/development-tools#end-to-end-testing) のためのモードです。</p> +<p class="Alert Alert--info">このメソッドは [テストする目的](guide/development-tools#end-to-end-testing) で使われます。</p> <!-- To use this function, you have to install `jsdom`: --> diff --git a/ja/api/nuxt-render-route.md b/ja/api/nuxt-render-route.md index 2e038ec66..e9ea5a809 100644 --- a/ja/api/nuxt-render-route.md +++ b/ja/api/nuxt-render-route.md @@ -1,6 +1,6 @@ --- title: "API: nuxt.renderRoute(route, context)" -description: 特定のルートを与えられたコンテキストでレンダリングします。 +description: 特定のルートをレンダリングします。その際にコンテキストを渡すことができます。 --- <!-- title: "API: nuxt.renderRoute(route, context)" --> @@ -21,22 +21,22 @@ description: 特定のルートを与えられたコンテキストでレンダ - 引数: 1. `文字列`, レンダリングするルート 2. *オプション*, `オブジェクト`, 付与するコンテキスト, 利用できるキー: `req` 及び `res` -- 戻り値: `Promise` +- 戻り値: `プロミス` - `html`: `文字列` - `error`: `null` または `オブジェクト` - `redirected`: `false` または `オブジェクト` <!-- \> 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). --> -このメソッドは大抵は [nuxt.renderAndGetWindow](/api/nuxt-render-and-get-window) とともに [テストする目的](guide/development-tools#end-to-end-testing) で使われます。 +このメソッドはほとんどの場合 [nuxt.renderAndGetWindow](/api/nuxt-render-and-get-window) とともに [テストする目的](guide/development-tools#end-to-end-testing) で使われます。 <!-- <p class="Alert Alert--info">`nuxt.renderRoute` should be executed after the build process in production mode (dev: false).</p> --> -<p class="Alert Alert--info">`nuxt.renderRoute` はプロダクションモード（dev: false）ではビルド処理の後に実行されるべきです。</p> +<p class="Alert Alert--info">`nuxt.renderRoute` はプロダクションモード（dev: false）ではビルド処理の後に実行すると良いでしょう。</p> <!-- Example: --> diff --git a/ja/api/nuxt-render.md b/ja/api/nuxt-render.md index c334d3e44..9fb07a72c 100644 --- a/ja/api/nuxt-render.md +++ b/ja/api/nuxt-render.md @@ -26,7 +26,7 @@ description: Nuxt.js を独自の Node.js サーバーのミドルウェアと <!-- Example with [Express.js](https://github.com/expressjs/express): --> -[Express.js](https://github.com/expressjs/express) と一緒に使う例: +Nuxt.js を [express](https://github.com/expressjs/express) と一緒に使う例: <!-- ```js --> <!-- const Nuxt = require('nuxt') --> @@ -62,7 +62,7 @@ const app = require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 -// Nuxt.js をオプションとともにインスタンス化 +// Nuxt.js をオプションとともにインスタンス化する let config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) @@ -86,4 +86,4 @@ 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> --> -<p class="Alert">ミドルウェアの最後で **nuxt.render** を呼び出すことが推奨されます。なぜなら nuxt.render はウェブアプリケーションのレンダリングをハンドリングし、next() メソッドを呼び出さないためです。</p> +<p class="Alert">ミドルウェアの最後で **nuxt.render** を呼び出すことが推奨されます。それは nuxt.render はウェブアプリケーションのレンダリングをハンドリングし、next() メソッドを呼び出さないためです。</p> diff --git a/ja/api/nuxt.md b/ja/api/nuxt.md index 052c649bb..3840b021e 100644 --- a/ja/api/nuxt.md +++ b/ja/api/nuxt.md @@ -55,7 +55,7 @@ nuxt.build() 手っ取り早く始めるために [nuxt-express](https://github.com/nuxt/express) や [adonuxt](https://github.com/nuxt/adonuxt) スターターを参照できます。 -### Debug logs +### ログを使ってデバッグする <!-- If you want to display nuxt.js logs, you can add to the top of your file: --> From 134e41d040125e3dc3ff7e701b1cb48b46d81e05 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Fri, 3 Mar 2017 21:24:52 +0900 Subject: [PATCH 095/129] Translate ja/api/menu.json --- ja/api/menu.json | 22 +++++++++++----------- ja/lang.json | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/ja/api/menu.json b/ja/api/menu.json index e32f0ff0f..eb68a3cde 100644 --- a/ja/api/menu.json +++ b/ja/api/menu.json @@ -1,6 +1,6 @@ [ { - "title": "Pages", + "title": "ページ", "links": [ { "name": "data", "to": "/" }, { "name": "fetch", "to": "/pages-fetch" }, @@ -11,16 +11,16 @@ { "name": "transition", "to": "/pages-transition", "contents": [ - { "name": "String", "to": "#string" }, - { "name": "Object", "to": "#object" }, - { "name": "Function", "to": "#function" } + { "name": "文字列", "to": "#文字列" }, + { "name": "オブジェクト", "to": "#オブジェクト" }, + { "name": "関数", "to": "#関数" } ] }, { "name": "validate", "to": "/pages-validate" } ] }, { - "title": "Components", + "title": "コンポーネント", "links": [ { "name": "nuxt", "to": "/components-nuxt" }, { "name": "nuxt-child", "to": "/components-nuxt-child" }, @@ -28,7 +28,7 @@ ] }, { - "title": "Configuration", + "title": "設定", "links": [ { "name": "build", @@ -61,9 +61,9 @@ "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": "プログレスバーを無効にする", "to": "#プログレスバーを無効にする" }, + { "name": "プログレスバーをカスタマイズする", "to": "#プログレスバーをカスタマイズする" }, + { "name": "独自のコンポーネントを使う", "to": "#独自のコンポーネントを使う" } ] }, { "name": "plugins", "to": "/configuration-plugins" }, @@ -84,9 +84,9 @@ ] }, { - "title": "Nuxt Module", + "title": "Nuxt モジュール", "links": [ - { "name": "Usage", "to": "/nuxt" }, + { "name": "Nuxt.js をプログラムで使う", "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/lang.json b/ja/lang.json index e12c28e76..140261cae 100644 --- a/ja/lang.json +++ b/ja/lang.json @@ -11,7 +11,7 @@ "faq": "FAQ", "get_started": "はじめる", "github": "Github", - "guide": "Guide", + "guide": "ガイド", "homepage": "ホーム", "live_demo": "ライブデモ", "live_edit": "ライブエディット", From 7aefa554da66d72f53e0e2a27cc776b5c3bdcd00 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 22:32:38 +0900 Subject: [PATCH 096/129] Translate ja/examples/auth-routes.md --- ja/examples/auth-routes.md | 274 ++++++++++++++++++++++++++++++++----- 1 file changed, 236 insertions(+), 38 deletions(-) diff --git a/ja/examples/auth-routes.md b/ja/examples/auth-routes.md index 033b605ed..6bc5c93ea 100644 --- a/ja/examples/auth-routes.md +++ b/ja/examples/auth-routes.md @@ -1,37 +1,107 @@ --- title: Auth Routes -description: Authenticated routes example with Nuxt.js +description: Nuxt.js の認証されたルートの例 github: auth-routes livedemo: https://nuxt-auth-routes.gomix.me liveedit: https://gomix.com/#!/project/nuxt-auth-routes --- -# Documentation +<!-- 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 --> -> Nuxt.js can be used to create authenticated routes easily. +<!-- # Documentation --> -## 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. +<!-- \> Nuxt.js can be used to create authenticated routes easily. --> + +> Nuxt.js は認証されたルートを簡単に作成するためにも使うことができます。 + +<!-- ## Using Express and Sessions --> + +## Express とセッションを使う + +<!-- To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically. --> + +アプリケーションにセッション機能を追加するために `express` と `express-session` を使います。このために Nuxt.js をプログラムで使う必要があります。 + +<!-- First, we install the dependencies: --> + +まず依存パッケージをインストールします: -First, we install the dependencies: ```bash yarn add express express-session body-parser whatwg-fetch ``` -*We will talk about `whatwg-fetch` later.* +<!-- *We will talk about `whatwg-fetch` later.* --> + +*`whatwg-fetch` については後ほど述べます。* + +<!-- Then we create our `server.js`: --> + +それから `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) --> +<!-- }) --> +<!-- ``` --> -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 +// req.body へアクセスするために body-parser を使います app.use(bodyParser.json()) -// Sessions to create req.session +// req.session を作成します app.use(session({ secret: 'super-secret-key', resave: false, @@ -39,7 +109,7 @@ app.use(session({ cookie: { maxAge: 60000 } })) -// POST /api/login to log in the user and add him to the req.session.authUser +// ユーザーとしてログインし、そのユーザーを req.session.authUser に追加するために /api/login に POST します app.post('/api/login', function (req, res) { if (req.body.username === 'demo' && req.body.password === 'demo') { req.session.authUser = { username: 'demo' } @@ -49,15 +119,18 @@ app.post('/api/login', function (req, res) { }) // POST /api/logout to log out the user and remove it from the req.session + +// ログアウトし、そのユーザーを req.session から削除するために /api/logout を POST する app.post('/api/logout', function (req, res) { delete req.session.authUser res.json({ ok: true }) }) -// We instantiate Nuxt.js with the options +// オプションとともに Nuxt.js をインスタンス化する 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) @@ -70,7 +143,10 @@ promise.then(() => { }) ``` -And we update our `package.json` scripts: +<!-- And we update our `package.json` scripts: --> + +そして `package.json` scripts を更新します: + ```json // ... "scripts": { @@ -81,11 +157,45 @@ And we update our `package.json` scripts: // ... ``` -## Using the store +<!-- ## 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: --> + +Nuxt.js に Vuex を使わせるために `store/index.js` ファイルを作成します: + +<!-- ```js --> +<!-- import Vue from 'vue' --> +<!-- import Vuex from 'vuex' --> + +<!-- Vue.use(Vuex) --> + +<!-- // Polyfill for window.fetch() --> +<!-- require('whatwg-fetch') --> -We need a global state to let our application know if the user is connected **across the pages**. +<!-- const store = new Vuex.Store({ --> +<!-- state: { --> +<!-- authUser: null --> +<!-- }, --> -To let Nuxt.js use Vuex, we create a `store/index.js` file: +<!-- mutations: { --> +<!-- SET_USER: function (state, user) { --> +<!-- state.authUser = user --> +<!-- } --> +<!-- }, --> + +<!-- actions: { --> +<!-- // ... --> +<!-- } --> +<!-- }) --> + +<!-- export default store --> +<!-- ``` --> ```js import Vue from 'vue' @@ -93,11 +203,10 @@ import Vuex from 'vuex' Vue.use(Vuex) -// Polyfill for window.fetch() +// window.fetch() のためのポリフィル require('whatwg-fetch') const store = new Vuex.Store({ - state: { authUser: null }, @@ -111,22 +220,33 @@ const store = new Vuex.Store({ 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 +<!-- 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 --> + +1. `Vue` 及び `Vuex` をインポートし（Nuxt.js に含まれています）Vue に コンポーネント内で `$store` を使うために Vuex を使うことを Vue に伝えます +2. すべてのブラウザをまたいで `fetch()` メソッドをポリフィルするために `require('whatwg-fetch')` します（詳しくは [fetch リポジトリ](https://github.com/github/fetch) 参照） +3. `SET_USER` ミューテーションを作成します。これは接続されたユーザーに `state.authUser` をセットします +4. Nuxt.js がストアインスタンスをメインアプリケーションに注入できるようにするために、ストアインスタンスをエクスポートします -### nuxtServerInit() action +<!-- ### 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. +### nuxtServerInit() アクション + +<!-- 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. --> + +Nuxt.js は `nuxtServerInit` と呼ばれる特定のアクションを呼び出します。引数にコンテキストを渡します。そのため、アプリケーションがロードされたとき、ストアは既にサーバーから取得できるデータが入れられています。 + +<!-- In our `store/index.js`, we can add the `nuxtServerInit` action: --> + +`store/index.js` 内に `nuxtServerInit` アクションを追加できます: -In our `store/index.js`, we can add the `nuxtServerInit` action: ```js nuxtServerInit ({ commit }, { req }) { if (req.session && req.session.authUser) { @@ -135,13 +255,45 @@ nuxtServerInit ({ commit }, { req }) { } ``` -### login() action +<!-- ### login() action --> + +### login() アクション + +<!-- We add a `login` action which will be called from our pages component to log in the user: --> + +`login` アクションを追加できます。このアクションはログインするためにページコンポーネントから呼び出されます: + +<!-- ```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) --> +<!-- }) --> +<!-- } --> +<!-- ``` --> -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: { @@ -165,12 +317,27 @@ login ({ commit }, { username, password }) { } ``` -### logout() method +<!-- ### logout() method --> + +### logout() メソッド + +<!-- ```js --> +<!-- logout ({ commit }) { --> +<!-- return fetch('/api/logout', { --> +<!-- // Send the client cookies to the server --> +<!-- credentials: 'same-origin', --> +<!-- method: 'POST' --> +<!-- }) --> +<!-- .then(() => { --> +<!-- commit('SET_USER', null) --> +<!-- }) --> +<!-- } --> +<!-- ``` --> ```js logout ({ commit }) { return fetch('/api/logout', { - // Send the client cookies to the server + // クライアントのクッキーをサーバーに送信します credentials: 'same-origin', method: 'POST' }) @@ -180,13 +347,42 @@ logout ({ commit }) { } ``` -## Pages components +<!-- ## 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. --> + +それからユーザーがアプリケーションに接続しているか否かをチェックするために `$store.state.authUser` をページコンポーネント内で使うことができます。 + +<!-- ### Redirect user if not connected --> -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: --> + +`/secret` ルートを追加してみましょう。このルートは接続したユーザーのみがコンテンツを閲覧できます: + +<!-- ```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> --> +<!-- ``` --> -Let's add a `/secret` route where only the connected user can see its content: ```html <template> <div> @@ -197,7 +393,7 @@ Let's add a `/secret` route where only the connected user can see its content: <script> export default { - // we use fetch() because we do not need to set data to this component + // fetch() を使います。なぜならデータをこのコンポーネントにセットする必要がないためです fetch ({ store, redirect }) { if (!store.state.authUser) { return redirect('/') @@ -207,4 +403,6 @@ export default { </script> ``` -We can see in the `fetch` method that we call `redirect('/')` when our user is not connected. +<!-- We can see in the `fetch` method that we call `redirect('/')` when our user is not connected. --> + +ユーザーが接続していなかったとき `fetch` メソッド内で `redirect('/')` が呼び出されることを確認できます。 From 8d7bee3dfc6d87c585d5e21e826f2f0acd0b8b03 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 23:06:31 +0900 Subject: [PATCH 097/129] Make ja/examples/auth-routes.md natural --- ja/examples/auth-routes.md | 54 +++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/ja/examples/auth-routes.md b/ja/examples/auth-routes.md index 6bc5c93ea..c5edc038d 100644 --- a/ja/examples/auth-routes.md +++ b/ja/examples/auth-routes.md @@ -1,6 +1,6 @@ --- -title: Auth Routes -description: Nuxt.js の認証されたルートの例 +title: 認証ルート +description: Nuxt.js を使った認証ルートの例 github: auth-routes livedemo: https://nuxt-auth-routes.gomix.me liveedit: https://gomix.com/#!/project/nuxt-auth-routes @@ -18,15 +18,15 @@ liveedit: https://gomix.com/#!/project/nuxt-auth-routes <!-- \> Nuxt.js can be used to create authenticated routes easily. --> -> Nuxt.js は認証されたルートを簡単に作成するためにも使うことができます。 +> Nuxt.js を使うと認証が必要なルートを簡単に作成できます。 <!-- ## Using Express and Sessions --> -## Express とセッションを使う +## express とセッションを使う <!-- To add the sessions feature in our application, we will use `express` and `express-session`, for this, we need to use Nuxt.js programmatically. --> -アプリケーションにセッション機能を追加するために `express` と `express-session` を使います。このために Nuxt.js をプログラムで使う必要があります。 +アプリケーションにセッション機能を追加するために `express` と `express-session` を使います。そのために Nuxt.js をプログラムで使う必要があります。 <!-- First, we install the dependencies: --> @@ -98,7 +98,7 @@ const bodyParser = require('body-parser') const session = require('express-session') const app = require('express')() -// req.body へアクセスするために body-parser を使います +// req.body へアクセスするために body-parser を使う app.use(bodyParser.json()) // req.session を作成します @@ -109,7 +109,7 @@ app.use(session({ cookie: { maxAge: 60000 } })) -// ユーザーとしてログインし、そのユーザーを req.session.authUser に追加するために /api/login に POST します +// POST /api/login してログインし、認証されたユーザーを req.session.authUser に追加 app.post('/api/login', function (req, res) { if (req.body.username === 'demo' && req.body.password === 'demo') { req.session.authUser = { username: 'demo' } @@ -118,15 +118,13 @@ app.post('/api/login', function (req, res) { res.status(401).json({ error: 'Bad credentials' }) }) -// POST /api/logout to log out the user and remove it from the req.session - -// ログアウトし、そのユーザーを req.session から削除するために /api/logout を POST する +// POST /api/logout してログアウトし、ログアウトしたユーザーを req.session から削除 app.post('/api/logout', function (req, res) { delete req.session.authUser res.json({ ok: true }) }) -// オプションとともに Nuxt.js をインスタンス化する +// オプションとともに Nuxt.js をインスタンス化 const isProd = process.env.NODE_ENV === 'production' const nuxt = new Nuxt({ dev: !isProd }) @@ -145,7 +143,7 @@ promise.then(() => { <!-- And we update our `package.json` scripts: --> -そして `package.json` scripts を更新します: +また `package.json` scripts を更新します: ```json // ... @@ -163,11 +161,11 @@ promise.then(() => { <!-- 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: --> -Nuxt.js に Vuex を使わせるために `store/index.js` ファイルを作成します: +Nuxt.js が Vuex を使うよう `store/index.js` ファイルを作成します: <!-- ```js --> <!-- import Vue from 'vue' --> @@ -227,13 +225,13 @@ 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 --> +<!-- 3. We create our `SET_USER` mutation which will set the `state.authUser` to the connected user --> <!-- 4. We export our store instance to Nuxt.js can inject it to our main application --> -1. `Vue` 及び `Vuex` をインポートし（Nuxt.js に含まれています）Vue に コンポーネント内で `$store` を使うために Vuex を使うことを Vue に伝えます -2. すべてのブラウザをまたいで `fetch()` メソッドをポリフィルするために `require('whatwg-fetch')` します（詳しくは [fetch リポジトリ](https://github.com/github/fetch) 参照） -3. `SET_USER` ミューテーションを作成します。これは接続されたユーザーに `state.authUser` をセットします -4. Nuxt.js がストアインスタンスをメインアプリケーションに注入できるようにするために、ストアインスタンスをエクスポートします +1. `Vue` 及び `Vuex` をインポートし（これらは Nuxt.js 内でインクルードされています）、コンポーネント内で `$store` を使うために Vuex を使うことを Vue に伝えます +2. すべてのブラウザで `fetch()` メソッドをポリフィルするために `require('whatwg-fetch')` します（詳しくは [fetch リポジトリ](https://github.com/github/fetch) 参照） +3. `SET_USER` ミューテーションを作成します。これは認証されたユーザーを `state.authUser` にセットします +4. Nuxt.js がストアインスタンスをメインアプリケーションに注入できるようにするため、ストアインスタンスをエクスポートします <!-- ### nuxtServerInit() action --> @@ -241,7 +239,7 @@ export default store <!-- 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. --> -Nuxt.js は `nuxtServerInit` と呼ばれる特定のアクションを呼び出します。引数にコンテキストを渡します。そのため、アプリケーションがロードされたとき、ストアは既にサーバーから取得できるデータが入れられています。 +Nuxt.js は `nuxtServerInit` と呼ばれる特定のアクションを、引数でコンテキストを渡して呼び出します。したがって、アプリケーションがロードされたとき、サーバーから取得できるデータがストアに既には入れられています。 <!-- In our `store/index.js`, we can add the `nuxtServerInit` action: --> @@ -263,6 +261,8 @@ nuxtServerInit ({ commit }, { req }) { `login` アクションを追加できます。このアクションはログインするためにページコンポーネントから呼び出されます: +ログインするためにページコンポーネントから呼び出される `login` アクションを追加します: + <!-- ```js --> <!-- login ({ commit }, { username, password }) { --> <!-- return fetch('/api/login', { --> @@ -293,7 +293,7 @@ nuxtServerInit ({ commit }, { req }) { ```js login ({ commit }, { username, password }) { return fetch('/api/login', { - // クライアントのクッキーをサーバーに送信します + // クライアントのクッキーをサーバーに送信 credentials: 'same-origin', method: 'POST', headers: { @@ -337,7 +337,7 @@ login ({ commit }, { username, password }) { ```js logout ({ commit }) { return fetch('/api/logout', { - // クライアントのクッキーをサーバーに送信します + // クライアントのクッキーをサーバーに送信 credentials: 'same-origin', method: 'POST' }) @@ -353,15 +353,15 @@ logout ({ commit }) { <!-- Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not. --> -それからユーザーがアプリケーションに接続しているか否かをチェックするために `$store.state.authUser` をページコンポーネント内で使うことができます。 +ユーザーがアプリケーションで認証されているか否かをチェックするために、ページコンポーネント内で `$store.state.authUser` を使うことができます。 <!-- ### Redirect user if not connected --> -### ユーザーが接続されていないときはリダイレクトする +### ユーザーが認証されていないときはリダイレクトする <!-- Let's add a `/secret` route where only the connected user can see its content: --> -`/secret` ルートを追加してみましょう。このルートは接続したユーザーのみがコンテンツを閲覧できます: +認証されたユーザーのみがコンテンツを閲覧できる `/secret` ルートを追加してみましょう: <!-- ```html --> <!-- <template> --> @@ -393,7 +393,7 @@ logout ({ commit }) { <script> export default { - // fetch() を使います。なぜならデータをこのコンポーネントにセットする必要がないためです + // データをこのコンポーネントにセットする必要がないため fetch() を使う fetch ({ store, redirect }) { if (!store.state.authUser) { return redirect('/') @@ -405,4 +405,4 @@ export default { <!-- We can see in the `fetch` method that we call `redirect('/')` when our user is not connected. --> -ユーザーが接続していなかったとき `fetch` メソッド内で `redirect('/')` が呼び出されることを確認できます。 +ユーザーが認証されていなかったときは `fetch` メソッド内で `redirect('/')` が呼び出されます。 From 14ef0b1ecfd08d4c17c291163b3ace4d8deab916 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 23:35:46 +0900 Subject: [PATCH 098/129] Translate ja/examples/menu.json --- ja/api/components-nuxt-child.md | 4 ++-- ja/examples/menu.json | 34 +++++++++++++++---------------- ja/examples/nested-routes.md | 6 +++--- ja/examples/routes-transitions.md | 2 +- ja/examples/seo-html-head.md | 2 +- ja/guide/menu.json | 4 ++-- ja/guide/routing.md | 8 ++++---- ja/guide/views.md | 2 +- 8 files changed, 31 insertions(+), 31 deletions(-) diff --git a/ja/api/components-nuxt-child.md b/ja/api/components-nuxt-child.md index c7dce9c0f..5ef2d7163 100644 --- a/ja/api/components-nuxt-child.md +++ b/ja/api/components-nuxt-child.md @@ -12,7 +12,7 @@ description: 現在のページを表示します。 <!-- \> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes). --> -> このコンポーネントは [ネストしたルーティング](/guide/routing#nested-routes) 内で子コンポーネントを表示するために使われます。 +> このコンポーネントは [ネストされたルート](/guide/routing#nested-routes) 内で子コンポーネントを表示するために使われます。 <!-- Example: --> @@ -61,4 +61,4 @@ description: 現在のページを表示します。 <!-- To see an example, take a look at the [nested-routes example](/examples/nested-routes). --> -実際の例を見たいときは [ネストしたルーティングの例](/examples/nested-routes) を参照してください。 +実際の例を見たいときは [ネストされたルートの例](/examples/nested-routes) を参照してください。 diff --git a/ja/examples/menu.json b/ja/examples/menu.json index 45980e702..497c2991d 100644 --- a/ja/examples/menu.json +++ b/ja/examples/menu.json @@ -1,33 +1,33 @@ [ { - "title": "Essentials", + "title": "基本的な使い方", "links": [ { "name": "Hello world", "to": "" }, { "name": "SEO HTML Head", "to": "/seo-html-head" } ] }, { - "title": "Customization", + "title": "カスタマイズ", "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" } + { "name": "コンポーネントのキャッシュ", "to": "/cached-components" }, + { "name": "カスタムローディングCustom Loading", "to": "/custom-loading" }, + { "name": "カスタムルーティング", "to": "/custom-routes" }, + { "name": "グローバル CSS", "to": "/global-css" }, + { "name": "レイアウト", "to": "/layouts" }, + { "name": "ミドルウェア", "to": "/middleware" }, + { "name": "ネストされたルート", "to": "/nested-routes" }, + { "name": "プラグイン", "to": "/plugins" }, + { "name": "ページ遷移時のトランジション", "to": "/routes-transitions" } ] }, { - "title": "Advanced", + "title": "高度な使い方", "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" } + { "name": "非同期データ", "to": "/async-data" }, + { "name": "認証ルート", "to": "/auth-routes" }, + { "name": "Vuex ストア", "to": "/vuex-store" }, + { "name": "国際化（i18n）", "to": "/i18n" }, + { "name": "テスト", "to": "/testing" } ] } ] diff --git a/ja/examples/nested-routes.md b/ja/examples/nested-routes.md index 0fc5283be..e9ab70bd4 100644 --- a/ja/examples/nested-routes.md +++ b/ja/examples/nested-routes.md @@ -1,9 +1,9 @@ --- -title: ルーティングのネスト -description: ルーティングのネストの例 +title: ネストされたルート +description: ネストされたルートの例 github: nested-routes livedemo: https://nested-routes.nuxtjs.org -documentation: /guide/routing#ルーティングのネスト +documentation: /guide/routing#ネストされたルート --- title: Nested Routes diff --git a/ja/examples/routes-transitions.md b/ja/examples/routes-transitions.md index cbc797967..1b289d607 100644 --- a/ja/examples/routes-transitions.md +++ b/ja/examples/routes-transitions.md @@ -1,5 +1,5 @@ --- -title: トランジション +title: ページ遷移時のトランジション description: ページ間を遷移する際のトランジションの例 github: routes-transitions youtube: https://www.youtube.com/embed/RIXOzJWFfc8 diff --git a/ja/examples/seo-html-head.md b/ja/examples/seo-html-head.md index 40d32c4b1..c47954aa6 100644 --- a/ja/examples/seo-html-head.md +++ b/ja/examples/seo-html-head.md @@ -1,5 +1,5 @@ --- -title: HTML の haad 情報 +title: SEO HTML Head description: SEO のために HTML の head 情報を設定する例 github: head-elements livedemo: https://head-elements.nuxtjs.org diff --git a/ja/guide/menu.json b/ja/guide/menu.json index 9ce894bcf..e981ab957 100644 --- a/ja/guide/menu.json +++ b/ja/guide/menu.json @@ -40,8 +40,8 @@ "contents": [ { "to": "#ルーティングの基礎", "name": "ルーティングの基礎" }, { "to": "#動的なルーティング", "name": "動的なルーティング" }, - { "to": "#ルーティングのネスト", "name": "ルーティングのネスト" }, - { "to": "#動的でネストしたルーティング", "name": "動的でネストしたルーティング" }, + { "to": "#ネストされたルート", "name": "ネストされたルート" }, + { "to": "#動的でネストされたルート", "name": "動的でネストされたルート" }, { "to": "#トランジション", "name": "トランジション" }, { "to": "#ミドルウェア", "name": "ミドルウェア" } ] diff --git a/ja/guide/routing.md b/ja/guide/routing.md index 2be6caf4b..4c20eb160 100644 --- a/ja/guide/routing.md +++ b/ja/guide/routing.md @@ -149,15 +149,15 @@ export default { <!-- ## Nested Routes --> -## ルーティングのネスト +## ネストされたルート <!-- Nuxt.js lets you create nested route by using the children routes of vue-router. --> -Nuxt.js では vue-router の子ルーティングを使ってルーティングをネストさせることができます。 +Nuxt.js では 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. --> -ネストしたルーティングを定義するには、子ビューを含む **ディレクトリと同じ名前** の Vue ファイルを作成する必要があります。 +ネストされたルートを定義するには、子ビューを含む **ディレクトリと同じ名前** の Vue ファイルを作成する必要があります。 <!-- <p class="Alert Alert--info">Don't forget to write `<nuxt-child/>` inside the parent component (.vue file).</p> --> @@ -204,7 +204,7 @@ router: { <!-- ## Dynamic Nested Routes --> -## 動的でネストしたルーティング +## 動的でネストされたルート <!-- This scenario should not often append, but it is possible with Nuxt.js: having dynamic children inside dynamic parents. --> diff --git a/ja/guide/views.md b/ja/guide/views.md index 84e96ca16..077c8e8d8 100644 --- a/ja/guide/views.md +++ b/ja/guide/views.md @@ -94,7 +94,7 @@ export default { | head | 現在のページの特定のメタタグを設定します。[ページの head API](/api/pages-head) を参照してください | | layout | `layouts` ディレクトリ内のレイアウトを指定します。[ページのレイアウト API に関するドキュメント](/api/pages-layout) を参照してください | | transition | ページに特定のトランジションを設定します。[ページのトランジション API に関するドキュメント](/api/pages-transition) を参照してください | -| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストしたルーティング](/guide/routing#nested-routes) で使われます | +| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストされたルート](/guide/routing#nested-routes) で使われます | | validate | [動的なルーティング](/guide/routing#dynamic-routes) のためのバリデーション関数です | | middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#middleware) を参照してください | From 06ce10ae1cf9a08264702b5c29971e12128123c9 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 23:41:51 +0900 Subject: [PATCH 099/129] Translate ja/faq/external-resources.md --- ja/faq/external-resources.md | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/ja/faq/external-resources.md b/ja/faq/external-resources.md index a12f2a51e..dc289e2f7 100644 --- a/ja/faq/external-resources.md +++ b/ja/faq/external-resources.md @@ -1,13 +1,22 @@ --- -title: External resources -description: How to use external resources with Nuxt.js? +title: 外部リソース +description: Nuxt.js と一緒に外部リソースを使うにはどうしたらよいですか？ --- -# How to use external resources? +<!-- title: External resources --> +<!-- description: How to use external resources with Nuxt.js? --> -## Global Settings +<!-- # How to use external resources? --> -Include your resources in the `nuxt.config.js` file: +# 外部リソースを使うにはどうしたらよいですか？ + +<!-- ## Global Settings --> + +## グローバルな設定 + +<!-- Include your resources in the `nuxt.config.js` file: --> + +`nuxt.config.js` ファイル内でリソースをインクルードします: ```js module.exports = { @@ -22,9 +31,13 @@ module.exports = { } ``` -## Local Settings +<!-- ## Local Settings --> + +## ローカルな設定 + +<!-- Include your resources in your .vue file inside the pages directory: --> -Include your resources in your .vue file inside the pages directory: +pages ディレクトリの .vue ファイル内でリソースをインクルードします: ```html <template> From f0e98cfeb775b16048cca3b4c00e1aa2d122c8d7 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 23:49:36 +0900 Subject: [PATCH 100/129] Translate ja/faq/pre-processors.md --- ja/faq/external-resources.md | 4 ++-- ja/faq/pre-processors.md | 24 ++++++++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/ja/faq/external-resources.md b/ja/faq/external-resources.md index dc289e2f7..3321ee8fd 100644 --- a/ja/faq/external-resources.md +++ b/ja/faq/external-resources.md @@ -1,6 +1,6 @@ --- title: 外部リソース -description: Nuxt.js と一緒に外部リソースを使うにはどうしたらよいですか？ +description: Nuxt.js で外部リソースを使うには？ --- <!-- title: External resources --> @@ -8,7 +8,7 @@ description: Nuxt.js と一緒に外部リソースを使うにはどうした <!-- # How to use external resources? --> -# 外部リソースを使うにはどうしたらよいですか？ +# 外部リソースを使うには？ <!-- ## Global Settings --> diff --git a/ja/faq/pre-processors.md b/ja/faq/pre-processors.md index 235ad9ce3..f0aa7caa7 100644 --- a/ja/faq/pre-processors.md +++ b/ja/faq/pre-processors.md @@ -1,13 +1,22 @@ --- -title: Pre-processors -description: How to use pre-processors with Nuxt.js? +title: プリプロセッサ +description: Nuxt.js でプリプロセッサを使うには？ --- -# How to use pre-processors? +<!-- title: Pre-processors --> +<!-- description: How to use pre-processors with Nuxt.js? --> -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. +<!-- # How to use pre-processors? --> -Example of our `pages/index.vue` using [Pug](https://github.com/pugjs/pug), [CoffeeScript](http://coffeescript.org) and [Sass](http://sass-lang.com/): +# プリプロセッサを使うには？ + +<!-- 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. --> + +[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html) のおかげで、ただ `lang` 属性を使うだけで `<template>` や `<script>` あるいは `<style>` などのためのどんな種類のプリプロセッサも使うことができます。 + +<!-- Example of our `pages/index.vue` using [Pug](https://github.com/pugjs/pug), [CoffeeScript](http://coffeescript.org) and [Sass](http://sass-lang.com/): --> + +[Pug](https://github.com/pugjs/pug)、[CoffeeScript](http://coffeescript.org)、及び [Sass](http://sass-lang.com/) を使った `pages/index.vue` の例: ```html <template lang="pug"> @@ -25,7 +34,10 @@ module.exports = data: -> </style> ``` -To be able to use these pre-processors, we need to install their webpack loaders: +<!-- To be able to use these pre-processors, we need to install their webpack loaders: --> + +これらのプリプロセッサを使うために Webpack のローダーをインストールする必要があります。 + ```bash npm install --save-dev pug@2.0.0-beta6 pug-loader coffee-script coffee-loader node-sass sass-loader ``` From 4d391952b680a537fbfafc94a58d85bd96ff46ce Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 23:55:54 +0900 Subject: [PATCH 101/129] Translate ja/faq/jsx.md --- ja/faq/jsx.md | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/ja/faq/jsx.md b/ja/faq/jsx.md index 9fb99a155..0245ca36f 100644 --- a/ja/faq/jsx.md +++ b/ja/faq/jsx.md @@ -1,17 +1,26 @@ --- title: JSX -description: How to use JSX with Nuxt.js? +description: Nuxt.js で JSX を使うには？ --- -# How to use JSX? +<!-- title: JSX --> +<!-- description: How to use JSX with Nuxt.js? --> -If you want to use JSX in your components, first, you need to install the Babel plugins for JSX: +<!-- # How to use JSX? --> + +# JSX を使うには？ + +<!-- If you want to use JSX in your components, first, you need to install the Babel plugins for JSX: --> + +コンポーネントで JSX を使いたい場合は、まず JSX のための Babel プラグインをインストールする必要があります: ```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: +<!-- 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: --> + +それから `nuxt.config.js` 内で [transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) プラグインを使うことを Nuxt.js に伝えます: ```js module.exports = { @@ -23,9 +32,13 @@ module.exports = { } ``` -To learn more about the babel option, take a look at the [build config documentation](/api/configuration-build). +<!-- 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: +Babel のオプションをより深く理解するには [ビルド設定のドキュメント](/api/configuration-build) を参照してください。 + +<!-- You can now use JSX in your `render` method of your components: --> + +ここまでの設定で、コンポーネントの `render` メソッド内で JSX が使えるようになっています: ```html <script> @@ -40,4 +53,6 @@ export default { </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. +<!-- 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. --> + +JSX の使い方をより深く理解するには Vue.js ドキュメントの [JSX のセクション](https://vuejs.org/v2/guide/render-function.html#JSX) を参照してください。 From 7c2bfe29b5505a38f1228e828fffc7601e901a65 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Tue, 7 Mar 2017 23:58:06 +0900 Subject: [PATCH 102/129] Translate ja/faq/postcss-plugins.md --- ja/faq/postcss-plugins.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/ja/faq/postcss-plugins.md b/ja/faq/postcss-plugins.md index 3f83d2476..1dfa5bf98 100644 --- a/ja/faq/postcss-plugins.md +++ b/ja/faq/postcss-plugins.md @@ -1,11 +1,18 @@ --- -title: Postcss plugins -description: How to add postcss plugins? +title: PostCSS プラグイン +description: PostCSS プラグインを追加するには？ --- -# How to add postcss plugins? +<!-- title: Postcss plugins --> +<!-- description: How to add postcss plugins? --> -In your `nuxt.config.js` file: +<!-- # How to add postcss plugins? --> + +# PostCSS プラグインを追加するには？ + +<!-- In your `nuxt.config.js` file: --> + +`nuxt.config.js` ファイル内に次のように記述します: ```js module.exports = { From 82786f3d7df515a789a04fa00e86293a1391f689 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:01:10 +0900 Subject: [PATCH 103/129] Translate ja/faq/extend-webpack.md --- ja/faq/extend-webpack.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/ja/faq/extend-webpack.md b/ja/faq/extend-webpack.md index c2500ad25..4953adfbc 100644 --- a/ja/faq/extend-webpack.md +++ b/ja/faq/extend-webpack.md @@ -1,11 +1,18 @@ --- -title: Extend Webpack -description: How to extend webpack config? +title: Webpack 設定を拡張する +description: Webpack の設定を拡張するには？ --- -# How to extend webpack config? +<!-- title: Extend Webpack --> +<!-- description: How to extend webpack config? --> -You can extend the webpack configuration via the `extend` option in your `nuxt.config.js`: +<!-- # How to extend webpack config? --> + +# Webpack の設定を拡張するには？ + +<!-- You can extend the webpack configuration via the `extend` option in your `nuxt.config.js`: --> + +`nuxt.config.js` 内の `extend` オプションで Webpack の設定を拡張できます: ```js module.exports = { From b369ad3ccfec73cb2cd880db8f67c259d9cbe923 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:08:06 +0900 Subject: [PATCH 104/129] Translate ja/faq/webpack-plugins.md --- ja/faq/postcss-plugins.md | 2 +- ja/faq/webpack-plugins.md | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/ja/faq/postcss-plugins.md b/ja/faq/postcss-plugins.md index 1dfa5bf98..1d2dd5d32 100644 --- a/ja/faq/postcss-plugins.md +++ b/ja/faq/postcss-plugins.md @@ -12,7 +12,7 @@ description: PostCSS プラグインを追加するには？ <!-- In your `nuxt.config.js` file: --> -`nuxt.config.js` ファイル内に次のように記述します: +`nuxt.config.js` ファイルに次のように記述します: ```js module.exports = { diff --git a/ja/faq/webpack-plugins.md b/ja/faq/webpack-plugins.md index 0c874b844..61cd319db 100644 --- a/ja/faq/webpack-plugins.md +++ b/ja/faq/webpack-plugins.md @@ -1,11 +1,18 @@ --- -title: Webpack plugins -description: How to add webpack plugins? +title: Webpack プラグイン +description: Webpack プラグインを追加するには？ --- -# How to add webpack plugins? +<!-- title: Webpack plugins --> +<!-- description: How to add webpack plugins? --> -In your `nuxt.config.js` file: +<!-- # How to add webpack plugins? --> + +# Webpack プラグインを追加するには？ + +<!-- In your `nuxt.config.js` file: --> + +`nuxt.config.js` ファイルに次のように記述します: ```js const webpack = require('webpack') From 453daa75dd79c29ee2e278a5bf52c24430ef75c4 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:12:40 +0900 Subject: [PATCH 105/129] Translate ja/faq/host-port.md --- ja/faq/host-port.md | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/ja/faq/host-port.md b/ja/faq/host-port.md index 5c97c492f..d84590622 100644 --- a/ja/faq/host-port.md +++ b/ja/faq/host-port.md @@ -1,18 +1,33 @@ --- -title: HOST and PORT -description: How to edit HOST and PORT with Nuxt.js? +title: ホストとポート番号 +description: Nuxt.js でホストとポート番号を変更するには？ --- -# How to edit HOST and PORT? +<!-- 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: --> + +ポート番号を設定するには 2つの異なる方法があります: + +<!-- - Via a env variables --> + +- 環境変数経由 -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`: + +<!-- - Via a nuxt config in the `package.json`: --> + +- `package.json` 内の nuxt 設定経由: + ```js "config": { "nuxt": { From f3de0f55f06a47e960e2bf32a066d5f0093a5a90 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:14:17 +0900 Subject: [PATCH 106/129] Make ja/faq/host-port.md natural --- ja/faq/host-port.md | 4 ++-- ja/faq/postcss-plugins.md | 2 +- ja/faq/webpack-plugins.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ja/faq/host-port.md b/ja/faq/host-port.md index d84590622..efe807e98 100644 --- a/ja/faq/host-port.md +++ b/ja/faq/host-port.md @@ -16,7 +16,7 @@ description: Nuxt.js でホストとポート番号を変更するには？ <!-- - Via a env variables --> -- 環境変数経由 +- 環境変数を使う ```js "scripts": { @@ -26,7 +26,7 @@ description: Nuxt.js でホストとポート番号を変更するには？ <!-- - Via a nuxt config in the `package.json`: --> -- `package.json` 内の nuxt 設定経由: +- `package.json` 内の nuxt 設定を使う: ```js "config": { diff --git a/ja/faq/postcss-plugins.md b/ja/faq/postcss-plugins.md index 1d2dd5d32..1dfa5bf98 100644 --- a/ja/faq/postcss-plugins.md +++ b/ja/faq/postcss-plugins.md @@ -12,7 +12,7 @@ description: PostCSS プラグインを追加するには？ <!-- In your `nuxt.config.js` file: --> -`nuxt.config.js` ファイルに次のように記述します: +`nuxt.config.js` ファイル内に次のように記述します: ```js module.exports = { diff --git a/ja/faq/webpack-plugins.md b/ja/faq/webpack-plugins.md index 61cd319db..78682f2bb 100644 --- a/ja/faq/webpack-plugins.md +++ b/ja/faq/webpack-plugins.md @@ -12,7 +12,7 @@ description: Webpack プラグインを追加するには？ <!-- In your `nuxt.config.js` file: --> -`nuxt.config.js` ファイルに次のように記述します: +`nuxt.config.js` ファイル内に次のように記述します: ```js const webpack = require('webpack') From f308f56a62598b18af6dc9a6f99914e047a52694 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:28:02 +0900 Subject: [PATCH 107/129] Translate ja/faq/google-analytics.md --- ja/faq/google-analytics.md | 79 +++++++++++++++++++++++++++++++------- 1 file changed, 65 insertions(+), 14 deletions(-) diff --git a/ja/faq/google-analytics.md b/ja/faq/google-analytics.md index 6d094dbf3..05bbafbe9 100644 --- a/ja/faq/google-analytics.md +++ b/ja/faq/google-analytics.md @@ -1,39 +1,81 @@ --- -title: Google Analytics Integration -description: How to use Google Analytics? +title: Google アナリティクスの統合 +description: Google アナリティクスを使うには？ --- -## How to use Google Analytics? +<!-- title: Google Analytics Integration --> +<!-- description: 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`: +<!-- ## How to use Google Analytics? --> + +## Google アナリティクスを使うには？ + +<!-- To use [Google Analytics](https://analytics.google.com/analytics/web/) with your nuxt.js application, we recommend to create a file `plugins/ga.js`: --> + +Nuxt.js アプリケーションで [Google アナリティクス](https://analytics.google.com/analytics/web/) を使うには `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') --> +<!-- }) --> +<!-- }) --> +<!-- } --> +<!-- ``` --> ```js /* -** Only run on client-side and only in production mode +** クライアントサイドかつプロダクションモードでのみ実行 */ if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { /* - ** Include Google Analytics Script + ** Google アナリティクスのスクリプトをインクルード */ (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 + ** Google アナリティクスにページビューが追加されたことを伝える */ ga('set', 'page', to.fullPath) ga('send', 'pageview') @@ -42,11 +84,16 @@ if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { } ``` -> Replace `UA-XXXXXXXX-X` by your Google Analytics tracking ID. +<!-- \> Replace `UA-XXXXXXXX-X` by your Google Analytics tracking ID. --> + +> `UA-XXXXXXXX-X`を Google アナリティクスのトラッキング ID に置き換えてください。 -Then, we tell nuxt.js to import it in our main application: +<!-- Then, we tell nuxt.js to import it in our main application: --> + +それから `plugins/ga.js` をメインアプリケーション内でインポートすることを Nuxt.js に伝えます: `nuxt.config.js` + ```js module.exports = { plugins: [ @@ -55,6 +102,10 @@ module.exports = { } ``` -Voilà, Google Analytics is integrated into your nuxt.js application and will track every page view! +<!-- Voilà, Google Analytics is integrated into your nuxt.js application and will track every page view! --> + +これで Google アナリティクスは Nuxt.js アプリケーションに統合され、すべてのページビューをトラッキングするようになりました！ + +<!-- <p class="Alert Alert--nuxt-green"><b>INFO:</b> you can use this method for any other tracking service.</p> --> -<p class="Alert Alert--nuxt-green"><b>INFO:</b> you can use this method for any other tracking service.</p> +<p class="Alert Alert--nuxt-green"><b>情報:</b> この方法を他のトラッキングサービスでも使うことができます。</p> From 1a4bbb2679f49f1b60a894dffcbf1b812b157f2e Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:29:42 +0900 Subject: [PATCH 108/129] Make ja/faq/google-analytics.md natural --- ja/faq/google-analytics.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/faq/google-analytics.md b/ja/faq/google-analytics.md index 05bbafbe9..80ebba6dd 100644 --- a/ja/faq/google-analytics.md +++ b/ja/faq/google-analytics.md @@ -104,8 +104,8 @@ module.exports = { <!-- Voilà, Google Analytics is integrated into your nuxt.js application and will track every page view! --> -これで Google アナリティクスは Nuxt.js アプリケーションに統合され、すべてのページビューをトラッキングするようになりました！ +よし！これで Google アナリティクスは Nuxt.js アプリケーションに統合され、すべてのページビューをトラッキングするようになりました！ <!-- <p class="Alert Alert--nuxt-green"><b>INFO:</b> you can use this method for any other tracking service.</p> --> -<p class="Alert Alert--nuxt-green"><b>情報:</b> この方法を他のトラッキングサービスでも使うことができます。</p> +<p class="Alert Alert--nuxt-green"><b>情報:</b> 他のトラッキングサービスでも、同様の方法を使うことができます。</p> From 5938e0c3cc86c4193fc6feccc6c52ee2b8b083ec Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 00:49:51 +0900 Subject: [PATCH 109/129] Format indent of code --- ja/faq/host-port.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ja/faq/host-port.md b/ja/faq/host-port.md index efe807e98..efc8538cc 100644 --- a/ja/faq/host-port.md +++ b/ja/faq/host-port.md @@ -20,7 +20,7 @@ description: Nuxt.js でホストとポート番号を変更するには？ ```js "scripts": { - "dev": "HOST=0.0.0.0 PORT=3333 nuxt" + "dev": "HOST=0.0.0.0 PORT=3333 nuxt" } ``` @@ -30,12 +30,12 @@ description: Nuxt.js でホストとポート番号を変更するには？ ```js "config": { - "nuxt": { - "host": "0.0.0.0", - "port": "3333" - } + "nuxt": { + "host": "0.0.0.0", + "port": "3333" + } }, "scripts": { - "dev": "nuxt" + "dev": "nuxt" } ``` From d328cc5419a03a0e96d8e381846fc3c84c67b371 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 19:57:03 +0900 Subject: [PATCH 110/129] Translate ja/faq/window-document-undefined.md --- ja/faq/window-document-undefined.md | 30 ++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/ja/faq/window-document-undefined.md b/ja/faq/window-document-undefined.md index 3a405280c..e7d4c7d63 100644 --- a/ja/faq/window-document-undefined.md +++ b/ja/faq/window-document-undefined.md @@ -1,21 +1,37 @@ --- -title: Window or Document undefined -description: Window or Document undefined with Nuxt.js? +title: Window または Document が undefined +description: Nuxt.js で Window または Document が undefined のときは？ --- -# Window or Document undefined? +<!-- title: Window or Document undefined --> +<!-- description: Window or Document undefined with Nuxt.js? --> -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. +<!-- # Window or Document undefined? --> + +# Window または 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. --> + +あるリソースをクライアントサイドでのみインポートしたいときは `process.BROWSER_BUILD` 変数を使う必要があります。 + +<!-- For example, in your .vue file: --> + +例えば .vue ファイルに次のように書きます: -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`: +<!-- Don't forget to add your library in the [vendor bundle](/api/configuration-build#build-vendor) in your `nuxt.config.js`: --> + +`nuxt.config.js` ファイル内で当該ライブラリを [vendor bundle](/api/configuration-build#build-vendor) に加えておくのを忘れないでください。 + ```js build: { vendor: ['external_library'] From df4f899c8f96cc03d56a2fd492905f43fd711b28 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 20:10:25 +0900 Subject: [PATCH 111/129] Translate ja/faq/css-flash.md --- ja/faq/css-flash.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/ja/faq/css-flash.md b/ja/faq/css-flash.md index 41a5ed34e..baaeda7e7 100644 --- a/ja/faq/css-flash.md +++ b/ja/faq/css-flash.md @@ -1,12 +1,21 @@ --- title: CSS Flash -description: Why a CSS Flash appears with Nuxt.js? +description: どうして Nuxt.js で CSS Flash が見えるのか？ --- -# Why a CSS Flash appears? +<!-- title: CSS Flash --> +<!-- description: Why a CSS Flash appears with Nuxt.js? --> + +<!-- # Why a CSS Flash appears? --> + +# どうして CSS Flash が見えるのか？ ![cssflash](/flash_css.gif) -This is because the CSS is in the JavaScript build in **development mode** to allow hot-reloading via Webpack. +<!-- This is because the CSS is in the JavaScript build in **development mode** to allow hot-reloading via Webpack. --> + +これが見えるのは Webpack をとおしてホットリローディングする **開発モード** でビルドした JavaScript の中に CSS が埋め込まれているためです。 Don't worry in production mode, the CSS is separated and put in the header so this "flash" does not appear anymore. + +心配しないてください。プロダクションモードでは CSS は分離されて head に置かれるため、このような "flash" は見えません。 From eb4d26c2ab846d3861dfa1f21476a022142dd60f Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 21:08:05 +0900 Subject: [PATCH 112/129] Translate ja/faq/async-data-components.md --- ja/faq/async-data-components.md | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/ja/faq/async-data-components.md b/ja/faq/async-data-components.md index b96e4e2f2..b4547be64 100644 --- a/ja/faq/async-data-components.md +++ b/ja/faq/async-data-components.md @@ -1,14 +1,29 @@ --- -title: Async data in components -description: Async data in components? +title: コンポーネント内の非同期データ +description: コンポーネント内で非同期データを扱うには？ --- -# Async data in components? +<!-- title: Async data in components --> +<!-- description: 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. +<!-- # Async data in components? --> -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. +<!-- 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. --> + +コンポーネントはルートに関連付けられていないため（訳注: 基本的には）非同期データを扱うことはできません。Nuxt.js ではルートに関連付けられたコンポーネントの data() メソッドに手を加えて非同期データを扱えるようにしています。 + +<!-- For sub components, there are 2 ways of achieving it: --> + +しかしながら、サブコンポーネントでも非同期データを扱えるようにする方法が 2つあります: + +<!-- 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 --> + +1. mounted() フック内に API コールを作成し、その呼び出し以降にデータをセットすること。マイナスな側面としては、サーバーサイドレンダリングできなくなります。 +2. ページコンポーネントの data() メソッド内に API コールを作成し、データをプロパティとしてサブコンポーネントに渡すこと。この方法ではサーバーサイドレンダリングできます。しかしページの data() メソッドがサブコンポーネントの非同期データをロードするため、可読性が落ちるかもしれません。 + +<!-- It all depends if you want the sub components to be server-rendered or not. --> + +どちらを選ぶべきかは、サブコンポーネントをサーバーサイドレンダリングしたいか否かにかかっています。 From bdad48e41b8fa3561f1e70a3036d8042ad02bd5e Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Wed, 8 Mar 2017 21:31:25 +0900 Subject: [PATCH 113/129] Translate ja/faq/duplicated-meta-tags.md --- ja/faq/duplicated-meta-tags.md | 37 +++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/ja/faq/duplicated-meta-tags.md b/ja/faq/duplicated-meta-tags.md index 235a51f11..75fc76244 100644 --- a/ja/faq/duplicated-meta-tags.md +++ b/ja/faq/duplicated-meta-tags.md @@ -1,17 +1,31 @@ --- -title: Duplicated Meta tags -description: Duplicated Meta tags with Nuxt.js? +title: 重複したメタタグ +description: Nuxt.js でメタタグが重複したときは？ --- -# Duplicated Meta tags? +<!-- title: Duplicated Meta tags --> +<!-- description: Duplicated Meta tags with Nuxt.js? --> -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). +<!-- # Duplicated Meta tags? --> -> 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. +<!-- 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). --> + +これは [vue-meta](https://github.com/declandewet/vue-meta) の "特徴" です。[head 要素のドキュメント](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. --> + +コンポーネントで vue-meta が使われたときに重複を避けるためには、ユニーク識別子を hid キーで付与してください。詳細は [こちら](https://github.com/declandewet/vue-meta#lists-of-tags) を参照してください。 + +<!-- 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. --> + +例えば description のメタタグについて、`hid` ユニーク識別子を付与する必要があります。そうすれば vue-meta は、デフォルトのタグを上書きすべきということを知ることができます。 + +<!-- Your `nuxt.config.js`: --> + +`nuxt.config.js`: -Your `nuxt.config.js`: ```js ...head: { title: 'starter', @@ -25,7 +39,10 @@ Your `nuxt.config.js`: ... ``` -An then in your individual page: +<!-- An then in your individual page: --> + +それから個別ページには次のように記述します: + ```js export default { head () { @@ -39,4 +56,6 @@ export default { } ``` -To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views/#html-head). +<!-- To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views/#html-head). --> + +ページ内の `head` プロパティの使い方をより深く理解するには [HTML の head 情報のドキュメント](/guide/views/#html-head) を参照してください。 From 9b39d96af7a186509f1f705bbcf6d97e91df46ff Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 21:16:06 +0900 Subject: [PATCH 114/129] Translate ja/faq/heroku-deployment.md --- ja/faq/heroku-deployment.md | 45 ++++++++++++++++++++++++++++--------- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/ja/faq/heroku-deployment.md b/ja/faq/heroku-deployment.md index d077f027f..409891c36 100644 --- a/ja/faq/heroku-deployment.md +++ b/ja/faq/heroku-deployment.md @@ -1,28 +1,46 @@ --- -title: Heroku Deployment -description: How to deploy Nuxt.js on Heroku? +title: Heroku へデプロイ +description: Heroku へデプロイするには？ --- -# How to deploy on Heroku? +<!-- title: Heroku Deployment --> +<!-- description: How to deploy Nuxt.js on Heroku? --> -We recommend you to read the [Heroku documentation for node.js](https://devcenter.heroku.com/articles/nodejs-support). +<!-- # How to deploy on Heroku? --> + +# Heroku へデプロイするには？ + +<!-- We recommend you to read the [Heroku documentation for node.js](https://devcenter.heroku.com/articles/nodejs-support). --> + +[Node.js 用の Heroku ドキュメント](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`): --> + +まず `npm run build` を実行できるようにするために、 Heroku にプロジェクトの `devDependencies` をインストールすることを伝える必要があります: -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: +<!-- Also, we want our application to listen on the port `0.0.0.0` and run in production mode: --> + +またアプリケーションに `0.0.0.0` ポートを Listen させ、プロダクションモードで起動します: + ```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): +<!-- You should see this in your Heroku dashboard (Settings section): --> -![nuxt config vars Heroku](https://i.imgur.com/EEKl6aS.png) +Heroku ダッシュボードの Settings セクションで確認すべきです。 + + ![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`: --> + +それから `package.json` 内の `heroku-postbuild` スクリプト経由で Heroku に `npm run build` を実行するよう伝えます: -Then, we tell Heroku to launch `npm run build` via the `heroku-postbuild` script in our `package.json`: ```js "scripts": { "dev": "nuxt", @@ -32,9 +50,14 @@ Then, we tell Heroku to launch `npm run build` via the `heroku-postbuild` script } ``` -Finally, we can push the app on Heroku with: +<!-- Finally, we can push the app on Heroku with: --> + +最後にアプリケーションを Heroku に git push します: + ```bash git push heroku master ``` -Voilà! Your nuxt.js application is now hosted on Heroku! +<!-- Voilà! Your nuxt.js application is now hosted on Heroku! --> + +やりました！これで Nuxt.js アプリケーションは Heroku でホストされるようになりました！ From 17532a97c36042f1473647cf5192401f6ffd309c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 21:19:01 +0900 Subject: [PATCH 115/129] Make ja/faq/heroku-deployment.md natural --- ja/faq/heroku-deployment.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ja/faq/heroku-deployment.md b/ja/faq/heroku-deployment.md index 409891c36..75e07720c 100644 --- a/ja/faq/heroku-deployment.md +++ b/ja/faq/heroku-deployment.md @@ -12,11 +12,11 @@ description: Heroku へデプロイするには？ <!-- We recommend you to read the [Heroku documentation for node.js](https://devcenter.heroku.com/articles/nodejs-support). --> -[Node.js 用の Heroku ドキュメント](https://devcenter.heroku.com/articles/nodejs-support) を読むことをお勧めします。 +[Node.js 用の Heroku ドキュメント](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`): --> -まず `npm run build` を実行できるようにするために、 Heroku にプロジェクトの `devDependencies` をインストールすることを伝える必要があります: +まず `npm run build` を実行できるようにするために、Heroku にプロジェクトの `devDependencies` をインストールすることを伝える必要があります: ```bash heroku config:set NPM_CONFIG_PRODUCTION=false @@ -33,13 +33,13 @@ heroku config:set NODE_ENV=production <!-- You should see this in your Heroku dashboard (Settings section): --> -Heroku ダッシュボードの Settings セクションで確認すべきです。 +下記は Heroku ダッシュボードの Settings セクションに表示されています: ![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`: --> -それから `package.json` 内の `heroku-postbuild` スクリプト経由で Heroku に `npm run build` を実行するよう伝えます: +それから `package.json` 内の `heroku-postbuild` スクリプトを使って、Heroku に `npm run build` を実行するよう伝えます: ```js "scripts": { From b35feee8436b14e79c2f42ef99322b7768001de8 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 21:23:00 +0900 Subject: [PATCH 116/129] Translate ja/faq/now-deployment.md --- ja/faq/now-deployment.md | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/ja/faq/now-deployment.md b/ja/faq/now-deployment.md index e796d437d..db41cf3ca 100644 --- a/ja/faq/now-deployment.md +++ b/ja/faq/now-deployment.md @@ -1,11 +1,19 @@ --- -title: Now Deployment -description: How to deploy Nuxt.js with Now.sh? +title: Now を使ったデプロイ +description: Now を使ってデプロイするには？ --- -# How to deploy with Now.sh? +<!-- title: Now Deployment --> +<!-- description: How to deploy Nuxt.js with Now.sh? --> + +<!-- # How to deploy with Now.sh? --> + +# Now を使ってデプロイするには？ + +<!-- To deploy with [now.sh](https://zeit.co/now) a `package.json` like follows is recommended: --> + +[now.sh](https://zeit.co/now) を使ってデプロイするには `package.json` を次のように記述することが推奨されます: -To deploy with [now.sh](https://zeit.co/now) a `package.json` like follows is recommended: ```json { "name": "my-app", @@ -20,6 +28,10 @@ To deploy with [now.sh](https://zeit.co/now) a `package.json` like follows is re } ``` -Then run `now` and enjoy! +<!-- Then run `now` and enjoy! --> + +これで `now` を実行できます！エンジョイ！ + +<!-- Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. --> -Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. +メモ: `.nuxt` を `.npmignore` または `.gitignore` に入れておくことをお勧めします。 From ba87ec4d2d8bbaf6a9399fcd763ba6c7a2fe71e8 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 21:42:10 +0900 Subject: [PATCH 117/129] Translate ja/faq/surge-deployment.md --- ja/faq/surge-deployment.md | 44 ++++++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/ja/faq/surge-deployment.md b/ja/faq/surge-deployment.md index 7af82dec5..7675dcab7 100644 --- a/ja/faq/surge-deployment.md +++ b/ja/faq/surge-deployment.md @@ -1,33 +1,55 @@ --- -title: Surge Deployment -description: How to deploy Nuxt.js with Surge.sh? +title: Surge へデプロイ +description: Surge.sh へデプロイするには？ --- -# How to deploy with Surge.sh? +<!-- title: Surge Deployment --> +<!-- description: How to deploy Nuxt.js 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. +<!-- # How to deploy with Surge.sh? --> + +# 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. --> + +Nuxt.js を使うと、例えば [surge.sh](https://surge.sh/) のような静的ホスティングサービスで、ウェブアプリケーションをホストすることが可能です。 + +<!-- To deploy on surge.sh, first install it on your computer: --> + +surge.sh へデプロイするには、まず surge をインストールします: -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: +<!-- Then, we tell nuxt.js to generate our web application: --> + +それから Nuxt.js にウェブアプリケーションを生成させます: ```bash npm run generate ``` -It will create a `dist` folder with everything inside ready to be deployed on a static hosting. +<!-- 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: +`dist` フォルダが作成され、その中に静的ホスティングサービスへデプロイされるものがすべて入ります。 + +<!-- We can then deploy it to surge.sh: --> + +surge.sh へデプロイできます: ```bash surge dist/ ``` -Done :) +<!-- 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. --> + +プロジェクトが [動的なルーティング](/guide/routing#dynamic-routes) をしているなら、Nuxt.js に動的なルーティングを生成する方法を伝えるために [生成設定](/api/configuration-generate) を参照してください。 -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> --> -<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> +<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは [data()](/guide/async-data#the-data-method) 及び [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api) が `req` 及び `res` を持っていません。</div> From 8a62b9c70f4c14f429a1bc0c5eb98beb60f1e5b9 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 21:46:35 +0900 Subject: [PATCH 118/129] Make ja/faq/surge-deployment.md natural --- ja/faq/surge-deployment.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ja/faq/surge-deployment.md b/ja/faq/surge-deployment.md index 7675dcab7..51b13ce6e 100644 --- a/ja/faq/surge-deployment.md +++ b/ja/faq/surge-deployment.md @@ -32,11 +32,11 @@ npm run generate <!-- It will create a `dist` folder with everything inside ready to be deployed on a static hosting. --> -`dist` フォルダが作成され、その中に静的ホスティングサービスへデプロイされるものがすべて入ります。 +このとき `dist` フォルダが作成され、その中に静的ホスティングサービスへデプロイされるものがすべて入ります。 <!-- We can then deploy it to surge.sh: --> -surge.sh へデプロイできます: +そして surge.sh へデプロイできます: ```bash surge dist/ @@ -48,8 +48,8 @@ surge dist/ <!-- 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. --> -プロジェクトが [動的なルーティング](/guide/routing#dynamic-routes) をしているなら、Nuxt.js に動的なルーティングを生成する方法を伝えるために [生成設定](/api/configuration-generate) を参照してください。 +プロジェクトが [動的なルーティング](/guide/routing#dynamic-routes) をしている場合は、動的なルーティングをどのように生成するかを Nuxt.js に伝えるために [生成の設定](/api/configuration-generate) を参照してください。 <!-- <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> --> -<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは [data()](/guide/async-data#the-data-method) 及び [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api) が `req` 及び `res` を持っていません。</div> +<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは [data()](/guide/async-data#the-data-method) や [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api) が `req` 及び `res` を持っていません。</div> From 52a25cc6b5aed22fc25b36ab81a9c34f503ac3bf Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 22:08:50 +0900 Subject: [PATCH 119/129] Translate ja/faq/github-pages.md --- ja/faq/github-pages.md | 50 ++++++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/ja/faq/github-pages.md b/ja/faq/github-pages.md index 205dabb37..5e5d9b520 100644 --- a/ja/faq/github-pages.md +++ b/ja/faq/github-pages.md @@ -1,31 +1,54 @@ --- -title: Github Pages Deployment -description: How to deploy Nuxt.js on Github Pages? +title: Github Pages へデプロイ +description: Github Pages へデプロイするには？ --- -# How to deploy on Github Pages? +<!-- title: Github Pages Deployment --> +<!-- description: How to deploy Nuxt.js 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. +<!-- # How to deploy on Github Pages? --> -To deploy on Github Pages, you need to generate your static web application: +# 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. --> + +Nuxt.js を使うと、例えば [Github Pages](https://pages.github.com/) のような静的ホスティングサービスで、ウェブアプリケーションをホストすることが可能です。 + +<!-- To deploy on Github Pages, you need to generate your static web application: --> + +Github Pages へデプロイするには、静的なウェブアプリケーションを生成する必要があります: ```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 +<!-- It will create a `dist` folder with everything inside ready to be deployed on Github Pages hosting. --> + +このとき dist フォルダが作成され、その中に Github Pages ホスティングへデプロイされるものがすべて入ります。 + +<!-- Branch `gh-pages` for project repository OR branch `master` for user or organization site --> + +プロジェクトリポジトリならば `gh-pages` ブランチ、ユーザーまたは組織サイトならば `master` ブランチを指定してください。 -## Command line deployment +<!-- ## Command line deployment --> -You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): +## コマンドラインでデプロイする + +<!-- You can also use [push-dir package](https://github.com/L33T-KR3W/push-dir): --> + +[push-dir package](https://github.com/L33T-KR3W/push-dir) を使うこともできます: + +<!-- First install it via npm: --> + +まず npm でインストールしてください: -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. +<!-- Add a `deploy` command to your package.json with the branch as `gh-pages` for project repository OR `master` for user or organization site. --> + +`deploy` コマンドを package.json に追加してください。ブランチは、プロジェクトリポジトリならば `gh-pages` ブランチ、ユーザーまたは組織サイトならば `master` ブランチを指定してください。 ```js "scripts": { @@ -37,7 +60,10 @@ Add a `deploy` command to your package.json with the branch as `gh-pages` for pr }, ``` -Then generate and deploy your static application: +<!-- Then generate and deploy your static application: --> + +それから静的なアプリケーションを生成し、デプロイしてください: + ```bash npm run generate npm run deploy From ec6d05719c3d8e0d80b000a4377252b412de5cf1 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Thu, 9 Mar 2017 22:22:39 +0900 Subject: [PATCH 120/129] Japanese translation is maintained by INOUE Takuya --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index df7e1b425..2870f960b 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ npm run dev ### Russian Russian translation is maintained by Translation Gang. + * Translation Repo — [/translation-gang/ru.docs.nuxtjs](https://github.com/translation-gang/ru.docs.nuxtjs) * Primary maintainer - [Grigoriy Beziuk](https://gbezyuk.github.io) * Primary translator - [Nicholas Shachmatov](https://github.com/theOnlyBoy) @@ -25,10 +26,19 @@ Russian translation is maintained by Translation Gang. ### Chinese Chinese translation is maintained by AOTU Labs from China, Shenzhen. + * Translation Repo — [/o2team/i18n-cn-nuxtjs-docs](https://github.com/o2team/i18n-cn-nuxtjs-docs) * Primary maintainer - [AOTU Labs](https://aotu.io) * Primary translator - [Levin Wong](http://faso.me), [Edward Chu](https://github.com/chuyik) +### Japanese + +Japanese translation is maintained by INOUE Takuya. + +* Translation Repo — [/inouetakuya/ja.docs.nuxtjs](https://github.com/inouetakuya/ja.docs.nuxtjs) +* Primary maintainer - [INOUE Takuya](http://blog.inouetakuya.info/) +* Primary translator - [INOUE Takuya](https://github.com/inouetakuya) + ### Want to help with the translation? If you feel okay with translating sorta alone, just fork the repo, create a "work-in-progress" pull request (mark it with [WIP], see [Russian translation](https://github.com/nuxt/docs/pull/3) if you need an example) — and just go on. From e86036898c7e50f55a33a53ed98b0812436deefb Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 11 Mar 2017 22:15:58 +0900 Subject: [PATCH 121/129] Translate ja/faq/menu.json --- ja/faq/css-flash.md | 4 +-- ja/faq/duplicated-meta-tags.md | 2 +- ja/faq/google-analytics.md | 2 +- ja/faq/menu.json | 38 ++++++++++++++--------------- ja/faq/window-document-undefined.md | 6 ++--- 5 files changed, 26 insertions(+), 26 deletions(-) diff --git a/ja/faq/css-flash.md b/ja/faq/css-flash.md index baaeda7e7..cdcb7d411 100644 --- a/ja/faq/css-flash.md +++ b/ja/faq/css-flash.md @@ -1,6 +1,6 @@ --- title: CSS Flash -description: どうして Nuxt.js で CSS Flash が見えるのか？ +description: なぜ CSS Flash が見えるのか？ --- <!-- title: CSS Flash --> @@ -8,7 +8,7 @@ description: どうして Nuxt.js で CSS Flash が見えるのか？ <!-- # Why a CSS Flash appears? --> -# どうして CSS Flash が見えるのか？ +# なぜ CSS Flash が見えるのか？ ![cssflash](/flash_css.gif) diff --git a/ja/faq/duplicated-meta-tags.md b/ja/faq/duplicated-meta-tags.md index 75fc76244..460666a66 100644 --- a/ja/faq/duplicated-meta-tags.md +++ b/ja/faq/duplicated-meta-tags.md @@ -1,6 +1,6 @@ --- title: 重複したメタタグ -description: Nuxt.js でメタタグが重複したときは？ +description: メタタグが重複したときは？ --- <!-- title: Duplicated Meta tags --> diff --git a/ja/faq/google-analytics.md b/ja/faq/google-analytics.md index 80ebba6dd..d69ca33aa 100644 --- a/ja/faq/google-analytics.md +++ b/ja/faq/google-analytics.md @@ -8,7 +8,7 @@ description: Google アナリティクスを使うには？ <!-- ## How to use Google Analytics? --> -## Google アナリティクスを使うには？ +# Google アナリティクスを使うには？ <!-- To use [Google Analytics](https://analytics.google.com/analytics/web/) with your nuxt.js application, we recommend to create a file `plugins/ga.js`: --> diff --git a/ja/faq/menu.json b/ja/faq/menu.json index ba43e2a84..2eb6f68d9 100644 --- a/ja/faq/menu.json +++ b/ja/faq/menu.json @@ -1,33 +1,33 @@ [ { - "title": "Configuration", + "title": "設定", "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" } + { "name": "外部リソースを使うには？", "to": "" }, + { "name": "プリプロセッサを使うには？", "to": "/pre-processors" }, + { "name": "JSX を使うには？", "to": "/jsx" }, + { "name": "PostCSS プラグインを追加するには？", "to": "/postcss-plugins" }, + { "name": "Webpack の設定を拡張するには？", "to": "/extend-webpack" }, + { "name": "Webpack プラグインを追加するには？", "to": "/webpack-plugins" }, + { "name": "ホストとポート番号を変更するには？", "to": "/host-port" }, + { "name": "Google アナリティクスを使うには？", "to": "/google-analytics" } ] }, { - "title": "Development", + "title": "開発", "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" } + { "name": "window または document が undefined のときは？", "to": "/window-document-undefined" }, + { "name": "なぜ CSS Flash が見えるのか？", "to": "/css-flash" }, + { "name": "コンポーネント内で非同期データを扱うには？", "to": "/async-data-components" }, + { "name": "メタタグが重複したときは？", "to": "/duplicated-meta-tags" } ] }, { - "title": "Deployment", + "title": "デプロイ", "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" } + { "name": "Heroku へデプロイするには？", "to": "/heroku-deployment" }, + { "name": "Now を使ってデプロイするには？", "to": "/now-deployment" }, + { "name": "Surge.sh へデプロイするには？", "to": "/surge-deployment" }, + { "name": "Github Pages へデプロイするには？", "to": "/github-pages" } ] } ] diff --git a/ja/faq/window-document-undefined.md b/ja/faq/window-document-undefined.md index e7d4c7d63..5b0df1896 100644 --- a/ja/faq/window-document-undefined.md +++ b/ja/faq/window-document-undefined.md @@ -1,6 +1,6 @@ --- -title: Window または Document が undefined -description: Nuxt.js で Window または Document が undefined のときは？ +title: window または document が undefined +description: Nuxt.js で window または document が undefined のときは？ --- <!-- title: Window or Document undefined --> @@ -8,7 +8,7 @@ description: Nuxt.js で Window または Document が undefined のときは？ <!-- # Window or Document undefined? --> -# Window または Document が undefined のときは？ +# window または document が undefined のときは？ <!-- This is due to the server-side rendering. --> From 6531fb8fbdec50f04b3137c439cf8accb097cd75 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 11 Mar 2017 23:42:29 +0900 Subject: [PATCH 122/129] Improve translation in ja/guide/index.md --- ja/guide/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ja/guide/index.md b/ja/guide/index.md index 0d158d90c..655ba160a 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -1,6 +1,6 @@ --- title: はじめに -description: "2016年10月25日、zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。そしてその発表から数時間後、Next.js と同じやり方で、しかし今度は Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。" +description: "2016年10月25日 zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。そしてその発表から数時間後、Next.js と同じやり方で、しかし今度は Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。" --- <!-- title: Introduction --> @@ -8,7 +8,7 @@ description: "2016年10月25日、zeit.co のチームが React アプリケー <!-- \> 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. --> -> 2016年10月25日、[zeit.co](https://zeit.co/) のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク [Next.js](https://zeit.co/blog/next) を発表しました。そしてその発表からわずか数時間後、Next.js と同じやり方で、しかし今度は [Vue.js](https://vuejs.org) をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち **Nuxt.js** の誕生です。 +> 2016年10月25日 [zeit.co](https://zeit.co/) のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク [Next.js](https://zeit.co/blog/next) を発表しました。そしてその発表からわずか数時間後、Next.js と同じやり方で、しかし今度は [Vue.js](https://vuejs.org) をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち **Nuxt.js** の誕生です。 <!-- ## What is Nuxt.js ? --> @@ -20,7 +20,7 @@ Next.js とはユニバーサルな Vue.js アプリケーションを構築す <!-- Its main scope is **UI rendering** while abstracting away the client/server distribution. --> -クライアントサイドとサーバーサイドのディストリビューションを抽象化している間の **UI レンダリング** に焦点を当てています。 +クライアントサイド用のディストリビューションと、サーバーサイド用のディストリビューションとを分離して生成している間に行う **UI レンダリング** に焦点を当てています。 <!-- 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. --> @@ -28,16 +28,16 @@ Next.js とはユニバーサルな Vue.js アプリケーションを構築す <!-- Nuxt.js presets all the configuration needed to make your development of a Vue.js Application **Server Rendered** more enjoyable. --> -Nuxt.js は **サーバーサイドレンダリング** する Vue.js アプリケーションの開発をもっと楽しくするために必要な設定を用意しています。 +Nuxt.js は **サーバーサイドレンダリング** する Vue.js アプリケーションの開発をもっと楽しくするために必要な設定を、あらかじめセットしています。 <!-- 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. --> -それに加えて、*nuxt genrate* と呼ばれる別の開発オプションも提供します。これは **静的に生成された** Vue.js アプリケーションを構築するためのものです。私たちはこのオプションが、マイクロサービスでウェブアプリケーションを開発するための次の大きな一歩になり得ると信じています。 +それに加えて *nuxt genrate* と呼ばれる別の開発オプションも提供します。これは **静的に生成された** Vue.js アプリケーションを構築するためのものです。私たちはこのオプションが、マイクロサービスでウェブアプリケーションを開発するための次の大きな一歩になり得ると信じています。 <!-- 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. --> -Nuxt.js はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けする、たくさんの機能を備えています。例えば、非同期でのデータをやり取りや、ミドルウェアやレイアウトなどです。 +Nuxt.js はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けする、たくさんの機能を備えています。例えば、非同期でのデータのやり取りや、Nuxt.js をミドルウェアとして利用することや、レイアウト機能などです。 <!-- ## How it Works --> @@ -80,11 +80,11 @@ Nuxt.js はリッチなウェブアプリケーションを構築するために - Vue ファイルで記述できること - コードを自動的に分割すること - サーバーサイドレンダリング -- 非同期データを伴うパワフルなルーティング +- 非同期データをハンドリングするパワフルなルーティング - 静的なファイルの配信 - ES6/ES7 のトランスパイレーション - JS と CSS のバンドル及びミニファイ -- Head タグ（訳注: メタタグ）の管理 +- Head 要素の管理 - 開発モードにおけるホットリローディング - SASS, LESS, Stylus などのプリプロセッサのサポート @@ -185,4 +185,4 @@ Nuxt.js による大きなイノベーションがやってきました。それ <!-- 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! --> -さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーでいろいろなインスタンスを起動したり、キャッシュを持ったりする必要がもうないのです！ +さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーでいろいろなインスタンスを起動したり、キャッシュを持ったりする必要はもうないのです！ From 37f69bcdbacc4394c627158b9f7180a2f0a954c2 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sat, 11 Mar 2017 23:59:09 +0900 Subject: [PATCH 123/129] Improve translation in ja/guide/installation.md --- ja/guide/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ja/guide/installation.md b/ja/guide/installation.md index b0fc3223c..4a6301f6a 100644 --- a/ja/guide/installation.md +++ b/ja/guide/installation.md @@ -103,7 +103,7 @@ $ cd <project-name> <!-- Once the `package.json` has been created, add `nuxt` to the project via NPM: --> -`package.json` を作成した後すぐに、`nuxt` を NPM 経由でプロジェクト追加しましょう: +`package.json` を作成した後すぐ `nuxt` を NPM 経由でプロジェクト追加しましょう: ```bash npm install --save nuxt From d87c9948a34706b2eb8d6f041b6a9298ff9cf66e Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sun, 12 Mar 2017 00:35:27 +0900 Subject: [PATCH 124/129] Fix anchor links in ja --- ja/api/components-nuxt-child.md | 2 +- ja/api/components-nuxt.md | 2 +- ja/api/configuration-css.md | 2 +- ja/api/configuration-env.md | 2 +- ja/api/configuration-generate.md | 2 +- ja/api/configuration-plugins.md | 2 +- ja/api/configuration-router.md | 2 +- ja/api/configuration-transition.md | 2 +- ja/api/nuxt-render-route.md | 2 +- ja/api/pages-fetch.md | 2 +- ja/api/pages-layout.md | 2 +- ja/api/pages-middleware.md | 2 +- ja/examples/custom-routes.md | 2 +- ja/faq/duplicated-meta-tags.md | 8 ++++---- ja/faq/surge-deployment.md | 2 +- ja/faq/window-document-undefined.md | 2 +- ja/guide/async-data.md | 4 ++-- ja/guide/commands.md | 2 +- ja/guide/directory-structure.md | 4 ++-- ja/guide/routing.md | 4 ++-- ja/guide/views.md | 6 +++--- 21 files changed, 29 insertions(+), 29 deletions(-) diff --git a/ja/api/components-nuxt-child.md b/ja/api/components-nuxt-child.md index 5ef2d7163..7aeab77ad 100644 --- a/ja/api/components-nuxt-child.md +++ b/ja/api/components-nuxt-child.md @@ -12,7 +12,7 @@ description: 現在のページを表示します。 <!-- \> This component is used for displaying the children components in a [nested route](/guide/routing#nested-routes). --> -> このコンポーネントは [ネストされたルート](/guide/routing#nested-routes) 内で子コンポーネントを表示するために使われます。 +> このコンポーネントは [ネストされたルート](/guide/routing#ネストされたルート) 内で子コンポーネントを表示するために使われます。 <!-- Example: --> diff --git a/ja/api/components-nuxt.md b/ja/api/components-nuxt.md index c8b301976..70791440d 100644 --- a/ja/api/components-nuxt.md +++ b/ja/api/components-nuxt.md @@ -12,7 +12,7 @@ description: レイアウト内でページコンポーネントを表示しま <!-- \> This component is used only in [layouts](/guide/views#layouts) to display the page components. --> -> このコンポーネントは [レイアウト](/guide/views#layouts) 内でのみ、ページコンポーネントを表示するために使われます。 +> このコンポーネントは [レイアウト](/guide/views#レイアウト) 内でのみ、ページコンポーネントを表示するために使われます。 <!-- Example (`layouts/default.vue`): --> diff --git a/ja/api/configuration-css.md b/ja/api/configuration-css.md index 162ae919f..067254de0 100644 --- a/ja/api/configuration-css.md +++ b/ja/api/configuration-css.md @@ -28,7 +28,7 @@ description: Nuxt.js ではグローバルに適用したい（すべてのペ <!-- - lang: `String` ([pre-processor used](/guide/pages#using-pre-processors)) --> - src: `文字列`（ファイルのパス） -- lang: `文字列`（[使われているプリプロセッサ](/guide/pages#using-pre-processors)） +- lang: `文字列`（[プリプロセッサを使うには？](/faq/pre-processors)） <!-- In `nuxt.config.js`, add the CSS resources: --> diff --git a/ja/api/configuration-env.md b/ja/api/configuration-env.md index 275c4c0c6..ec23ebd60 100644 --- a/ja/api/configuration-env.md +++ b/ja/api/configuration-env.md @@ -42,7 +42,7 @@ module.exports = { <!-- 2. Via `context.baseUrl`, see [context api](/api#context) --> 1. `process.env.baseUrl` 経由でアクセスする -2. `context.baseUrl` を経由する。詳細は [context API](/api#context) +2. `context.baseUrl` を経由する。詳細は [コンテキスト API](/api#コンテキスト) <!-- You can use the `env` property for giving public token for example. --> diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md index 9971d43ce..4b4590e52 100644 --- a/ja/api/configuration-generate.md +++ b/ja/api/configuration-generate.md @@ -46,7 +46,7 @@ description: ユニバーサルなウェブアプリケーションから静的 <!-- When using [dynamic routes](/guide/routing#dynamic-routes), you need to define a mapping of params for each dynamic route to generate. --> -[動的なルーティング](/guide/routing#dynamic-routes) を使うときは、パラメータとそれぞれの動的なルートとのマッピングを定義する必要があります。 +[動的なルーティング](/guide/routing#動的なルーティング) を使うときは、パラメータとそれぞれの動的なルートとのマッピングを定義する必要があります。 <!-- Example: --> diff --git a/ja/api/configuration-plugins.md b/ja/api/configuration-plugins.md index 33358cccf..eb520cc78 100644 --- a/ja/api/configuration-plugins.md +++ b/ja/api/configuration-plugins.md @@ -51,4 +51,4 @@ Vue.use(VueNotifications) <!-- To learn more how to use the plugins, see the [guide documentation](/guide/plugins#vue-plugins). --> -plugins の使い方をより深く理解するには [guide ドキュメント](/guide/plugins#vue-plugins) を参照してください。 +plugins の使い方をより深く理解するには [ガイド](/guide/plugins#vue-プラグイン) を参照してください。 diff --git a/ja/api/configuration-router.md b/ja/api/configuration-router.md index 342b501b4..98b8428ca 100644 --- a/ja/api/configuration-router.md +++ b/ja/api/configuration-router.md @@ -213,7 +213,7 @@ export default function (context) { <!-- To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). --> -ミドルウェアについてより深く理解するには [middleware guide](/guide/routing#middleware) ガイドを参照してください。 +ミドルウェアについてより深く理解するには [ミドルウェア](/guide/routing#ミドルウェア) ガイドを参照してください。 ## extendRoutes diff --git a/ja/api/configuration-transition.md b/ja/api/configuration-transition.md index 5b4620a55..4a0df526e 100644 --- a/ja/api/configuration-transition.md +++ b/ja/api/configuration-transition.md @@ -63,4 +63,4 @@ module.exports = { <!-- 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). --> -`nuxt.config.js` 内の transition キーはページのトランジションのデフォルト設定を指定するために使われます。`transition` キーがオブジェクトのときに利用可能なキーについてより深く理解するには [ページのトランジションプロパティ](/api/pages-transition#object) を参照してください。 +`nuxt.config.js` 内の transition キーはページのトランジションのデフォルト設定を指定するために使われます。`transition` キーがオブジェクトのときに利用可能なキーについてより深く理解するには [ページのトランジションプロパティ](/api/pages-transition#オブジェクト) を参照してください。 diff --git a/ja/api/nuxt-render-route.md b/ja/api/nuxt-render-route.md index e9ea5a809..1d6f4c013 100644 --- a/ja/api/nuxt-render-route.md +++ b/ja/api/nuxt-render-route.md @@ -32,7 +32,7 @@ description: 特定のルートをレンダリングします。その際にコ <!-- 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). --> -このメソッドはほとんどの場合 [nuxt.renderAndGetWindow](/api/nuxt-render-and-get-window) とともに [テストする目的](guide/development-tools#end-to-end-testing) で使われます。 +このメソッドはほとんどの場合 [nuxt.renderAndGetWindow](/api/nuxt-render-and-get-window) とともに [テストする目的](guide/development-tools#エンドツーエンドテスト) で使われます。 <!-- <p class="Alert Alert--info">`nuxt.renderRoute` should be executed after the build process in production mode (dev: false).</p> --> diff --git a/ja/api/pages-fetch.md b/ja/api/pages-fetch.md index 0bcf04280..aa392071b 100644 --- a/ja/api/pages-fetch.md +++ b/ja/api/pages-fetch.md @@ -24,7 +24,7 @@ description: fetch メソッドは、ページがレンダリングされる前 <!-- 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. --> -`fetch` メソッドは第一引数として [context](/api#context) を受け取り、context を使ってデータを取得してデータをストアに入れることができます。fetch メソッドを非同期にするためには **Promise を返すようにしてください**。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 +`fetch` メソッドは第一引数として [context](/api#コンテキスト) を受け取り、context を使ってデータを取得してデータをストアに入れることができます。fetch メソッドを非同期にするためには **Promise を返すようにしてください**。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 <!-- Example of `pages/index.vue`: --> diff --git a/ja/api/pages-layout.md b/ja/api/pages-layout.md index f63163066..41d8eb90b 100644 --- a/ja/api/pages-layout.md +++ b/ja/api/pages-layout.md @@ -37,4 +37,4 @@ export default { 動作する様子を [デモ動画](https://www.youtube.com/watch?v=YOKnSTp7d38) で確認してみてください。 <!-- To understand how the layouts work with nuxt.js, take a look at the [layout documentation](/guide/views#layouts). --> -Nuxt.js でレイアウトがどのように動作するかをより深く理解するには [layout ドキュメント](/guide/views#layouts) を参照してください。 +Nuxt.js でレイアウトがどのように動作するかをより深く理解するには [layout ドキュメント](/guide/views#レイアウト) を参照してください。 diff --git a/ja/api/pages-middleware.md b/ja/api/pages-middleware.md index 693cbf03a..088e5a094 100644 --- a/ja/api/pages-middleware.md +++ b/ja/api/pages-middleware.md @@ -72,4 +72,4 @@ export default function ({ store, redirect }) { <!-- To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). --> -ミドルウェアについてより深く理解するには [ミドルウェアのガイド](/guide/routing#middleware) を参照してください。 +ミドルウェアについてより深く理解するには [ミドルウェアのガイド](/guide/routing#ミドルウェア) を参照してください。 diff --git a/ja/examples/custom-routes.md b/ja/examples/custom-routes.md index e7e53c4bc..21fd68e1b 100644 --- a/ja/examples/custom-routes.md +++ b/ja/examples/custom-routes.md @@ -3,7 +3,7 @@ title: カスタムルーティング description: カスタムルーティングを行う例 github: custom-routes livedemo: https://custom-routes.nuxtjs.org -documentation: /guide/routing#dynamic-routes +documentation: /guide/routing#動的なルーティング --- <!-- title: Custom Routes --> diff --git a/ja/faq/duplicated-meta-tags.md b/ja/faq/duplicated-meta-tags.md index 460666a66..cf4767a61 100644 --- a/ja/faq/duplicated-meta-tags.md +++ b/ja/faq/duplicated-meta-tags.md @@ -10,9 +10,9 @@ description: メタタグが重複したときは？ # メタタグが重複したときは？ -<!-- 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). --> +<!-- This is a "feature" of [vue-meta](https://github.com/declandewet/vue-meta), please take a look at the [documentation of head elements](/guide/views#html-head). --> -これは [vue-meta](https://github.com/declandewet/vue-meta) の "特徴" です。[head 要素のドキュメント](https://nuxtjs.org/guide/html-head#defaults-meta) を参照してください。 +これは [vue-meta](https://github.com/declandewet/vue-meta) の "特徴" です。[head 要素のドキュメント](/guide/views#html-の-head-情報) を参照してください。 <!-- \> 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. --> @@ -56,6 +56,6 @@ export default { } ``` -<!-- To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views/#html-head). --> +<!-- To learn how to use the `head` property in your pages, please see the [HTML head documentation](/guide/views#html-head). --> -ページ内の `head` プロパティの使い方をより深く理解するには [HTML の head 情報のドキュメント](/guide/views/#html-head) を参照してください。 +ページ内の `head` プロパティの使い方をより深く理解するには [HTML の head 情報のドキュメント](/guide/views#html-の-head-情報) を参照してください。 diff --git a/ja/faq/surge-deployment.md b/ja/faq/surge-deployment.md index 51b13ce6e..84c2c3001 100644 --- a/ja/faq/surge-deployment.md +++ b/ja/faq/surge-deployment.md @@ -48,7 +48,7 @@ surge dist/ <!-- 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. --> -プロジェクトが [動的なルーティング](/guide/routing#dynamic-routes) をしている場合は、動的なルーティングをどのように生成するかを Nuxt.js に伝えるために [生成の設定](/api/configuration-generate) を参照してください。 +プロジェクトが [動的なルーティング](/guide/routing#動的なルーティング) をしている場合は、動的なルーティングをどのように生成するかを Nuxt.js に伝えるために [生成の設定](/api/configuration-generate) を参照してください。 <!-- <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/window-document-undefined.md b/ja/faq/window-document-undefined.md index 5b0df1896..6d3511907 100644 --- a/ja/faq/window-document-undefined.md +++ b/ja/faq/window-document-undefined.md @@ -30,7 +30,7 @@ if (process.BROWSER_BUILD) { <!-- Don't forget to add your library in the [vendor bundle](/api/configuration-build#build-vendor) in your `nuxt.config.js`: --> -`nuxt.config.js` ファイル内で当該ライブラリを [vendor bundle](/api/configuration-build#build-vendor) に加えておくのを忘れないでください。 +`nuxt.config.js` ファイル内で当該ライブラリを [vendor バンドル](/api/configuration-build#vendor) に加えておくのを忘れないでください。 ```js build: { diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md index eb375ce02..0a5b2cd25 100644 --- a/ja/guide/async-data.md +++ b/ja/guide/async-data.md @@ -16,7 +16,7 @@ description: Nuxt.js はコンポーネントのデータをセットする前 <!-- `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. --> -`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [context](/api#context) を受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 +`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [context](/api#コンテキスト) を受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 <!-- <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> --> @@ -189,4 +189,4 @@ export default { <!-- To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). --> -エラーページをカスタマイズするには [ビューのレイアウトセクション](/guide/views#layouts) を参照してください。 +エラーページをカスタマイズするには [ビューのレイアウトセクション](/guide/views#レイアウト) を参照してください。 diff --git a/ja/guide/commands.md b/ja/guide/commands.md index c822544ce..450b16113 100644 --- a/ja/guide/commands.md +++ b/ja/guide/commands.md @@ -130,7 +130,7 @@ npm run generate <!-- 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. --> -プロジェクトで [動的なルーティング](/guide/routing#dynamic-routes) を使っている場合は、Nuxt.js に動的なルーティングを生成させるために [generate 設定](/api/configuration-generate) に目を通してください。 +プロジェクトで [動的なルーティング](/guide/routing#動的なルーティング) を使っている場合は、Nuxt.js に動的なルーティングを生成させるために [generate 設定](/api/configuration-generate) に目を通してください。 <!-- <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/directory-structure.md b/ja/guide/directory-structure.md index 66547616b..32d7e5504 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -48,7 +48,7 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Layouts integration](/guide/views#layouts) --> -レイアウトの取り扱いついてより深く理解するには [レイアウトに関するドキュメント](/guide/views#layouts) を参照してください。 +レイアウトの取り扱いついてより深く理解するには [レイアウトに関するドキュメント](/guide/views#レイアウト) を参照してください。 <!-- ### The Middleware Directory --> @@ -102,7 +102,7 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Static integration](/guide/assets#static) --> -静的なファイルの取り扱いについてより深く理解するには [静的なファイルに関するドキュメント](/guide/assets#static) を参照してください。 +静的なファイルの取り扱いについてより深く理解するには [静的なファイルに関するドキュメント](/guide/assets#webpack-で扱わない静的ファイル) を参照してください。 <!-- ### The Store Directory --> diff --git a/ja/guide/routing.md b/ja/guide/routing.md index 4c20eb160..834dafd87 100644 --- a/ja/guide/routing.md +++ b/ja/guide/routing.md @@ -365,9 +365,9 @@ export default { **ミドルウェアは `middleware/` ディレクトリに入れます。** ファイル名はミドルウェアの名前となります（`middleware/auth.js` は `auth` ミドルウェアになります） -<!-- A middleware receive [the context](/api#the-context) as first argument: --> +<!-- A middleware receive [the context](/api#context) as first argument: --> -ミドルウェアは第一引数として [context](/api#the-context) を受け取ります: +ミドルウェアは第一引数として [context](/api#コンテキスト) を受け取ります: ```js export default function (context) { diff --git a/ja/guide/views.md b/ja/guide/views.md index 077c8e8d8..eff46d818 100644 --- a/ja/guide/views.md +++ b/ja/guide/views.md @@ -94,9 +94,9 @@ export default { | head | 現在のページの特定のメタタグを設定します。[ページの head API](/api/pages-head) を参照してください | | layout | `layouts` ディレクトリ内のレイアウトを指定します。[ページのレイアウト API に関するドキュメント](/api/pages-layout) を参照してください | | transition | ページに特定のトランジションを設定します。[ページのトランジション API に関するドキュメント](/api/pages-transition) を参照してください | -| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストされたルート](/guide/routing#nested-routes) で使われます | -| validate | [動的なルーティング](/guide/routing#dynamic-routes) のためのバリデーション関数です | -| middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#middleware) を参照してください | +| scrollToTop | ブーリアンで指定し、デフォルトは `false` です。ページをレンダリングする前にトップまでスクロールさせるか否かを指定します。これは [ネストされたルート](/guide/routing#ネストされたルート) で使われます | +| validate | [動的なルーティング](/guide/routing#動的なルーティング) のためのバリデーション関数です | +| middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#ミドルウェア) を参照してください | <!-- More information about the pages properties usage: [API Pages](/api) --> From 0688af117e836910e685178f8330fe09d571bcd7 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Sun, 12 Mar 2017 01:43:20 +0900 Subject: [PATCH 125/129] Improve translation in ja --- ja/api/index.md | 2 +- ja/api/pages-fetch.md | 2 +- ja/guide/assets.md | 4 ++-- ja/guide/async-data.md | 2 +- ja/guide/commands.md | 8 ++++---- ja/guide/directory-structure.md | 4 ++-- ja/guide/index.md | 4 ++-- ja/guide/routing.md | 2 +- ja/guide/vuex-store.md | 6 +++--- ja/lang.json | 2 +- 10 files changed, 18 insertions(+), 18 deletions(-) diff --git a/ja/api/index.md b/ja/api/index.md index 435e61012..49323f946 100644 --- a/ja/api/index.md +++ b/ja/api/index.md @@ -20,7 +20,7 @@ description: Nuxt.js は Vue.js の data メソッドに手を加えて、コン <!-- `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. --> -`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。このメソッドは第一引数として **context** を受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 +`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。このメソッドは第一引数として **コンテキスト** を受け取り、コンテキストを使ってデータを取得してコンポーネントのデータを返すことができます。 ```js export default { diff --git a/ja/api/pages-fetch.md b/ja/api/pages-fetch.md index aa392071b..228c80806 100644 --- a/ja/api/pages-fetch.md +++ b/ja/api/pages-fetch.md @@ -24,7 +24,7 @@ description: fetch メソッドは、ページがレンダリングされる前 <!-- 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. --> -`fetch` メソッドは第一引数として [context](/api#コンテキスト) を受け取り、context を使ってデータを取得してデータをストアに入れることができます。fetch メソッドを非同期にするためには **Promise を返すようにしてください**。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 +`fetch` メソッドは第一引数として [コンテキスト](/api#コンテキスト) を受け取り、コンテキストを使ってデータを取得してデータをストアに入れることができます。fetch メソッドを非同期にするためには **Promise を返すようにしてください**。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 <!-- Example of `pages/index.vue`: --> diff --git a/ja/guide/assets.md b/ja/guide/assets.md index 029c070f4..a2579a784 100644 --- a/ja/guide/assets.md +++ b/ja/guide/assets.md @@ -122,7 +122,7 @@ file-loader と url-loader の役割: <!-- 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. --> -もし Webpack で扱う対象となる `assets` ディレクトリを使いたくない場合は、プロジェクトのルートディレクトリに `static` ディレクトリを作成して利用することができます。 +Webpack で扱う対象となる `assets` ディレクトリを使いたくない場合は、プロジェクトのルートディレクトリに `static` ディレクトリを作成して利用することができます。 <!-- These files will be automatically serve by Nuxt and accessible in your project root URL. --> @@ -130,7 +130,7 @@ file-loader と url-loader の役割: <!-- This option is helpful for files like `robots.txt` or `sitemap.xml`. --> -このオプションは `robots.txt` や `sitemap.xml` などのファイルに役に立ちます。 +このオプションは `robots.txt` や `sitemap.xml` などのファイルの扱いに役立ちます。 <!-- From your code you can then reference those files with `/` URLs: --> diff --git a/ja/guide/async-data.md b/ja/guide/async-data.md index 0a5b2cd25..8f841be3e 100644 --- a/ja/guide/async-data.md +++ b/ja/guide/async-data.md @@ -16,7 +16,7 @@ description: Nuxt.js はコンポーネントのデータをセットする前 <!-- `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. --> -`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [context](/api#コンテキスト) を受け取り、context を使ってデータを取得してコンポーネントのデータを返すことができます。 +`data` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [コンテキスト](/api#コンテキスト) を受け取り、コンテキストを使ってデータを取得してコンポーネントのデータを返すことができます。 <!-- <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> --> diff --git a/ja/guide/commands.md b/ja/guide/commands.md index 450b16113..34586bf28 100644 --- a/ja/guide/commands.md +++ b/ja/guide/commands.md @@ -71,7 +71,7 @@ npm run dev <!-- Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. --> -Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます: サーバーサイドレンダリングするモードと静的なファイルを生成するモードです。 +Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます: サーバーサイドレンダリングするモードと静的ファイルを生成するモードです。 <!-- ### Server Rendered Deployment --> @@ -114,11 +114,11 @@ nuxt start <!-- Nuxt.js gives you the possibility to host your web application on any static hosting. --> -Nuxt.js を使うと、どんな静的なファイルのホスティングサービスでも、ウェブアプリケーションをホストすることができます。 +Nuxt.js を使うと、静的ファイルのホスティングサービスでも、ウェブアプリケーションをホストすることができます。 <!-- To generate our web application into static files: --> -アプリケーションから静的なファイルを生成するには: +アプリケーションから静的ファイルを生成するには: ```bash npm run generate @@ -126,7 +126,7 @@ npm run generate <!-- It will create a `dist` folder with everything inside ready to be deployed on a static hosting. --> -`dist` フォルダが作成され、その中に静的なファイルのホスティングサービスにデプロイされるべきものがすべて入ります。 +`dist` フォルダが作成され、その中に静的ファイルのホスティングサービスにデプロイされるべきものがすべて入ります。 <!-- 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. --> diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md index 32d7e5504..8bec81c8a 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -90,7 +90,7 @@ _このディレクトリ名は変更できません。_ <!-- The `static` directory contains your static files. Each files inside this directory is mapped to /. --> -`static` ディレクトリには静的なファイルを入れます。このディレクトリ内のファイルはいずれも `/` に配置されます。 +`static` ディレクトリには静的ファイルを入れます。このディレクトリ内のファイルはいずれも `/` に配置されます。 <!-- **Example:** /static/robots.txt is mapped as /robots.txt --> @@ -102,7 +102,7 @@ _このディレクトリ名は変更できません。_ <!-- [More documentation about Static integration](/guide/assets#static) --> -静的なファイルの取り扱いについてより深く理解するには [静的なファイルに関するドキュメント](/guide/assets#webpack-で扱わない静的ファイル) を参照してください。 +静的ファイルの取り扱いについてより深く理解するには [静的ファイルに関するドキュメント](/guide/assets#webpack-で扱わない静的ファイル) を参照してください。 <!-- ### The Store Directory --> diff --git a/ja/guide/index.md b/ja/guide/index.md index 655ba160a..3cda029ab 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -81,7 +81,7 @@ Nuxt.js はリッチなウェブアプリケーションを構築するために - コードを自動的に分割すること - サーバーサイドレンダリング - 非同期データをハンドリングするパワフルなルーティング -- 静的なファイルの配信 +- 静的ファイルの配信 - ES6/ES7 のトランスパイレーション - JS と CSS のバンドル及びミニファイ - Head 要素の管理 @@ -153,7 +153,7 @@ Nuxt.js による大きなイノベーションがやってきました。それ <!-- 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: --> diff --git a/ja/guide/routing.md b/ja/guide/routing.md index 834dafd87..a4b94c548 100644 --- a/ja/guide/routing.md +++ b/ja/guide/routing.md @@ -367,7 +367,7 @@ export default { <!-- A middleware receive [the context](/api#context) as first argument: --> -ミドルウェアは第一引数として [context](/api#コンテキスト) を受け取ります: +ミドルウェアは第一引数として [コンテキスト](/api#コンテキスト) を受け取ります: ```js export default function (context) { diff --git a/ja/guide/vuex-store.md b/ja/guide/vuex-store.md index 7bfb67bcf..61c083edc 100644 --- a/ja/guide/vuex-store.md +++ b/ja/guide/vuex-store.md @@ -85,7 +85,7 @@ export default store <!-- If you want this option, export the state, mutations and actions in `store/index.js` instead of a store instance: --> -このオプションを使いたいときは、ストアインスタンスの代わりに、`store/index.js` 内のストア、ミューテーション、アクションをエクスポートします: +このオプションを使いたいときは、ストアインスタンスの代わりに、`store/index.js` 内でストア、ミューテーション、アクションをエクスポートします: ```js export const state = { @@ -223,7 +223,7 @@ fetch メソッドについてより深く理解するためには [ページの <!-- 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. --> -`nuxtServerInit` というアクションがストア内に定義されているときは、Nuxt.js はそれを context とともに呼び出します（ただしサーバーサイドに限ります）。サーバー上に、クライアントサイドに直接渡したいデータがあるときに便利です。 +`nuxtServerInit` というアクションがストア内に定義されているときは、Nuxt.js はそれをコンテキストとともに呼び出します（ただしサーバーサイドに限ります）。サーバーサイドからクライアントサイドに直接渡したいデータがあるときに便利です。 <!-- 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: --> @@ -245,4 +245,4 @@ actions: { <!-- 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. --> -context は `nuxtServerInit` へ第二引数として渡されます。`context.redirect()` や `context.error()` が除外される点を除いては `data` メソッドや `fetch` メソッドと共通しています。 +コンテキストは `nuxtServerInit` へ第二引数として渡されます。`context.redirect()` や `context.error()` が除外される点を除いては `data` メソッドや `fetch` メソッドと共通しています。 diff --git a/ja/lang.json b/ja/lang.json index 140261cae..b0df19861 100644 --- a/ja/lang.json +++ b/ja/lang.json @@ -33,7 +33,7 @@ "title": "ユニバーサル Vue.js アプリケーション", "meta": { "title": "Nuxt.js - ユニバーサル Vue.js アプリケーション", - "description": "Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的なファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです！" + "description": "Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的ファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです！" } }, "footer": { From 0fca9f7cb955bae4ca34654f3bbcef2e56c38467 Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Mar 2017 00:17:53 +0900 Subject: [PATCH 126/129] Improve translation in ja/guide --- ja/guide/assets.md | 4 ++-- ja/guide/commands.md | 6 +++--- ja/guide/configuration.md | 6 ++---- ja/guide/contribution-guide.md | 2 +- ja/guide/directory-structure.md | 6 +++--- ja/guide/index.md | 2 +- ja/guide/installation.md | 2 +- ja/guide/plugins.md | 2 +- ja/guide/vuex-store.md | 6 +++--- 9 files changed, 17 insertions(+), 19 deletions(-) diff --git a/ja/guide/assets.md b/ja/guide/assets.md index a2579a784..800c2c6a5 100644 --- a/ja/guide/assets.md +++ b/ja/guide/assets.md @@ -16,11 +16,11 @@ description: Nuxt.js はアセットファイルを配信するために（デ <!-- 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. --> -デフォルトでは [vue-loader](http://vue-loader.vuejs.org/en/) は `css-loader` 及び Vue テンプレートコンパイラを用いて、スタイルやテンプレートファイルを処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などのすべての URL はモジュールの依存関係のように解決されます。 +デフォルトでは [vue-loader](http://vue-loader.vuejs.org/en/) は `css-loader` 及び `vue-template-compiler` を用いて、スタイルやテンプレートファイルを処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などのすべての URL はモジュールの依存関係のように解決されます。 <!-- For example, we have this file tree: --> -例えば、このようなファイルがあるとします: +例えば、次のようなファイルがあるとします: ```bash -| assets/ diff --git a/ja/guide/commands.md b/ja/guide/commands.md index 34586bf28..87529ae6e 100644 --- a/ja/guide/commands.md +++ b/ja/guide/commands.md @@ -1,6 +1,6 @@ --- title: コマンド -description: Nuxt.js は便利コマンドのセットを備えています。開発用途のものもプロダクション用途のものも含まれています。 +description: Nuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。 --- <!-- title: Commands --> @@ -8,7 +8,7 @@ description: Nuxt.js は便利コマンドのセットを備えています。 <!-- \> Nuxt.js comes with a set of useful commands, both for development and production purpose. --> -> Nuxt.js は便利コマンドのセットを備えています。開発用途のものもプロダクション用途のものも含まれています。 +> Nuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。 <!-- ## List of Commands --> @@ -71,7 +71,7 @@ npm run dev <!-- Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. --> -Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます: サーバーサイドレンダリングするモードと静的ファイルを生成するモードです。 +Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます。サーバーサイドレンダリングするモードと、静的ファイルを生成するモードです。 <!-- ### Server Rendered Deployment --> diff --git a/ja/guide/configuration.md b/ja/guide/configuration.md index 6a2aee2be..d42b852af 100644 --- a/ja/guide/configuration.md +++ b/ja/guide/configuration.md @@ -64,9 +64,7 @@ description: Nuxt.js ではデフォルトの設定でほとんどのユース <!-- This option lets you to define each params value for every dynamic routes in your application that Nuxt.js transforms into HTML files. --> -このオプションで、Nuxt.js が HTML ファイルに変換するアプリケーション内の動的なルーティングのためのパラメータを指定できます。（訳に自信なし。原文は This option lets you to define each params value for every dynamic routes in your application that Nuxt.js transforms into HTML files.） - -このオプションで、アプリケーション内の動的なルーティングごとにパラメータを指定できます。Nuxt.js はそれらのパラメータを変換して HTML ファイルに入れます。 +このオプションは、動的なルーティングをしているアプリケーションを HTML ファイルに変換するときに使います。動的なルーティングに用いるパラメータを指定できます。 <!-- [Documentation about generate integration](/api/configuration-generate) --> @@ -96,7 +94,7 @@ description: Nuxt.js ではデフォルトの設定でほとんどのユース <!-- This option lets you to define Javascript plugins to be ran before instantiating the root vue.js application. --> -このオプションで、ルートの vue.js アプリケーションをインスタンス化する前に実行したい Javascript plugin を指定できます。 +このオプションで、ルートの vue.js アプリケーションをインスタンス化する前に実行したい JavaScript plugin を指定できます。 <!-- [Documentation about plugins integration](/api/configuration-plugins) --> diff --git a/ja/guide/contribution-guide.md b/ja/guide/contribution-guide.md index 76a69f0f1..8c9c8faf3 100644 --- a/ja/guide/contribution-guide.md +++ b/ja/guide/contribution-guide.md @@ -24,7 +24,7 @@ Nuxt.js への貢献はどんなものでも大歓迎です！ <!-- 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. --> -たとえそれが単にタイプミスの修正であっても、ぜひプルリクエストを送ってください。どんな重要な改善であっても、誰かが手を動かし始める前に [GitHub issue](https://github.com/nuxt/nuxt.js/issues) に記載してください。 +たとえそれが単にタイプミスの修正であっても、ぜひプルリクエストを送ってください。一方で、どんな重要な改善であっても、誰かが手を動かし始める前に [GitHub issue](https://github.com/nuxt/nuxt.js/issues) に記載してください。 <!-- ### Convention --> diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md index 8bec81c8a..c6a3501c4 100644 --- a/ja/guide/directory-structure.md +++ b/ja/guide/directory-structure.md @@ -32,7 +32,7 @@ description: デフォルトの Nuxt.js アプリケーションの構造は、 <!-- The `components` directory contains your Vue.js Components. Nuxt.js doesn't supercharge the data method on these components. --> -`components` ディレクトリには Vue.js のコンポーネントファイルを入れます。Nuxt.js は `components` ディレクトリ内のコンポーネントの data メソッドについては手を加えません。 +`components` ディレクトリには Vue.js のコンポーネントファイルを入れます。Nuxt.js は `components` ディレクトリ内のコンポーネントの data メソッドについては手を加えません（訳注: 一方、Nuxt.js は `pages` ディレクトリ内のコンポーネントの data メソッドには非同期データを扱えるよう手を加えます） <!-- ### The Layouts Directory --> @@ -62,7 +62,7 @@ _Coming soon_ <!-- 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. --> -`pages` ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内のすべての `.vue` ファイルを読み込み、アプリケーションのルーターを作成します。 +`pages` ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内のすべての `*.vue` ファイルを読み込み、アプリケーションのルーターを作成します。 <!-- _This directory can not be renamed._ --> @@ -78,7 +78,7 @@ _このディレクトリ名は変更できません。_ <!-- The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. --> -`plugins` ディレクトリには、ルートの vue.js アプリケーションをインスタンス化する前に実行したい Javascript プラグインを入れます。 +`plugins` ディレクトリには、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを入れます。 <!-- [More documentation about Plugins integration](/guide/plugins) --> diff --git a/ja/guide/index.md b/ja/guide/index.md index 3cda029ab..b4dd94165 100644 --- a/ja/guide/index.md +++ b/ja/guide/index.md @@ -16,7 +16,7 @@ description: "2016年10月25日 zeit.co のチームが React アプリケーシ <!-- Nuxt.js is a framework for creating Universal Vue.js Applications. --> -Next.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。 +Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。 <!-- Its main scope is **UI rendering** while abstracting away the client/server distribution. --> diff --git a/ja/guide/installation.md b/ja/guide/installation.md index 4a6301f6a..b13037097 100644 --- a/ja/guide/installation.md +++ b/ja/guide/installation.md @@ -103,7 +103,7 @@ $ cd <project-name> <!-- Once the `package.json` has been created, add `nuxt` to the project via NPM: --> -`package.json` を作成した後すぐ `nuxt` を NPM 経由でプロジェクト追加しましょう: +`package.json` を作成したら `nuxt` を npm でプロジェクトに追加しましょう: ```bash npm install --save nuxt diff --git a/ja/guide/plugins.md b/ja/guide/plugins.md index 424d7a42f..d0202a1fa 100644 --- a/ja/guide/plugins.md +++ b/ja/guide/plugins.md @@ -24,7 +24,7 @@ description: Nuxt.js では js プラグインを定義することができ、 <!-- We install it via NPM: --> -外部パッケージは NPM 経由でインストールします: +外部パッケージは npm でインストールします: ```bash npm install --save axios diff --git a/ja/guide/vuex-store.md b/ja/guide/vuex-store.md index 61c083edc..35b5ffa13 100644 --- a/ja/guide/vuex-store.md +++ b/ja/guide/vuex-store.md @@ -34,7 +34,7 @@ Nuxt.js では **2つのモードのストア** があります。どちらか <!-- - **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) --> - **クラシックモード:** `store/index.js` がストアインスタンスを返します -- **モジュールモード:** `store` ディレクトリ内のすべての `.js` ファイルが [モジュール](http://vuex.vuejs.org/en/modules.html) に変換されます（`index` はルートモジュールとして存在します） +- **モジュールモード:** `store` ディレクトリ内のすべての `*.js` ファイルが [モジュール](http://vuex.vuejs.org/en/modules.html) に変換されます（`index` はルートモジュールとして存在します） <!-- ## Classic mode --> @@ -63,7 +63,7 @@ export default store <!-- \> We don't need to install `vuex` since it's shipped with nuxt.js --> -> `vuex` は Nuxt.js によって取り込まれているため、別途インストールする必要はありません +> `vuex` は Nuxt.js によって取り込まれているため、別途インストールする必要はありません。 <!-- We can now use `this.$store` inside our components: --> @@ -241,7 +241,7 @@ actions: { <!-- \> 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. --> -> もし Vuex ストアの _モジュール_ モードを使っているなら、（`store/index.js` 内の）プライマリモードのみ、このアクションを受け取ることができます。そこからモジュールのアクションをつなぐ必要があります。（訳注: 訳に自信なし。原文は 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.） +> Vuex ストアの _モジュール_ モードを使っている場合はなら、プライマリモジュール（`store/index.js`）のみ、このアクションを受け取ることができます。その他のモジュールのアクションでも使いたい場合は、プライマリモジュールからチェインする必要があります。 <!-- 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. --> From 677f57717eccec11f821930ac8cc78990a06be2e Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Mar 2017 00:39:01 +0900 Subject: [PATCH 127/129] Improve translation in ja/api --- ja/api/components-nuxt-link.md | 2 +- ja/api/configuration-generate.md | 4 +++- ja/api/index.md | 4 ++-- ja/api/nuxt.md | 3 ++- ja/api/pages-fetch.md | 6 +++--- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/ja/api/components-nuxt-link.md b/ja/api/components-nuxt-link.md index 5373931bc..e97961a3f 100644 --- a/ja/api/components-nuxt-link.md +++ b/ja/api/components-nuxt-link.md @@ -8,7 +8,7 @@ description: ページ間を nuxt-link を使ってリンクさせます。 <!-- # The <nuxt-link> Component --> -# The <nuxt-link> コンポーネント +# <nuxt-link> コンポーネント <!-- \> This component is used to link the page components between them. --> diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md index 4b4590e52..6cb59d411 100644 --- a/ja/api/configuration-generate.md +++ b/ja/api/configuration-generate.md @@ -143,7 +143,9 @@ module.exports = { } ``` -## コールバックと一緒に関数を使う +<!-- ## Function with a callback --> + +### コールバックと一緒に関数を使う `nuxt.config.js` diff --git a/ja/api/index.md b/ja/api/index.md index 49323f946..22c9580e5 100644 --- a/ja/api/index.md +++ b/ja/api/index.md @@ -62,8 +62,8 @@ export default { | `isClient` | ブーリアン | クライアント＆サーバー | クライアントサイドでレンダリングしているか否か | | `isServer` | ブーリアン | クライアント＆サーバー | サーバーサイドでレンダリングしているか否か | | `isDev` | ブーリアン | クライアント＆サーバー | 開発モードか否か。このキーはプロダクションモードでデータをキャッシュさせるときに役立ちます | -| `route` | [vue-router のルート](https://router.vuejs.org/en/api/route-object.html) | Client & Server | `vue-router` のルートインスタンス | -| `store` | [Vuex ストア](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | `Vuex` のストアインスタンス。**[Vuex ストア](/guide/vuex-store) が設定されている場合のみ利用できます** | +| `route` | [vue-router のルート](https://router.vuejs.org/en/api/route-object.html) | クライアント＆サーバー | `vue-router` のルートインスタンス | +| `store` | [Vuex ストア](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | クライアント＆サーバー | `Vuex` のストアインスタンス。**[Vuex ストア](/guide/vuex-store) が設定されている場合のみ利用できます** | | `env` | オブジェクト | クライアント＆サーバー | `nuxt.config.js` でセットされた環境変数。詳細は [env API](/api/configuration-env) を参照してください | | `params` | オブジェクト | クライアント＆サーバー | route.params のエイリアス | | `query` | オブジェクト | クライアント＆サーバー | route.query のエイリアス | diff --git a/ja/api/nuxt.md b/ja/api/nuxt.md index 3840b021e..0eee66359 100644 --- a/ja/api/nuxt.md +++ b/ja/api/nuxt.md @@ -15,7 +15,8 @@ description: Nuxt.js はプログラム上で、ミドルウェアとして使 ミドルウェアや API と合わせて独自サーバーを使いたいときがあるかもしれません。そのため、Nuxt.js はプログラムで使うことができるようにしています。 <!-- 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. --> -Nuxt.js はコードをより楽しいものし、より読みやすくする ES2015 以上でビルドされます。トランスパイラを利用せず、また V8 エンジンで実装された機能に依存しません。このような理由から Nuxt.js は Node.js `4.0` 以上をターゲットにしています。 + +Nuxt.js は ES2015 以上でビルドされます。ES2015 はコーディングをより楽しいものし、より読みやすくしてくれますよね。また、Nuxt.js はトランスパイラを利用せず、また V8 エンジンで実装された機能に依存しません。このような理由から Nuxt.js は Node.js `4.0` 以上をターゲットにしています。 <!-- You can require Nuxt.js like this: --> diff --git a/ja/api/pages-fetch.md b/ja/api/pages-fetch.md index 228c80806..74c26bb69 100644 --- a/ja/api/pages-fetch.md +++ b/ja/api/pages-fetch.md @@ -39,9 +39,9 @@ description: fetch メソッドは、ページがレンダリングされる前 export default { fetch ({ store, params }) { return axios.get('http://my-api/stars') - .then((res) => { - store.commit('setStars', res.data) - }) + .then((res) => { + store.commit('setStars', res.data) + }) } } </script> From bef2c98566967731413ab1d031cd7ff0704c813f Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Mar 2017 00:44:00 +0900 Subject: [PATCH 128/129] Improve translation in ja/examples --- ja/examples/menu.json | 2 +- ja/lang.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ja/examples/menu.json b/ja/examples/menu.json index 497c2991d..c3472a19d 100644 --- a/ja/examples/menu.json +++ b/ja/examples/menu.json @@ -10,7 +10,7 @@ "title": "カスタマイズ", "links": [ { "name": "コンポーネントのキャッシュ", "to": "/cached-components" }, - { "name": "カスタムローディングCustom Loading", "to": "/custom-loading" }, + { "name": "カスタムローディング", "to": "/custom-loading" }, { "name": "カスタムルーティング", "to": "/custom-routes" }, { "name": "グローバル CSS", "to": "/global-css" }, { "name": "レイアウト", "to": "/layouts" }, diff --git a/ja/lang.json b/ja/lang.json index b0df19861..f722a3d46 100644 --- a/ja/lang.json +++ b/ja/lang.json @@ -14,7 +14,7 @@ "guide": "ガイド", "homepage": "ホーム", "live_demo": "ライブデモ", - "live_edit": "ライブエディット", + "live_edit": "ライブ編集", "twitter": "Twitter", "vuejs": "Vue.js", "vue_jobs": "Vue Jobs" From 9c0150aebe00b58c544f8dd9fe8841582dcbfd0c Mon Sep 17 00:00:00 2001 From: INOUE Takuya <inouetakuya5@gmail.com> Date: Mon, 20 Mar 2017 00:54:36 +0900 Subject: [PATCH 129/129] Improve translation in ja/faq --- ja/faq/async-data-components.md | 4 ++-- ja/faq/css-flash.md | 4 ++-- ja/faq/pre-processors.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ja/faq/async-data-components.md b/ja/faq/async-data-components.md index b4547be64..ebcef579d 100644 --- a/ja/faq/async-data-components.md +++ b/ja/faq/async-data-components.md @@ -12,11 +12,11 @@ description: コンポーネント内で非同期データを扱うには？ <!-- 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. --> -コンポーネントはルートに関連付けられていないため（訳注: 基本的には）非同期データを扱うことはできません。Nuxt.js ではルートに関連付けられたコンポーネントの data() メソッドに手を加えて非同期データを扱えるようにしています。 +コンポーネントはルートに関連付けられていないため（訳注: 基本的には）非同期データを扱うことはできません。Nuxt.js ではルートに関連付けられたコンポーネント（訳注: pages ディレクトリ内のコンポーネントのこと）の data() メソッドに手を加えて非同期データを扱えるようにしています。 <!-- For sub components, there are 2 ways of achieving it: --> -しかしながら、サブコンポーネントでも非同期データを扱えるようにする方法が 2つあります: +しかしながら、サブコンポーネント（訳注: components ディレクトリ内のコンポーネントのこと）でも非同期データを扱えるようにする方法が 2つあります: <!-- 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 --> diff --git a/ja/faq/css-flash.md b/ja/faq/css-flash.md index cdcb7d411..583bf6b8d 100644 --- a/ja/faq/css-flash.md +++ b/ja/faq/css-flash.md @@ -16,6 +16,6 @@ description: なぜ CSS Flash が見えるのか？ これが見えるのは Webpack をとおしてホットリローディングする **開発モード** でビルドした JavaScript の中に CSS が埋め込まれているためです。 -Don't worry in production mode, the CSS is separated and put in the header so this "flash" does not appear anymore. +<!-- Don't worry in production mode, the CSS is separated and put in the header so this "flash" does not appear anymore. --> -心配しないてください。プロダクションモードでは CSS は分離されて head に置かれるため、このような "flash" は見えません。 +大丈夫です。プロダクションモードでは CSS は分離されて head に置かれるため、このような "flash" は見えません。 diff --git a/ja/faq/pre-processors.md b/ja/faq/pre-processors.md index f0aa7caa7..d34bd9297 100644 --- a/ja/faq/pre-processors.md +++ b/ja/faq/pre-processors.md @@ -12,7 +12,7 @@ description: Nuxt.js でプリプロセッサを使うには？ <!-- 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. --> -[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html) のおかげで、ただ `lang` 属性を使うだけで `<template>` や `<script>` あるいは `<style>` などのためのどんな種類のプリプロセッサも使うことができます。 +[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html) のおかげで、ただ `lang` 属性を使うだけで `<template>` や `<script>` あるいは `<style>` などのためのプリプロセッサを使うことができます。 <!-- Example of our `pages/index.vue` using [Pug](https://github.com/pugjs/pug), [CoffeeScript](http://coffeescript.org) and [Sass](http://sass-lang.com/): -->