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/): -->