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. diff --git a/ja/api/components-nuxt-child.md b/ja/api/components-nuxt-child.md new file mode 100644 index 000000000..7aeab77ad --- /dev/null +++ b/ja/api/components-nuxt-child.md @@ -0,0 +1,64 @@ +--- +title: "API: コンポーネント" +description: 現在のページを表示します。 +--- + + + + + + +# <nuxt-child> コンポーネント + + + +> このコンポーネントは [ネストされたルート](/guide/routing#ネストされたルート) 内で子コンポーネントを表示するために使われます。 + + + +例: + +```bash +-| pages/ +---| parent/ +------| child.vue +---| parent.vue +``` + + + +このファイルの木構造から次のルーティングが生成されます: + +```js +[ + { + path: '/parent', + component: '~pages/parent.vue', + name: 'parent', + children: [ + { + path: 'child', + component: '~pages/parent/child.vue', + name: 'parent-child' + } + ] + } +] +``` + + + +`child.vue` コンポーネントを表示するには `pages/parent.vue` 内に `` を挿入する必要があります: + +```html + +``` + + + +実際の例を見たいときは [ネストされたルートの例](/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..e97961a3f --- /dev/null +++ b/ja/api/components-nuxt-link.md @@ -0,0 +1,45 @@ +--- +title: "API: コンポーネント" +description: ページ間を nuxt-link を使ってリンクさせます。 +--- + + + + + + +# <nuxt-link> コンポーネント + + + +ページ間を nuxt-link を使ってリンクさせます。 + + + +現在のところ `` は [``](https://router.vuejs.org/en/api/router-link.html) と同じです。したがって、このコンポーネントの使い方を [vue-router のドキュメント](https://router.vuejs.org/en/api/router-link.html) で確認することをお勧めします。 + + + +例（`pages/index.vue`）: + + + + + + + + + + +```html + +``` + + + +将来においては、Nuxt.js アプリケーションの応答性を改善するためにバックグランドでプリフェッチするような機能を nuxt-link コンポーネントに追加する予定です。 diff --git a/ja/api/components-nuxt.md b/ja/api/components-nuxt.md new file mode 100644 index 000000000..70791440d --- /dev/null +++ b/ja/api/components-nuxt.md @@ -0,0 +1,33 @@ +--- +title: "API: コンポーネント" +description: レイアウト内でページコンポーネントを表示します。 +--- + + + + + + +# <nuxt> コンポーネント + + + +> このコンポーネントは [レイアウト](/guide/views#レイアウト) 内でのみ、ページコンポーネントを表示するために使われます。 + + + +例（`layouts/default.vue`）: + +```html + +``` + + + +実際の例を見たいときは [レイアウトの例](/examples/layouts) を参照してください。 diff --git a/ja/api/configuration-build.md b/ja/api/configuration-build.md new file mode 100644 index 000000000..27efec16e --- /dev/null +++ b/ja/api/configuration-build.md @@ -0,0 +1,368 @@ +--- +title: "API: build プロパティ" +description: Nuxt.js ではウェブアプリケーションを自由にビルドできるよう Webpack 設定をカスタマイズできます。 +--- + + + + + + +# build プロパティ + + + +> Nuxt.js ではウェブアプリケーションを自由にビルドできるよう Webpack 設定をカスタマイズできます。 + +## analyze + + + +> Nuxt.js では [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) を使ってバンドルファイルと最適化の仕方を視覚化できます。 + + + + +- タイプ: `ブーリアン` または `オブジェクト` +- デフォルト: `false` + + + +オブジェクトの場合は、利用できるプロパティは [こちら](https://github.com/th0r/webpack-bundle-analyzer#as-plugin) を参照してください。 + + + +例（`nuxt.config.js`）: + + + + + + + + + + + + + +```js +module.exports = { + build: { + analyze: true + // または + analyze: { + analyzerMode: 'static' + } + } +} +``` + + + +

**情報:** `nuxt build --analyzer` または `nuxt build -a` コマンドを使って、アプリケーションをビルドしてバンドルアナライザを [http://localhost:8888](http://localhost:8888) で起動できます。

+ +## babel + + + +- タイプ: `オブジェクト` + + + +> JS や Vue ファイルのために babel の設定をカスタマイズします。 + + + +デフォルト: + +```js +{ + plugins: [ + 'transform-async-to-generator', + 'transform-runtime' + ], + presets: [ + ['es2015', { modules: false }], + 'stage-2' + ] +} +``` + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + build: { + babel: { + presets: ['es2015', 'stage-0'] + } + } +} +``` + +## extend + + + +- タイプ: `関数` + + + +クライアント及びサーバーのバンドルについて Webpack の設定を手動で拡張します。 + + + +extend メソッドは一度はサーバーのバンドルのため、一度はクライアントのバンドルのため、つまり二度呼び出されます。メソッドの引数は次のとおり: + + + + +1. Webpack 設定オブジェクト +2. 次のキーを持つオブジェクト（すべてブーリアン）: `dev`, `isClient`, `isServer` + + + +例（`nuxt.config.js`）: + + + + + + + + + + + + + + +```js +module.exports = { + build: { + extend (config, { isClient }) { + // クライアントのバンドルの Webpack 設定のみを拡張する + if (isClient) { + config.devtool = 'eval-source-map' + } + } + } +} +``` + + + +デフォルトの Webpack の設定についてもう少し見てみたい場合は Nuxt.js の [webpack ディレクトリ](https://github.com/nuxt/nuxt.js/tree/master/lib/webpack) を参照してください。 + +## filenames + + + +- タイプ: `オブジェクト` + + + +> バンドルのファイル名をカスタマイズします。 + + + +デフォルト: + +```js +{ + css: 'style.css', + vendor: 'vendor.bundle.js', + app: 'nuxt.bundle.js' +} +``` + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + build: { + filenames: { + css: 'app.css', + vendor: 'vendor.js', + app: 'app.js' + } + } +} +``` + +## loaders + + + + +- タイプ: `配列` + - 要素: `オブジェクト` + + + +> Webpack のローダーをカスタマイズします。 + + + +デフォルト: + +```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]' + } + } +] +``` + + + +例（`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]' + } + } + ] + } +} +``` + + + +

loaders が `nuxt.config.js` で定義されているときは、デフォルトのローダー設定は上書きされます。

+ +## plugins + + + + +- タイプ: `配列` +- デフォルト: `[]` + + + +> Webpack のプラグインを追加します。 + + + +例（`nuxt.config.js`）: + +```js +const webpack = require('webpack') + +module.exports = { + build: { + plugins: [ + new webpack.DefinePlugin({ + 'process.VERSION': require('./package.json').version + }) + ] + } +} +``` + +## postcss + + + +- **タイプ:** `配列` + + + +> [postcss](https://github.com/postcss/postcss) オプションをカスタマイズします。 + + + +デフォルト: + +```js +[ + require('autoprefixer')({ + browsers: ['last 3 versions'] + }) +] +``` + + + +例（`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 では `vendor.bundle.js` ファイル内にモジュールを追加できます。このファイルは app バンドルファイルのサイズを小さくするために生成します。外部モジュール（例えば `axios` など）を使うときにとても便利です。 + + + + +- **タイプ:** `配列` + - **要素:** `文字列` + + + +vendor バンドルファイル内にモジュール/ファイルを追加するには、`nuxt.config.js` 内の `build.vendor` キーに追加します: + +```js +module.exports = { + build: { + vendor: ['axios'] + } +} +``` + + + +ファイルへのパスを指定することもできます。例えば自分で作成した独自ライブラリを使いたいときなどはファイルへのパスを指定します: + +```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..cdcdce5ee --- /dev/null +++ b/ja/api/configuration-cache.md @@ -0,0 +1,65 @@ +--- +title: "API: cache プロパティ" +description: Nuxt.js はレンダリングのパフォーマンス向上を目的としてコンポーネントをキャッシュするために lru-cache を使います。 +--- + + + + +# cache プロパティ + + + +> Nuxt.js はレンダリングのパフォーマンス向上を目的としてコンポーネントをキャッシュするために [lru-cache](https://github.com/isaacs/node-lru-cache) を使います。 + + + +## 使い方 + + + +- **タイプ:** `ブーリアン` または `オブジェクト`（デフォルト: `false`） + + + +オブジェクトの場合は [lru-cache オプション](https://github.com/isaacs/node-lru-cache#options) を参照してください。 + + + +`nuxt.config.js` 内で `cache` キーを使います: + + + + + + + + + + + + +```js +module.exports = { + cache: true + // または + cache: { + max: 1000, + maxAge: 900000 + } +} +``` + + + +`cache` に `true` がセットされた場合はデフォルトのキーが適用されます: + + + + + + +| キー | 必須か否か | タイプ | デフォルト | 説明 | +|------|------------|-----|---------|------------| +| `max` | 必須ではない | 整数 | 1000 | キャッシュするコンポーネントの最大数。1001個目のコンポーネントが追加されるときに、スペースを空けるために、最初にキャッシュされたコンポーネントがキャッシュから削除されます | +| `maxAge` | 必須ではない | 整数 | 900000 | キャッシュさせる最大時間をミリ秒で指定します。デフォルトは 15分間です | diff --git a/ja/api/configuration-css.md b/ja/api/configuration-css.md new file mode 100644 index 000000000..067254de0 --- /dev/null +++ b/ja/api/configuration-css.md @@ -0,0 +1,65 @@ +--- +title: "API: css プロパティ" +description: Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。 +--- + + + + + + +# css プロパティ + + + +> Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。 + + + + +- **タイプ:** `配列` + - **要素:** `文字列` または `オブジェクト` + + + +要素がオブジェクトのときは、プロパティは次のとおりです: + + + + +- src: `文字列`（ファイルのパス） +- lang: `文字列`（[プリプロセッサを使うには？](/faq/pre-processors)） + + + +`nuxt.config.js` 内で CSS リソースを追加するには: + + + + + + + + + + + + + + +```js +module.exports = { + css: [ + // node.js モジュールをロード + 'hover.css/css/hover-min.css', + // node.js モジュール。プリプロセッサを指定 + { src: 'bulma', lang: 'sass' }, + // プロジェクト内の CSS ファイル + '~assets/css/main.css' + ] +} +``` + + + +

**プロダクションでは**、すべての CSS はミニファイされ `styles.css` というファイルに抽出されます。そしてページの `` タグ内に `style.css` を読み込む link タグが追加されます。

diff --git a/ja/api/configuration-dev.md b/ja/api/configuration-dev.md new file mode 100644 index 000000000..0141fc316 --- /dev/null +++ b/ja/api/configuration-dev.md @@ -0,0 +1,111 @@ +--- +title: "API: dev プロパティ" +description: 開発モードかプロダクションモードかを指定します。 +--- + + + + + + +# dev プロパティ + + + + +- タイプ: `ブーリアン` +- デフォルト: `true` + + + +> Nuxt.js の開発モードなのかプロダクションモードなのかを指定します。 + + + +このプロパティは [nuxt コマンド](/guide/commands) によって上書きされます: + + + + +- `nuxt` コマンドを使うときは `dev` は強制的に `true` になります +- `nuxt build`、`nuxt start`、`nuxt generate` コマンドを使うときは `dev` は強制的に `false` になります + + + +このプロパティは [Nuxt.js をプログラムで使う](/api/nuxt) ときに合わせて使うと良いです: + + + +例: + +`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 + +// Nuxt.js をオプションを使ってインスタンス化する +let config = require('./nuxt.config.js') +const nuxt = new Nuxt(config) +app.use(nuxt.render) + +// 開発モードのときのみビルドする +if (config.dev) { + nuxt.build() + .catch((error) => { + console.error(error) + process.exit(1) + }) +} + +// サーバーを Listen する +app.listen(port, '0.0.0.0') +console.log('Server listening on localhost:' + port) +``` + + + +それから `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..ec23ebd60 --- /dev/null +++ b/ja/api/configuration-env.md @@ -0,0 +1,67 @@ +--- +title: "API: env プロパティ" +description: クライアントサイドとサーバーサイドで環境変数を共有します。 +--- + + + + + + +# env プロパティ + + + +- タイプ: `オブジェクト` + + + +Nuxt.js ではクライアントサイドとサーバーサイドで共有される環境変数を作成できます。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + env: { + baseUrl: process.env.BASE_URL || 'http://localhost:3000' + } +} +``` + + + +このように記述すると `baseUrl` プロパティは、環境変数 `BASE_URL` が定義されていればそれと同じになり、そうでなければ `http://localhost:3000` になります。 + + + +そして `baseUrl` 変数にアクセスするには 2つの方法があります: + + + + +1. `process.env.baseUrl` 経由でアクセスする +2. `context.baseUrl` を経由する。詳細は [コンテキスト API](/api#コンテキスト) + + + +例えば `env` プロパティを使って公開トークンを付与することができます。 + + + +上記の例として env プロパティを使って [axios](https://github.com/mzabriskie/axios) を設定できます。 + +`plugins/axios.js`: + +```js +import axios from 'axios' + +export default axios.create({ + baseURL: process.env.baseUrl +}) +``` + + + +このように記述するとページ内で `import axios from '~plugins/axios'` という具合に axios をインポートできます。 diff --git a/ja/api/configuration-generate.md b/ja/api/configuration-generate.md new file mode 100644 index 000000000..6cb59d411 --- /dev/null +++ b/ja/api/configuration-generate.md @@ -0,0 +1,171 @@ +--- +title: "API: generate プロパティ" +description: ユニバーサルなウェブアプリケーションから静的なウェブアプリケーションの生成について設定します。 +--- + + + + + + +# generate プロパティ + + + +- タイプ: `オブジェクト` + + + +> ユニバーサルなウェブアプリケーションから静的なウェブアプリケーションの生成について設定します。 + + + +`nuxt generate` コマンドを実行するか `nuxt.generate()` を呼び出したとき、Nuxt.js は `generete` プロパティで定義された設定を使います。 + +## dir + + + + +- タイプ: '文字列' +- デフォルト: `'dist'` + + + +`nuxt generate` で作成されるディレクトリ名です。 + +## routeParams + + + + + +- タイプType: `オブジェクト` + - キー: `文字列`（ルートのパス） + - 値: `配列` または `関数` + + + +[動的なルーティング](/guide/routing#動的なルーティング) を使うときは、パラメータとそれぞれの動的なルートとのマッピングを定義する必要があります。 + + + +例: + +```bash +-| pages/ +---| index.vue +---| users/ +-----| _id.vue +``` + + + +Nuxt.js によって生成されるルートは `/` と `/users/:id` です。 + + + +上のような設定で `nuxt generate` コマンドを実行しようとすると、ターミナルはエラー終了するでしょう: + +```bash +Could not generate the dynamic route /users/:id, please add the mapping params in nuxt.config.js (generate.routeParams). +``` + + + +そこで `nuxt.config.js` 内に `/users/:id` のマッピングを追加します: + +```js +module.exports = { + generate: { + routeParams: { + '/users/:id': [ + { id: 1 }, + { id: 2 }, + { id: 3 } + ] + } + } +} +``` + + + +そして `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 +``` + + + +いいですね。しかし、もし **動的なパラメータ** が必要な場合はどうでしょう？ + + + + +1. `Promise` を返す `関数` を使う +2. コールバックと一緒に `関数` を使う + + + +### 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 } + }) + }) + } + } + } +} +``` + + + +### コールバックと一緒に関数を使う + +`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..04cb4adf8 --- /dev/null +++ b/ja/api/configuration-head.md @@ -0,0 +1,40 @@ +--- +title: "API: head プロパティ" +description: Nuxt.js では nuxt.config.js 内にアプリケーションのデフォルトのメタ情報を定義できます。 +--- + + + + + + +# head プロパティ + + + +Nuxt.js では `nuxt.config.js` 内にアプリケーションのデフォルトのメタ情報を定義できます。それには `head` プロパティを使います: + + + +- **タイプ:** `オブジェクト` + +```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' } + ] + } +} +``` + + + +`head` に設定できるオプション一覧は [vue-meta のドキュメント](https://github.com/declandewet/vue-meta#recognized-metainfo-properties) を参照してください。 + + + +

情報: ページのコンポーネントでも `head` を使うことができ、`this` を経由してコンポーネントのデータにアクセスできます。詳しくは [コンポーネントの head プロパティ](/api/pages-head) を参照してください。

diff --git a/ja/api/configuration-loading.md b/ja/api/configuration-loading.md new file mode 100644 index 000000000..fc8a902fc --- /dev/null +++ b/ja/api/configuration-loading.md @@ -0,0 +1,159 @@ +--- +title: "API: loading プロパティ" +description: Nuxt.js はルートから別のルートへ遷移する間、プログレスバーを表示するために自身のコンポーネントを使います。これをカスタマイズしたり、プログレスバーを使わないようにしたり、独自のコンポーネントを作成したりできます。 +--- + + + + + + +# loadding プロパティ + + + +- タイプ: `ブーリアン` または `オブジェクト` または `文字列` + + + +> Nuxt.js はルートから別のルートへ遷移する間、プログレスバーを表示するために自身のコンポーネントを使います。これをカスタマイズしたり、プログレスバーを使わないようにしたり、独自のコンポーネントを作成したりできます。 + + + +## プログレスバーを無効にする + + + +- タイプ: `ブーリアン` + + + +ルートから別のルートへ遷移する間にプログレスバーを表示したくないときは `nuxt.config.js` ファイル内に単に `loading: false` と記述します: + +```js +module.exports = { + loading: false +} +``` + + + +## プログレスバーをカスタマイズする + + + +- タイプ: `オブジェクト` + + + +プログレスバーをカスタマイズするために使えるプロパティ一覧。 + + + + + + + + +| キー | タイプ | デフォルト | 説明 | +|-----|------|---------|-------------| +| `color` | 文字列 | `'black'` | プログレスバーの CSS カラー | +| `failedColor` | 文字列 | `'red'` | ルートをレンダリング中にエラーが発生した場合のプログレスバーの CSS カラー（例えば `data` または `fetch` がエラーを返したとき） | +| `height` | 文字列 | `'2px'` | プログレスバーの高さ（プログレスバーの `style` プロパティで使われます） | +| `duration` | 数値 | `5000` | プログレスバーを表示する時間の最大値をミリ秒で指定します。Nuxt.js は各ルートが 5秒以内にレンダリングされると想定しています | + + + +例として、青いプログレスバーを 5px の高さで表示するには `nuxt.config.js` を次のように編集します: + +```js +module.exports = { + loading: { + color: 'blue', + height: '5px' + } +} +``` + + + +## 独自のコンポーネントを使う + + + +- タイプ: `文字列` + + + +Nuxt.js がデフォルトのコンポーネントの代わりに呼び出す、独自のコンポーネントを作成できます。そのためには `loading` オプション内に独自コンポーネントのパスを指定する必要があります。そうすれば独自コンポーネントは Nuxt.js により直接呼び出されます。 + + + +**独自コンポーネントはいくつかのメソッドを備えている必要があります:** + + + + + + + + +| メソッド | 必須か否か | 説明 | +|--------|----------|-------------| +| `start()` | 必須 | ルートが変更されたときに呼び出されます。このときに独自コンポーネントの表示が開始されます | +| `finish()` | 必須 | ルートがロード（及びデータ取得）されたときに呼び出されます。このときに独自コンポーネントが表示が終了します | +| `fail()` | *必須でない* | ルートがロードできなかったときに呼び出されます（例えばデータの取得に失敗したなど） | +| `increase(num)` | *必須でない* | ルートのコンポーネントがロードされている間に呼び出されます。`num` は 100 未満の整数です | + + + +`components/loading.vue` に独自コンポーネントを作ることができます: + +```html + + + + + +``` + + + +それから `nuxt.config.js` を編集して、独自コンポーネントを使うことを Nuxt.js に伝えます: + +```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..eb520cc78 --- /dev/null +++ b/ja/api/configuration-plugins.md @@ -0,0 +1,54 @@ +--- +title: "API: plugins プロパティ" +description: Nuxt.js の plugins オプションで Vue.js プラグインを使うことができます。 +--- + + + + + + +# plugins プロパティ + + + + +- タイプ: `配列` + - 要素: `文字列` + + + +> plugins プロパティを使うと Vue.js プラグインをメインアプリケーションに簡単に追加できます。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + plugins: ['~plugins/vue-notifications'] +} +``` + + + +それから `plugins/vue-notifications.js` ファイルを作る必要があります: + +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + + + +`plugins` プロパティで設定されたパスはすべて、メインアプリケーションが初期化される前に **インポート** されます。 + + + +`Vue.use()` を使う必要があるときは毎回 `plugins/` 内にファイルを作成し、そのパスを `nuxt.config.js` 内の `plugins` に追加する必要があります。 + + + +plugins の使い方をより深く理解するには [ガイド](/guide/plugins#vue-プラグイン) を参照してください。 diff --git a/ja/api/configuration-rootdir.md b/ja/api/configuration-rootdir.md new file mode 100644 index 000000000..c13f08814 --- /dev/null +++ b/ja/api/configuration-rootdir.md @@ -0,0 +1,33 @@ +--- +title: "API: rootDir プロパティ" +description: Nuxt.js アプリケーションのワークスペースを指定します。 +--- + + + + + + +# rootDir プロパティ + + + + +- タイプ: `文字列` +- デフォルト: `process.cwd()` + + + +Nuxt.js アプリケーションのワークスペースを指定します。 + + + +このプロパティは [nuxt コマンド](/guide/commands) により上書きされ、そのコマンドの引数がセットされます（例: `nuxt my-app/` を実行すると `rootDir` に `my-app/` が絶対パス付きでセットされます） + + + +このプロパティは [Nuxt.js をプログラムで使う](/api/nuxt) ときに用いると良いです。 + + + +

このオプションは `node_modules` ディレクトリが `rootDir` フォルダ内にあることを求めるという側面もあります。もしアプリケーションのパスを node_modules なしで設定したいときは [`srcDir` オプション](/api/configuration-srcdir) を使ってください。

diff --git a/ja/api/configuration-router.md b/ja/api/configuration-router.md new file mode 100644 index 000000000..98b8428ca --- /dev/null +++ b/ja/api/configuration-router.md @@ -0,0 +1,252 @@ +--- +title: "API: router プロパティ" +description: router プロパティを使って Nuxt.js のルーターをカスタマイズできます。 +--- + + + + + + +# router プロパティ + + + +> router プロパティを使って Nuxt.js のルーター（[vue-router](https://router.vuejs.org/en/)）をカスタマイズできます。 + +## base + + + + +- タイプ: `文字列` +- デフォルト: `'/'` + + + +アプリケーションのベース URL です。例えばシングルページアプリケーション全体を `/app/` 配下で配信したい場合は base に `'/app/'` を設定します。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + router: { + base: '/app/' + } +} +``` + + + +

`base` がセットされているときは Nuxt.js はドキュメントのヘッダーに `` を追加します。

+ + + +> このオプションは vue-router の [Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 + +## linkActiveClass + + + + +- タイプ: `文字列` +- デフォルト: `'nuxt-link-active'` + + + +[``](/api/components-nuxt-link) のデフォルトの active class をグローバルに設定します。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + router: { + linkActiveClass: 'active-link' + } +} +``` + + + +> このオプションは [vue-router の Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 + +## scrollBehavior + + + +- タイプ: `関数` + + + +`scrollBehavior` オプションを使って、ページ間のスクロール位置についての独自の振る舞いを定義できます。このメソッドはページがレンダリングされるたびに毎回呼び出されます。 + + + +デフォルトでは scrollBehavior オプションは次のようにセットされています: + + + + + + + + + + + + + + + + + + + + + + + + + + +```js +const scrollBehavior = (to, from, savedPosition) => { + // savedPosition は popState ナビゲーションでのみ利用できます + if (savedPosition) { + return savedPosition + } else { + let position = {} + // 子パスが見つからないとき + if (to.matched.length < 2) { + // ページのトップへスクロールする + position = { x: 0, y: 0 } + } + else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { + // 子パスのひとつが scrollToTop オプションが true にセットされているとき + position = { x: 0, y: 0 } + } + // アンカーがあるときは、セレクタを返すことでアンカーまでスクロールする + if (to.hash) { + position = { selector: to.hash } + } + return position + } +} +``` + + + +すべてのルートにおいて強制的にトップまでスクロールさせる例: + +`nuxt.config.js` + +```js +module.exports = { + router: { + scrollBehavior: function (to, from, savedPosition) { + return { x: 0, y: 0 } + } + } +} +``` + + + +> このオプションは vue-router の [Router コンストラクタ](https://router.vuejs.org/en/api/options.html) に直接付与されます。 + +## middleware + + + + +- タイプ: `文字列` または `配列` + - 要素: `文字列` + + + + +アプリケーションのすべてのページに対してデフォルトのミドルウェアをセットします。 + + + +例: + +`nuxt.config.js` + + + + + + + + + + +```js +module.exports = { + router: { + // すべてのページで middleware/user-agent.js を実行します + middleware: 'user-agent' + } +} +``` + +`middleware/user-agent.js` + + + + + + + + +```js +export default function (context) { + // userAgent プロパティを context 内に追加します（context は `data` メソッドや `fetch` メソッド内で利用できます） + context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent +} +``` + + + +ミドルウェアについてより深く理解するには [ミドルウェア](/guide/routing#ミドルウェア) ガイドを参照してください。 + +## extendRoutes + + + +- タイプ: `関数` + + + +Nuxt.js によって作成されるルーティングを拡張したいことがあるかもしれません。それは `extendRoutes` オプションで実現できます。 + + + +独自のルートを追加する例: + +`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') + }) + } + } +} +``` + + + +ルートのスキーマは [vue-router](https://router.vuejs.org/en/) のスキーマを尊重すべきです。 diff --git a/ja/api/configuration-srcdir.md b/ja/api/configuration-srcdir.md new file mode 100644 index 000000000..5e496a659 --- /dev/null +++ b/ja/api/configuration-srcdir.md @@ -0,0 +1,49 @@ +--- +title: "API: srcDir プロパティ" +description: Nuxt.js アプリケーションのソースディレクトリを指定します。 +--- + + + + + + +# srcDir プロパティ + + + + +- タイプ: `文字列` +- デフォルト: [rootDir の値](/api/configuration-rootdir) + + + +> Nuxt.js アプリケーションのソースディレクトリを指定します。 + + + +例（`nuxt.config.js`）: + +```js +module.exports = { + srcDir: 'client/' +} +``` + + + +上のように指定すると、アプリケーションの構造を次のようにできます: + +```bash +-| app/ +---| node_modules/ +---| client/ +------| pages/ +------| components/ +---| nuxt.config.js +---| package.json +``` + + + +このオプションは Nuxt.js を使いつつ独自のサーバーを持ちたいときに役に立ちます。そのようなときに、すべての npm 依存パッケージをひとつの `package.json` 内にまとめることができます。 diff --git a/ja/api/configuration-transition.md b/ja/api/configuration-transition.md new file mode 100644 index 000000000..4a0df526e --- /dev/null +++ b/ja/api/configuration-transition.md @@ -0,0 +1,66 @@ +--- +title: "API: transition プロパティ" +description: ページのトランジションのデフォルト設定を指定します。 +--- + + + + + + +# transition プロパティ + + + +- タイプ: `文字列` または `オブジェクト` + + + +> ページのトランジションのデフォルト設定を指定するために使われます。 + + + +デフォルト: + +```js +{ + name: 'page', + mode: 'out-in' +} +``` + + + +例（`nuxt.config.js`）: + + + + + + + + + + + + + + + +```js +module.exports = { + transition: 'page' + // または + transition: { + name: 'page', + mode: 'out-in', + beforeEnter (el) { + console.log('Before enter...'); + } + } +} +``` + + + +`nuxt.config.js` 内の transition キーはページのトランジションのデフォルト設定を指定するために使われます。`transition` キーがオブジェクトのときに利用可能なキーについてより深く理解するには [ページのトランジションプロパティ](/api/pages-transition#オブジェクト) を参照してください。 diff --git a/ja/api/index.md b/ja/api/index.md new file mode 100644 index 000000000..22c9580e5 --- /dev/null +++ b/ja/api/index.md @@ -0,0 +1,73 @@ +--- +title: "API: data メソッド" +description: Nuxt.js は Vue.js の data メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を行えるようにしています。 +--- + + + + + + +# data メソッド + + + +> Nuxt.js は Vue.js の `data` メソッドに手を加えて、コンポーネントのデータがセットされる前に非同期処理を行えるようにしています。 + + + +- **タイプ:** `関数` + + + +`data` はコンポーネントがローディングされる前に毎回呼び出されます（ページコンポーネントに限ります）。サーバーサイドもしくは（訳注: クライアントサイドでは）ユーザーがページ遷移する前に呼び出されます。このメソッドは第一引数として **コンテキスト** を受け取り、コンテキストを使ってデータを取得してコンポーネントのデータを返すことができます。 + +```js +export default { + data (context) { + return { foo: 'bar' } + } +} +``` + + + +
`data` メソッド内で、コンポーネントのインスタンスに `this` を経由してアクセスしては**いけません**。なぜなら `data` メソッドはコンポーネントが **インスタンス化される前に** 呼び出されるためです。
+ + + +## コンテキスト + + + +`context` 内の利用できるキーの一覧: + + + + + + + + + + + + + + + + +| キー | タイプ | どこで利用できるか | 説明 | +|-----|------|--------------|-------------| +| `isClient` | ブーリアン | クライアント＆サーバー | クライアントサイドでレンダリングしているか否か | +| `isServer` | ブーリアン | クライアント＆サーバー | サーバーサイドでレンダリングしているか否か | +| `isDev` | ブーリアン | クライアント＆サーバー | 開発モードか否か。このキーはプロダクションモードでデータをキャッシュさせるときに役立ちます | +| `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 のエイリアス | +| `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/api/menu.json b/ja/api/menu.json new file mode 100644 index 000000000..eb68a3cde --- /dev/null +++ b/ja/api/menu.json @@ -0,0 +1,95 @@ +[ + { + "title": "ページ", + "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": "文字列", "to": "#文字列" }, + { "name": "オブジェクト", "to": "#オブジェクト" }, + { "name": "関数", "to": "#関数" } + ] + }, + { "name": "validate", "to": "/pages-validate" } + ] + }, + { + "title": "コンポーネント", + "links": [ + { "name": "nuxt", "to": "/components-nuxt" }, + { "name": "nuxt-child", "to": "/components-nuxt-child" }, + { "name": "nuxt-link", "to": "/components-nuxt-link" } + ] + }, + { + "title": "設定", + "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": "プログレスバーを無効にする", "to": "#プログレスバーを無効にする" }, + { "name": "プログレスバーをカスタマイズする", "to": "#プログレスバーをカスタマイズする" }, + { "name": "独自のコンポーネントを使う", "to": "#独自のコンポーネントを使う" } + ] + }, + { "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 モジュール", + "links": [ + { "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/api/nuxt-render-and-get-window.md b/ja/api/nuxt-render-and-get-window.md new file mode 100644 index 000000000..2686e2b0a --- /dev/null +++ b/ja/api/nuxt-render-and-get-window.md @@ -0,0 +1,67 @@ +--- +title: "API: nuxt.renderAndGetWindow(url, options)" +description: Nuxt.js アプリケーションの URL を渡して window を取得します。 +--- + + + + +# nuxt.renderAndGetWindow(url, options = {}) + + + + + + + + + +- タイプ: `関数` +- 引数: `文字列` + 1. `文字列`: レンダリングする URL + 2. *オプション*, `オブジェクト`: オプション + - virtualConsole: `ブーリアン`（デフォルト: `true`） +- 戻り値: `プロミス` + - 戻り値: `window` + + + +> Nuxt.js アプリケーションの URL を渡して window を取得します。 + + + +

このメソッドは [テストする目的](guide/development-tools#end-to-end-testing) で使われます。

+ + + +この関数を使うためには `jsdom` をインストールする必要があります。: + +```bash +npm install --save-dev jsdom +``` + + + +例: + + + + + + + + + + + + +```js +const Nuxt = require('nuxt') +const nuxt = new Nuxt() + +nuxt.renderAndGetWindow('http://localhost:3000') +.then((window) => { + // 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..1d6f4c013 --- /dev/null +++ b/ja/api/nuxt-render-route.md @@ -0,0 +1,85 @@ +--- +title: "API: nuxt.renderRoute(route, 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` --> + +- タイプ: `関数` +- 引数: + 1. `文字列`, レンダリングするルート + 2. *オプション*, `オブジェクト`, 付与するコンテキスト, 利用できるキー: `req` 及び `res` +- 戻り値: `プロミス` + - `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#エンドツーエンドテスト) で使われます。 + +<!-- <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) --> + +<!-- 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 } --> +<!-- }) --> +<!-- ``` --> + +```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 は常に文字列 + + // エラーレイアウトが表示されるときは error は null ではありません。エラーフォーマットは下記: + // { statusCode: 500, message: 'エラーメッセージ' } + + // data() や fetch() で redirect() が使われたときは redirected は false ではありません + // { 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..9fb07a72c --- /dev/null +++ b/ja/api/nuxt-render.md @@ -0,0 +1,89 @@ +--- +title: "API: nuxt.render(req, res)" +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` --> + +- タイプ: `関数` +- 引数: + 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): --> + +Nuxt.js を [express](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) --> +<!-- ``` --> + +```js +const Nuxt = require('nuxt') +const app = require('express')() +const isProd = (process.env.NODE_ENV === 'production') +const port = process.env.PORT || 3000 + +// Nuxt.js をオプションとともにインスタンス化する +let config = require('./nuxt.config.js') +config.dev = !isProd +const nuxt = new Nuxt(config) + +// すべてのルートを Nuxt.js でレンダリングする +app.use(nuxt.render) + +// ホットリローディングする開発モードのときのみビルドする +if (config.dev) { + nuxt.build() + .catch((error) => { + console.error(error) + process.exit(1) + }) +} + +// サーバーを 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">ミドルウェアの最後で **nuxt.render** を呼び出すことが推奨されます。それは nuxt.render はウェブアプリケーションのレンダリングをハンドリングし、next() メソッドを呼び出さないためです。</p> diff --git a/ja/api/nuxt.md b/ja/api/nuxt.md new file mode 100644 index 000000000..0eee66359 --- /dev/null +++ b/ja/api/nuxt.md @@ -0,0 +1,67 @@ +--- +title: "API: Nuxt(options)" +description: Nuxt.js はプログラム上で、ミドルウェアとして使うことができます。そうすることでウェブアプリケーションをレンダリングする独自のサーバーを自由に作ることができます。 +--- + +<!-- 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 --> + +# 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 以上でビルドされます。ES2015 はコーディングをより楽しいものし、より読みやすくしてくれますよね。また、Nuxt.js はトランスパイラを利用せず、また V8 エンジンで実装された機能に依存しません。このような理由から Nuxt.js は Node.js `4.0` 以上をターゲットにしています。 + +<!-- You can require Nuxt.js like this: --> + +Nuxt.js をこのように require できます: + +```js +const Nuxt = require('nuxt') +``` + +## Nuxt(options) + +<!-- 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 = {} + +const nuxt = new Nuxt(options) +nuxt.build() +.then(() => { + // 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. --> + +手っ取り早く始めるために [nuxt-express](https://github.com/nuxt/express) や [adonuxt](https://github.com/nuxt/adonuxt) スターターを参照できます。 + +### ログを使ってデバッグする + +<!-- If you want to display nuxt.js logs, you can add to the top of your file: --> + +Nuxt.js のログを表示したいときはファイルのトップに次のコードを追加してください: + +```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..74c26bb69 --- /dev/null +++ b/ja/api/pages-fetch.md @@ -0,0 +1,67 @@ +--- +title: "API: fetch メソッド" +description: fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては data メソッドとよく似ています。 +--- + +<!-- 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 --> + +# 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. --> + +> 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` メソッドは第一引数として [コンテキスト](/api#コンテキスト) を受け取り、コンテキストを使ってデータを取得してデータをストアに入れることができます。fetch メソッドを非同期にするためには **Promise を返すようにしてください**。Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます。 + +<!-- Example of `pages/index.vue`: --> + +`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: --> + +async/await を使ってコードをスッキリさせることもできます: + +```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..d63e42b1f --- /dev/null +++ b/ja/api/pages-head.md @@ -0,0 +1,55 @@ +--- +title: "API: head メソッド" +description: Nuxt.js はアプリケーションの `headers` 及び `html attributes` を更新するために vue-meta と使います。 +--- + +<!-- title: "API: The head Method" --> +<!-- description: Nuxt.js uses vue-meta to update the `headers` and `html attributes` of your application. --> + +<!-- # The head Method --> + +# head メソッド + +<!-- \> Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. --> + +> 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> + <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> --> + +<p class="Alert">子コンポーネント利用されたときにメタ情報が重複してしまうことを避けるために `hid` キーでユニーク識別子を与えてください。これについてより深く理解するには [こちら](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..41d8eb90b --- /dev/null +++ b/ja/api/pages-layout.md @@ -0,0 +1,40 @@ +--- +title: "API: layout プロパティ" +description: layouts ディレクトリの（第一階層の）ファイルはカスタムレイアウトになります。これらはページコンポーネントの layout プロパティで指定して利用できます。 +--- + +<!-- 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 --> + +# layout プロパティ + +<!-- \> 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 { + layout: 'blog' +} +``` + +<!-- 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. --> + +動作する様子を [デモ動画](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#レイアウト) を参照してください。 diff --git a/ja/api/pages-middleware.md b/ja/api/pages-middleware.md new file mode 100644 index 000000000..088e5a094 --- /dev/null +++ b/ja/api/pages-middleware.md @@ -0,0 +1,75 @@ +--- +title: "API: middleware プロパティ" +description: アプリケーションの特定のページにミドルウェアを設定します。 +--- + +<!-- title: "API: The middleware Property" --> +<!-- description: Set the middleware for a specific page of the application. --> + +<!-- # The middleware Property --> + +# middleware プロパティ + +<!-- - 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>シークレットページ</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') --> +<!-- } --> +<!-- } --> +<!-- ``` --> + +```js +export default function ({ store, redirect }) { + // ユーザーが認証されていないとき + if (!store.state.authenticated) { + return redirect('/login') + } +} +``` + +<!-- To learn more about the middleware, see the [middleware guide](/guide/routing#middleware). --> + +ミドルウェアについてより深く理解するには [ミドルウェアのガイド](/guide/routing#ミドルウェア) を参照してください。 diff --git a/ja/api/pages-scrolltotop.md b/ja/api/pages-scrolltotop.md new file mode 100644 index 000000000..d5d6197e2 --- /dev/null +++ b/ja/api/pages-scrolltotop.md @@ -0,0 +1,39 @@ +--- +title: "API: scrollToTop プロパティ" +description: scrollToTop プロパティで、ページをレンダリングする前にトップまでスクロールか否かを指定できます。 +--- + +<!-- 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 --> + +# scrollToTop プロパティ + +<!-- \> The scrollToTop property lets you tell nuxt.js to scroll to the top before rendering the page. --> + +> scrollToTop プロパティで、ページをレンダリングする前にトップまでスクロールか否かを指定できます。 + +<!-- - **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 のデフォルトの挙動です。子ルートをレンダリングするときにトップまでスクロールさせたいときは `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). --> + +スクロールについて Nuxt.js のデフォルトの挙動を上書きしたいときは [scrollBehavior オプション](/api/configuration-router#scrollBehavior) を参照してください。 diff --git a/ja/api/pages-transition.md b/ja/api/pages-transition.md new file mode 100644 index 000000000..689cdd8cc --- /dev/null +++ b/ja/api/pages-transition.md @@ -0,0 +1,168 @@ +--- +title: "API: transition プロパティ" +description: Nuxt.js では transition コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。 +--- + +<!-- 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 --> + +# 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) コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。 + +<!-- - **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 { + // 文字列を指定できます + transition: '' + // またはオブジェクト + transition: {} + // または関数 + transition (to, from) {} +} +``` + +<!-- ## String --> + +## 文字列 + +<!-- If the `transition` key is set as a string, it will be used as the `transition.name`. --> + +`transition` キーに文字列がセットされたときは `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: --> + +`transition` キーにオブジェクトがセットされたとき: + +```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: --> + +`transition` オブジェクトが持つことができるプロパティは以下のとおり: + +<!-- | 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` | 文字列 | `"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): --> + +`transition` の中でメソッドを定義することもでき、メソッドは [JavaScript フック](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.* --> + +*メモ: JavaScript のみのトランジションのために明示的に `css: false` を追加しておくのは良いアイディアです。これは Vue は CSS 判定をスキップさせます。また誤って CSS ルールがトランジションに干渉するのを防ぎます。* + +<!-- ## Function --> + +## 関数 + +<!-- If the `transition` key is set as a function: --> + +`transition` キーに関数がセットされたとき: + +```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` --> + +- `/` から `/posts` へ遷移するとき => `slide-left` +- `/posts` から `/posts?page=3` へ遷移するとき => `slide-left` +- `/posts?page=3` から `/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..20787e05e --- /dev/null +++ b/ja/api/pages-validate.md @@ -0,0 +1,59 @@ +--- +title: "API: validate メソッド" +description: Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。 +--- + +<!-- title: "API: The validate Method" --> +<!-- description: Nuxt.js lets you define a validator method inside your dynamic route component. --> + +<!-- # The validate Method --> + +# 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 // 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 では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます（下記の例は `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 エラーページをロードします。 + +<!-- ```js --> +<!-- export default { --> +<!-- validate ({ params }) { --> +<!-- // Must be a number --> +<!-- return /^\d+$/.test(params.id) --> +<!-- } --> +<!-- } --> +<!-- ``` --> + +```js +export default { + validate ({ params }) { + // 数値でなければならない + 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..9084ffe9e --- /dev/null +++ b/ja/examples/async-data.md @@ -0,0 +1,9 @@ +--- +title: 非同期データ +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/auth-routes.md b/ja/examples/auth-routes.md new file mode 100644 index 000000000..c5edc038d --- /dev/null +++ b/ja/examples/auth-routes.md @@ -0,0 +1,408 @@ +--- +title: 認証ルート +description: Nuxt.js を使った認証ルートの例 +github: auth-routes +livedemo: https://nuxt-auth-routes.gomix.me +liveedit: https://gomix.com/#!/project/nuxt-auth-routes +--- + +<!-- 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. --> + +> 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: --> + +まず依存パッケージをインストールします: + +```bash +yarn add express express-session body-parser whatwg-fetch +``` + +<!-- *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) --> +<!-- }) --> +<!-- ``` --> + +```js +const Nuxt = require('nuxt') +const bodyParser = require('body-parser') +const session = require('express-session') +const app = require('express')() + +// req.body へアクセスするために body-parser を使う +app.use(bodyParser.json()) + +// req.session を作成します +app.use(session({ + secret: 'super-secret-key', + resave: false, + saveUninitialized: false, + cookie: { maxAge: 60000 } +})) + +// 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' } + return res.json({ username: 'demo' }) + } + res.status(401).json({ error: 'Bad credentials' }) +}) + +// POST /api/logout してログアウトし、ログアウトしたユーザーを req.session から削除 +app.post('/api/logout', function (req, res) { + delete req.session.authUser + res.json({ ok: true }) +}) + +// オプションとともに Nuxt.js をインスタンス化 +const isProd = process.env.NODE_ENV === 'production' +const nuxt = new Nuxt({ dev: !isProd }) + +// プロダクション環境ではビルドしない +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: --> + +また `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: --> + +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') --> + +<!-- const store = new Vuex.Store({ --> +<!-- state: { --> +<!-- authUser: null --> +<!-- }, --> + +<!-- mutations: { --> +<!-- SET_USER: function (state, user) { --> +<!-- state.authUser = user --> +<!-- } --> +<!-- }, --> + +<!-- actions: { --> +<!-- // ... --> +<!-- } --> +<!-- }) --> + +<!-- export default store --> +<!-- ``` --> + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +// 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 connected user --> +<!-- 4. We export our store instance to Nuxt.js can inject it to our main application --> + +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 --> + +### 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` アクションを追加できます: + +```js +nuxtServerInit ({ commit }, { req }) { + if (req.session && req.session.authUser) { + commit('SET_USER', req.session.authUser) + } +} +``` + +<!-- ### login() action --> + +### login() アクション + +<!-- We add a `login` action which will be called from our pages component to log in the user: --> + +`login` アクションを追加できます。このアクションはログインするためにページコンポーネントから呼び出されます: + +ログインするためにページコンポーネントから呼び出される `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) --> +<!-- }) --> +<!-- } --> +<!-- ``` --> + +```js +login ({ commit }, { username, password }) { + return fetch('/api/login', { + // クライアントのクッキーをサーバーに送信 + 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 --> + +### 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', { + // クライアントのクッキーをサーバーに送信 + 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. --> + +ユーザーがアプリケーションで認証されているか否かをチェックするために、ページコンポーネント内で `$store.state.authUser` を使うことができます。 + +<!-- ### 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> --> +<!-- ``` --> + +```html +<template> + <div> + <h1>Super secret page</h1> + <router-link to="/">Back to the home page</router-link> + </div> +</template> + +<script> +export default { + // データをこのコンポーネントにセットする必要がないため fetch() を使う + 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. --> + +ユーザーが認証されていなかったときは `fetch` メソッド内で `redirect('/')` が呼び出されます。 diff --git a/ja/examples/cached-components.md b/ja/examples/cached-components.md new file mode 100644 index 000000000..791410c25 --- /dev/null +++ b/ja/examples/cached-components.md @@ -0,0 +1,9 @@ +--- +title: コンポーネントのキャッシュ +description: コンポーネントのキャッシュを行う例 +github: cached-components +documentation: /api/configuration-cache +--- + +<!-- title: Cached Components --> +<!-- description: Cached Components example with Nuxt.js --> diff --git a/ja/examples/custom-loading.md b/ja/examples/custom-loading.md new file mode 100644 index 000000000..071fe2c70 --- /dev/null +++ b/ja/examples/custom-loading.md @@ -0,0 +1,10 @@ +--- +title: カスタムローディングコンポーネント +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 new file mode 100644 index 000000000..21fd68e1b --- /dev/null +++ b/ja/examples/custom-routes.md @@ -0,0 +1,10 @@ +--- +title: カスタムルーティング +description: カスタムルーティングを行う例 +github: custom-routes +livedemo: https://custom-routes.nuxtjs.org +documentation: /guide/routing#動的なルーティング +--- + +<!-- title: Custom Routes --> +<!-- description: Custom Routes example with Nuxt.js --> diff --git a/ja/examples/global-css.md b/ja/examples/global-css.md new file mode 100644 index 000000000..c32bb88bf --- /dev/null +++ b/ja/examples/global-css.md @@ -0,0 +1,10 @@ +--- +title: グローバル CSS +description: グローバル CSS の例 +github: global-css +livedemo: https://global-css.nuxtjs.org +documentation: /api/configuration-css +--- + +<!-- title: Global CSS --> +<!-- description: Global CSS example with Nuxt.js --> diff --git a/ja/examples/hello-world.md b/ja/examples/hello-world.md new file mode 100644 index 000000000..0eb44f393 --- /dev/null +++ b/ja/examples/hello-world.md @@ -0,0 +1,12 @@ +--- +title: Hello World +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#スクラッチから始める +--- + +<!-- title: Hello World --> +<!-- description: Hello World example with Nuxt.js --> diff --git a/ja/examples/i18n.md b/ja/examples/i18n.md new file mode 100644 index 000000000..755532312 --- /dev/null +++ b/ja/examples/i18n.md @@ -0,0 +1,10 @@ +--- +title: 国際化（i18n） +description: 国際化（i18n）の例 +github: i18n +livedemo: https://i18n.nuxtjs.org +documentation: /guide/routing#ミドルウェア +--- + +<!-- title: Internationalization (i18n) --> +<!-- description: Internationalization (i18n) example with Nuxt.js --> diff --git a/ja/examples/layouts.md b/ja/examples/layouts.md new file mode 100644 index 000000000..2766f5ffa --- /dev/null +++ b/ja/examples/layouts.md @@ -0,0 +1,11 @@ +--- +title: レイアウト +description: レイアウトの例 +github: custom-layouts +livedemo: https://nuxt-custom-layouts.gomix.me/ +liveedit: https://gomix.com/#!/project/nuxt-custom-layouts +documentation: /guide/views#レイアウト +--- + +<!-- title: Layouts --> +<!-- description: Layouts example with Nuxt.js --> diff --git a/ja/examples/menu.json b/ja/examples/menu.json new file mode 100644 index 000000000..c3472a19d --- /dev/null +++ b/ja/examples/menu.json @@ -0,0 +1,33 @@ +[ + { + "title": "基本的な使い方", + "links": [ + { "name": "Hello world", "to": "" }, + { "name": "SEO HTML Head", "to": "/seo-html-head" } + ] + }, + { + "title": "カスタマイズ", + "links": [ + { "name": "コンポーネントのキャッシュ", "to": "/cached-components" }, + { "name": "カスタムローディング", "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": "高度な使い方", + "links": [ + { "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/middleware.md b/ja/examples/middleware.md new file mode 100644 index 000000000..1cddc895c --- /dev/null +++ b/ja/examples/middleware.md @@ -0,0 +1,10 @@ +--- +title: ミドルウェア +description: ミドルウェアの例 +github: middleware +livedemo: https://middleware.nuxtjs.org +documentation: /guide/routing#ミドルウェア +--- + +<!-- title: Middleware --> +<!-- description: Middleware example with Nuxt.js --> diff --git a/ja/examples/nested-routes.md b/ja/examples/nested-routes.md new file mode 100644 index 000000000..e9ab70bd4 --- /dev/null +++ b/ja/examples/nested-routes.md @@ -0,0 +1,10 @@ +--- +title: ネストされたルート +description: ネストされたルートの例 +github: nested-routes +livedemo: https://nested-routes.nuxtjs.org +documentation: /guide/routing#ネストされたルート +--- + +title: Nested Routes +description: Nested Routes example with Nuxt.js diff --git a/ja/examples/plugins.md b/ja/examples/plugins.md new file mode 100644 index 000000000..d4ffe0596 --- /dev/null +++ b/ja/examples/plugins.md @@ -0,0 +1,10 @@ +--- +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 --> diff --git a/ja/examples/routes-transitions.md b/ja/examples/routes-transitions.md new file mode 100644 index 000000000..1b289d607 --- /dev/null +++ b/ja/examples/routes-transitions.md @@ -0,0 +1,11 @@ +--- +title: ページ遷移時のトランジション +description: ページ間を遷移する際のトランジションの例 +github: routes-transitions +youtube: https://www.youtube.com/embed/RIXOzJWFfc8 +livedemo: https://routes-transitions.nuxtjs.org +documentation: /guide/routing#トランジション +--- + +<!-- title: Routes transitions --> +<!-- description: Routes transitions example with Nuxt.js --> diff --git a/ja/examples/seo-html-head.md b/ja/examples/seo-html-head.md new file mode 100644 index 000000000..c47954aa6 --- /dev/null +++ b/ja/examples/seo-html-head.md @@ -0,0 +1,10 @@ +--- +title: SEO HTML Head +description: SEO のために HTML の head 情報を設定する例 +github: head-elements +livedemo: https://head-elements.nuxtjs.org +documentation: /guide/views#html-の-head-情報 +--- + +<!-- title: SEO HTML Head --> +<!-- description: SEO HTML Head example with Nuxt.js --> diff --git a/ja/examples/testing.md b/ja/examples/testing.md new file mode 100644 index 000000000..1c759aded --- /dev/null +++ b/ja/examples/testing.md @@ -0,0 +1,9 @@ +--- +title: テスト +description: テストの例 +github: with-ava +documentation: /guide/development-tools#エンドツーエンドテスト +--- + +<!-- title: Testing --> +<!-- description: Testing example with Nuxt.js --> diff --git a/ja/examples/vuex-store.md b/ja/examples/vuex-store.md new file mode 100644 index 000000000..33dfb1ac9 --- /dev/null +++ b/ja/examples/vuex-store.md @@ -0,0 +1,10 @@ +--- +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 --> diff --git a/ja/faq/async-data-components.md b/ja/faq/async-data-components.md new file mode 100644 index 000000000..ebcef579d --- /dev/null +++ b/ja/faq/async-data-components.md @@ -0,0 +1,29 @@ +--- +title: コンポーネント内の非同期データ +description: コンポーネント内で非同期データを扱うには？ +--- + +<!-- 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. --> + +コンポーネントはルートに関連付けられていないため（訳注: 基本的には）非同期データを扱うことはできません。Nuxt.js ではルートに関連付けられたコンポーネント（訳注: pages ディレクトリ内のコンポーネントのこと）の data() メソッドに手を加えて非同期データを扱えるようにしています。 + +<!-- For sub components, there are 2 ways of achieving it: --> + +しかしながら、サブコンポーネント（訳注: 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 --> + +1. mounted() フック内に API コールを作成し、その呼び出し以降にデータをセットすること。マイナスな側面としては、サーバーサイドレンダリングできなくなります。 +2. ページコンポーネントの data() メソッド内に API コールを作成し、データをプロパティとしてサブコンポーネントに渡すこと。この方法ではサーバーサイドレンダリングできます。しかしページの data() メソッドがサブコンポーネントの非同期データをロードするため、可読性が落ちるかもしれません。 + +<!-- 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..583bf6b8d --- /dev/null +++ b/ja/faq/css-flash.md @@ -0,0 +1,21 @@ +--- +title: CSS Flash +description: なぜ CSS Flash が見えるのか？ +--- + +<!-- 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. --> + +これが見えるのは 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" は見えません。 diff --git a/ja/faq/duplicated-meta-tags.md b/ja/faq/duplicated-meta-tags.md new file mode 100644 index 000000000..cf4767a61 --- /dev/null +++ b/ja/faq/duplicated-meta-tags.md @@ -0,0 +1,61 @@ +--- +title: 重複したメタタグ +description: メタタグが重複したときは？ +--- + +<!-- 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](/guide/views#html-head). --> + +これは [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. --> + +コンポーネントで 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`: + +```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). --> + +ページ内の `head` プロパティの使い方をより深く理解するには [HTML の head 情報のドキュメント](/guide/views#html-の-head-情報) を参照してください。 diff --git a/ja/faq/extend-webpack.md b/ja/faq/extend-webpack.md new file mode 100644 index 000000000..4953adfbc --- /dev/null +++ b/ja/faq/extend-webpack.md @@ -0,0 +1,25 @@ +--- +title: Webpack 設定を拡張する +description: Webpack の設定を拡張するには？ +--- + +<!-- title: Extend Webpack --> +<!-- description: How to extend webpack config? --> + +<!-- # 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 = { + 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..3321ee8fd --- /dev/null +++ b/ja/faq/external-resources.md @@ -0,0 +1,59 @@ +--- +title: 外部リソース +description: Nuxt.js で外部リソースを使うには？ +--- + +<!-- 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: --> + +`nuxt.config.js` ファイル内でリソースをインクルードします: + +```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: --> + +pages ディレクトリの .vue ファイル内でリソースをインクルードします: + +```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..5e5d9b520 --- /dev/null +++ b/ja/faq/github-pages.md @@ -0,0 +1,70 @@ +--- +title: Github Pages へデプロイ +description: Github Pages へデプロイするには？ +--- + +<!-- title: Github Pages Deployment --> +<!-- description: How to deploy Nuxt.js on Github Pages? --> + +<!-- # How to deploy on Github Pages? --> + +# 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. --> + +このとき dist フォルダが作成され、その中に Github Pages ホスティングへデプロイされるものがすべて入ります。 + +<!-- Branch `gh-pages` for project repository OR branch `master` for user or organization site --> + +プロジェクトリポジトリならば `gh-pages` ブランチ、ユーザーまたは組織サイトならば `master` ブランチを指定してください。 + +<!-- ## Command line deployment --> + +## コマンドラインでデプロイする + +<!-- 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 でインストールしてください: + +```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. --> + +`deploy` コマンドを package.json に追加してください。ブランチは、プロジェクトリポジトリならば `gh-pages` ブランチ、ユーザーまたは組織サイトならば `master` ブランチを指定してください。 + +```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..d69ca33aa --- /dev/null +++ b/ja/faq/google-analytics.md @@ -0,0 +1,111 @@ +--- +title: Google アナリティクスの統合 +description: Google アナリティクスを使うには？ +--- + +<!-- title: Google Analytics Integration --> +<!-- description: How to use Google Analytics? --> + +<!-- ## 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 +/* +** クライアントサイドかつプロダクションモードでのみ実行 +*/ +if (process.BROWSER_BUILD && process.env.NODE_ENV === 'production') { + /* + ** 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'); + /* + ** 現在のページをセット + */ + ga('create', 'UA-XXXXXXXX-X', 'auto') + ga('send', 'pageview') + /* + ** アプリケーションがマウントしたとき + */ + window.onNuxtReady((app) => { + /* + ** ルートが変更されるたびに + */ + app.$nuxt.$on('routeChanged', (to, from) => { + /* + ** Google アナリティクスにページビューが追加されたことを伝える + */ + ga('set', 'page', to.fullPath) + ga('send', 'pageview') + }) + }) +} +``` + +<!-- \> 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: --> + +それから `plugins/ga.js` をメインアプリケーション内でインポートすることを Nuxt.js に伝えます: + +`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! --> + +よし！これで 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> diff --git a/ja/faq/heroku-deployment.md b/ja/faq/heroku-deployment.md new file mode 100644 index 000000000..75e07720c --- /dev/null +++ b/ja/faq/heroku-deployment.md @@ -0,0 +1,63 @@ +--- +title: Heroku へデプロイ +description: Heroku へデプロイするには？ +--- + +<!-- title: Heroku Deployment --> +<!-- description: How to deploy Nuxt.js on Heroku? --> + +<!-- # 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` をインストールすることを伝える必要があります: + +```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: --> + +またアプリケーションに `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): --> + +下記は 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` を実行するよう伝えます: + +```js +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "heroku-postbuild": "npm run build" +} +``` + +<!-- 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! --> + +やりました！これで Nuxt.js アプリケーションは Heroku でホストされるようになりました！ diff --git a/ja/faq/host-port.md b/ja/faq/host-port.md new file mode 100644 index 000000000..efc8538cc --- /dev/null +++ b/ja/faq/host-port.md @@ -0,0 +1,41 @@ +--- +title: ホストとポート番号 +description: Nuxt.js でホストとポート番号を変更するには？ +--- + +<!-- 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 --> + +- 環境変数を使う + +```js +"scripts": { + "dev": "HOST=0.0.0.0 PORT=3333 nuxt" +} +``` + +<!-- - Via a nuxt config in the `package.json`: --> + +- `package.json` 内の nuxt 設定を使う: + +```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..0245ca36f --- /dev/null +++ b/ja/faq/jsx.md @@ -0,0 +1,58 @@ +--- +title: JSX +description: Nuxt.js で JSX を使うには？ +--- + +<!-- title: JSX --> +<!-- description: How to use JSX with Nuxt.js? --> + +<!-- # 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: --> + +それから `nuxt.config.js` 内で [transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) プラグインを使うことを Nuxt.js に伝えます: + +```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). --> + +Babel のオプションをより深く理解するには [ビルド設定のドキュメント](/api/configuration-build) を参照してください。 + +<!-- You can now use JSX in your `render` method of your components: --> + +ここまでの設定で、コンポーネントの `render` メソッド内で JSX が使えるようになっています: + +```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. --> + +JSX の使い方をより深く理解するには Vue.js ドキュメントの [JSX のセクション](https://vuejs.org/v2/guide/render-function.html#JSX) を参照してください。 diff --git a/ja/faq/menu.json b/ja/faq/menu.json new file mode 100644 index 000000000..2eb6f68d9 --- /dev/null +++ b/ja/faq/menu.json @@ -0,0 +1,33 @@ +[ + { + "title": "設定", + "links": [ + { "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": "開発", + "links": [ + { "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": "デプロイ", + "links": [ + { "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/now-deployment.md b/ja/faq/now-deployment.md new file mode 100644 index 000000000..db41cf3ca --- /dev/null +++ b/ja/faq/now-deployment.md @@ -0,0 +1,37 @@ +--- +title: Now を使ったデプロイ +description: Now を使ってデプロイするには？ +--- + +<!-- 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` を次のように記述することが推奨されます: + +```json +{ + "name": "my-app", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + } +} +``` + +<!-- Then run `now` and enjoy! --> + +これで `now` を実行できます！エンジョイ！ + +<!-- Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. --> + +メモ: `.nuxt` を `.npmignore` または `.gitignore` に入れておくことをお勧めします。 diff --git a/ja/faq/postcss-plugins.md b/ja/faq/postcss-plugins.md new file mode 100644 index 000000000..1dfa5bf98 --- /dev/null +++ b/ja/faq/postcss-plugins.md @@ -0,0 +1,27 @@ +--- +title: PostCSS プラグイン +description: PostCSS プラグインを追加するには？ +--- + +<!-- title: Postcss plugins --> +<!-- description: How to add postcss plugins? --> + +<!-- # How to add postcss plugins? --> + +# PostCSS プラグインを追加するには？ + +<!-- In your `nuxt.config.js` file: --> + +`nuxt.config.js` ファイル内に次のように記述します: + +```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..d34bd9297 --- /dev/null +++ b/ja/faq/pre-processors.md @@ -0,0 +1,43 @@ +--- +title: プリプロセッサ +description: Nuxt.js でプリプロセッサを使うには？ +--- + +<!-- 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. --> + +[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"> + 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: --> + +これらのプリプロセッサを使うために Webpack のローダーをインストールする必要があります。 + +```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..84c2c3001 --- /dev/null +++ b/ja/faq/surge-deployment.md @@ -0,0 +1,55 @@ +--- +title: Surge へデプロイ +description: Surge.sh へデプロイするには？ +--- + +<!-- title: Surge Deployment --> +<!-- description: How to deploy Nuxt.js with Surge.sh? --> + +<!-- # 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 をインストールします: + +```bash +npm install -g surge +``` + +<!-- 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. --> + +このとき `dist` フォルダが作成され、その中に静的ホスティングサービスへデプロイされるものがすべて入ります。 + +<!-- We can then deploy it to surge.sh: --> + +そして 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. --> + +プロジェクトが [動的なルーティング](/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> --> + +<div class="Alert">`nuxt generate` でウェブアプリケーションを生成するときは [data()](/guide/async-data#the-data-method) や [fetch()](/guide/vuex-store#the-fetch-method) に渡される [context](/api) が `req` 及び `res` を持っていません。</div> diff --git a/ja/faq/webpack-plugins.md b/ja/faq/webpack-plugins.md new file mode 100644 index 000000000..78682f2bb --- /dev/null +++ b/ja/faq/webpack-plugins.md @@ -0,0 +1,31 @@ +--- +title: Webpack プラグイン +description: Webpack プラグインを追加するには？ +--- + +<!-- title: Webpack plugins --> +<!-- description: How to add webpack plugins? --> + +<!-- # How to add webpack plugins? --> + +# Webpack プラグインを追加するには？ + +<!-- In your `nuxt.config.js` file: --> + +`nuxt.config.js` ファイル内に次のように記述します: + +```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..6d3511907 --- /dev/null +++ b/ja/faq/window-document-undefined.md @@ -0,0 +1,39 @@ +--- +title: window または document が undefined +description: Nuxt.js で window または document が undefined のときは？ +--- + +<!-- title: Window or Document undefined --> +<!-- description: Window or Document undefined with Nuxt.js? --> + +<!-- # 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 ファイルに次のように書きます: + +```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`: --> + +`nuxt.config.js` ファイル内で当該ライブラリを [vendor バンドル](/api/configuration-build#vendor) に加えておくのを忘れないでください。 + +```js + build: { + vendor: ['external_library'] + } +``` diff --git a/ja/guide/assets.md b/ja/guide/assets.md new file mode 100644 index 000000000..800c2c6a5 --- /dev/null +++ b/ja/guide/assets.md @@ -0,0 +1,153 @@ +--- +title: アセット +description: Nuxt.js はアセットファイルを配信するために（デフォルトでは）Webpack のローダーとして vue-loader、file-loader 及び url-loader を使います。しかし Webpack の取り扱う対象としない静的ファイル専用のディレクトリを使うこともできます。 +--- + +<!-- 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. --> + +> Nuxt.js はアセットファイルを配信するために（デフォルトでは）Webpack のローダーとして vue-loader、file-loader 及び url-loader を使います。しかし Webpack の取り扱う対象としない静的ファイル専用のディレクトリを使うこともできます。 + +<!-- ## 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-template-compiler` を用いて、スタイルやテンプレートファイルを処理します。このコンパイル処理の中で、`<img src="...">` や `background: url(...)` や CSS `@import` などのすべての URL はモジュールの依存関係のように解決されます。 + +<!-- 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')`. --> + +CSS で `url('~assets/image.png')` と書いていたら、それは `require('~assets/image.png')` に変換されます。 + +<!-- Or if in my `pages/index.vue`, I use: --> + +あるいは `pages/index.vue` の中で下記のように書いていたとします: + +```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. --> + +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`. --> + +- `file-loader` はアセットファイルをどこにコピーし配置すべきか、また、ファイル名をどうすべきかを決定します。ファイル名は上手にキャッシュするためにバージョンのハッシュ値を含める等を行います。 +- `url-loader` はもしファイルサイズが閾値よりも小さければ、ファイルの内容を Base64 エンコードして埋め込みます。こうすると小さなファイルを取得するための HTTP リクエストの数を減らすことができます。一方で、もしファイルサイズが閾値よりも大きければ、自動的に `file-loader` にフォールバックします。 + +<!-- Actually, Nuxt.js default loaders configuration is: --> + +実際には Nuxt.js のデフォルトのローダー設定は次のようになっています: + +```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. --> + +ファイルサイズが 1KB を下回るファイルはすべて Base64 エンコードされて埋め込まれます。反対に 1KB を上回る画像やフォントは（`.nuxt` ディレクトリ配下の）対応するディレクトリにコピーされます。このときファイル名はうまくキャッシュさせるためにバージョンのハッシュ値を含んだものになります。 + +<!-- When launching our application with `nuxt`, our template in `pages/index.vue`: --> + +アプリケーションを `nuxt` コマンドで起動するとき、`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). --> + +これらのローダーの設定を更新したり、ローダーを使わないようにするには、[ローダー設定](/api/configuration-build#loaders) を参照してください。 + +<!-- ## 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. --> + +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`. --> + +このオプションは `robots.txt` や `sitemap.xml` などのファイルの扱いに役立ちます。 + +<!-- From your code you can then reference those files with `/` URLs: --> + +`/` URL からそれらのファイルを参照できます: + +<!-- ```html --> +<!-- <\!-- Static image from static directory -\-> --> +<!-- <img src="/my-image.png"/> --> + +<!-- <\!-- Webpacked image from assets directory -\-> --> +<!-- <img src="/assets/my-image-2.png"/> --> +<!-- ``` --> + +```html +<!-- static ディレクトリの静的な画像 --> +<img src="/my-image.png"/> + +<!-- Webpack が扱う対象となる assets ディレクトリの画像 --> +<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..8f841be3e --- /dev/null +++ b/ja/guide/async-data.md @@ -0,0 +1,192 @@ +--- +title: 非同期なデータ +description: Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために、Vue.js の 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. --> + +<!-- \> 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 --> + +## 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` メソッドはコンポーネント（ページコンポーネントに限ります）が読み込まれる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として [コンテキスト](/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> --> + +<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: --> + +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 を返す + +```js +export default { + data ({ params }) { + return axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + return { title: res.data.title } + }) + } +} +``` + +<!-- ### Using async/await --> + +### 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: --> + +data メソッドがセットされると、下記のように template の内側でデータを表示することができます: + +```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). --> + +`context` 内で利用できるキーの一覧を確認するには [ページ data API](/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 は `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' }) --> +<!-- }) --> +<!-- } --> +<!-- } --> +<!-- ``` --> + +```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: 'ページが見つかりません' }) + }) + } +} +``` + +<!-- 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) { + axios.get(`https://my-api/posts/${params.id}`) + .then((res) => { + callback(null, { title: res.data.title }) + }) + .catch((e) => { + callback({ statusCode: 404, message: 'ページが見つかりません' }) + }) + } +} +``` + +<!-- To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts). --> + +エラーページをカスタマイズするには [ビューのレイアウトセクション](/guide/views#レイアウト) を参照してください。 diff --git a/ja/guide/commands.md b/ja/guide/commands.md new file mode 100644 index 000000000..87529ae6e --- /dev/null +++ b/ja/guide/commands.md @@ -0,0 +1,137 @@ +--- +title: コマンド +description: Nuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。 +--- + +<!-- 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. --> + +> 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 | 開発サーバーを [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`: --> + +これらのコマンドを `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`). --> + +そうすれば、`npm run <command>` 経由で Nuxt.js のコマンドを実行することができます（例: `npm run dev`） + +<!-- ## Development Environment --> + +## 開発環境 + +<!-- To launch Nuxt in development mode with the hot reloading: --> + +Nuxt.js をホットリローディングする開発モードで起動するには: + +<!-- ```bash --> +<!-- nuxt --> +<!-- // OR --> +<!-- npm run dev --> +<!-- ``` --> + +```bash +nuxt +// または +npm run dev +``` + +<!-- ## Production Deployment --> + +## プロダクションのデプロイ + +<!-- Nuxt.js lets your choose between 2 modes to deploy your application: Server Rendered or Static Generated. --> + +Nuxt.js ではアプリケーションをデプロイするための 2つのモードから選べます。サーバーサイドレンダリングするモードと、静的ファイルを生成するモードです。 + +<!-- ### Server Rendered Deployment --> + +### サーバーサイドレンダリングモードのデプロイ + +<!-- 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: --> + +`package.json` では下記のように記述することが推奨されています: + +```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`. --> + +メモ: `.npmignore` または `.gitignore` 内に `.nuxt` を書いておくと良いでしょう。 + +<!-- ### Static Generated Deployment --> + +### 静的に生成されたファイルのデプロイ + +<!-- Nuxt.js gives you the possibility to host your web application on any static hosting. --> + +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. --> + +`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#動的なルーティング) を使っている場合は、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> --> + +<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> diff --git a/ja/guide/configuration.md b/ja/guide/configuration.md new file mode 100644 index 000000000..d42b852af --- /dev/null +++ b/ja/guide/configuration.md @@ -0,0 +1,141 @@ +--- +title: 設定 +description: Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしていますが nuxt.config.js で設定を上書きすることができます。 +--- + +<!-- 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 --> + +このオプションで vendor.bundle.js ファイルにモジュールを追加できます。vendor.bundle.js は app バンドルファイルのサイズを削減するために生成されるものです。外部のモジュールを使うときに役立ちます。 + +<!-- [Documentation about build integration](/api/configuration-build) --> + +[build オプションに関するドキュメント](/api/configuration-build) + +### cache + +<!-- This option lets you enable cached components for better render performances. --> + +このオプションで、レンダリングのパフォーマンスを向上させるためにコンポーネントをキャッシュできます。 + +<!-- [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). --> + +このオプションで、グローバルに利用したい（どのファイルにもインクルードしたい）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 --> + +このオプションで、Nuxt.js の開発モードまたはプロダクションモードを定義できます。 + +<!-- [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. --> + +このオプションで、クライアントサイドでもサーバーサイドでも使える環境変数を指定できます。 + +<!-- [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. --> + +このオプションは、動的なルーティングをしているアプリケーションを HTML ファイルに変換するときに使います。動的なルーティングに用いるパラメータを指定できます。 + +<!-- [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. --> + +このオプションで、アプリケーションのデフォルトのメタ情報（訳注: 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. --> + +このオプションで、Nuxt.js のデフォルトのローディングコンポーネントをカスタマイズできます。 + +<!-- [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. --> + +このオプションで、ルートの 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. --> + +このオプションで、Nuxt.js アプリケーションのワークスペースを指定できます。 + +<!-- [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. --> + +このオプションで、Nuxt.js のデフォルトの vue-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. --> + +このオプションで、アプリケーションのソースディレクトリを指定できます。 + +<!-- [Documentation about srcDir integration](/api/configuration-srcdir) --> + +[srcDir オプションに関するドキュメント](/api/configuration-srcdir) + +### transition + +<!-- This option lets you define the default properties of the pages transitions. --> + +このオプションで、ページ間のトランジションのデフォルト設定を指定できます。 + +<!-- [Documentation about transition integration](/api/configuration-transition) --> + +[transition オプションに関するドキュメント](/api/configuration-transition) diff --git a/ja/guide/contribution-guide.md b/ja/guide/contribution-guide.md new file mode 100644 index 000000000..8c9c8faf3 --- /dev/null +++ b/ja/guide/contribution-guide.md @@ -0,0 +1,37 @@ +--- +title: 貢献ガイド +description: Nuxt.js への貢献はどんなものでも大歓迎です！ +--- + +<!-- title: Contribution Guide --> +<!-- description: Any contribution to Nuxt.js is more than welcome! --> + +<!-- \> Any contribution to Nuxt.js is more than welcome! --> + +Nuxt.js への貢献はどんなものでも大歓迎です！ + +<!-- ## 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 --> + +このプロジェクトに貢献する方法のひとつは、問題に遭遇したときに詳細なレポートを送ることです。私たちは上手くまとめられたバグレポートとそれを送ってくださった方にいつも感謝しています！問題を報告する前に、ドキュメントを注意深く読み、また、遭遇した問題が既に 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 番号を入れてください diff --git a/ja/guide/development-tools.md b/ja/guide/development-tools.md new file mode 100644 index 000000000..7c07352b4 --- /dev/null +++ b/ja/guide/development-tools.md @@ -0,0 +1,265 @@ +--- +title: 開発ツール +description: Nuxt.js は開発がより楽しいものになるよう手助けします。 +--- + +<!-- 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. --> + +> アプリケーションをテストすることはウェブ開発の一部です。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 を開発依存パッケージに追加する必要があります: + +```bash +npm install --save-dev ava jsdom +``` + +<!-- And add a test script to our `package.json`: --> + +それから `package.json` に test というスクリプトを追加します: + +```javascript +"scripts": { + "test": "ava", +} +``` + +<!-- 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`: --> + +`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. --> + +`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 --> + +<!-- // 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' + +// nuxt と server インスタンスを保持します +// そうすればテスト終了時にそれらをクローズできます +let nuxt = null +let server = null + +// Nuxt.js を初期化し 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') +}) + +// 生成された 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>')) +}) + +// 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') + t.not(element, null) + t.is(element.textContent, 'Hello world!') + t.is(element.className, 'red') + t.is(window.getComputedStyle(element).color, 'red') +}) + +// サーバーを閉じて nuxt にファイル更新のリスニングを中止させる +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). --> + +jsdom はブラウザを使っていないため制約がいくつかありますが、ほとんどのテストはカバーできます。もしアプリケーションをテストするためにブラウザを使いたいときは [Nightwatch.js](http://nightwatchjs.org) を調べるとよいかもしれません。 + +## ESLint + +<!-- \> 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: --> + +とても簡単に [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: --> + +それから `.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, + parser: 'babel-eslint', + env: { + browser: true, + node: true + }, + extends: 'standard', + // *.vue ファイルを lint するために必要 + plugins: [ + 'html' + ], + // ここにカスタムルールを追加します + rules: {}, + globals: {} +} +``` + +<!-- Then, you can add a `lint` script in your `package.json`: --> + +それから `lint` スクリプトを `package.json` 内に追加できます: + +```js +"scripts": { + "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." +} +``` + +<!-- 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 は `.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">`"precommit": "npm run lint"` を package.json に追加してコードをコミットする前に自動的に lint するのはベストプラクティスのひとつです。</p> diff --git a/ja/guide/directory-structure.md b/ja/guide/directory-structure.md new file mode 100644 index 000000000..c6a3501c4 --- /dev/null +++ b/ja/guide/directory-structure.md @@ -0,0 +1,185 @@ +--- +title: ディレクトリ構造 +description: デフォルトの Nuxt.js アプリケーションの構造は、小規模のアプリケーションと大規模のアプリケーションのどちらにも適しています。 +--- + +<!-- 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. --> + +> デフォルトの Nuxt.js アプリケーションの構造は、小規模のアプリケーションと大規模のアプリケーションのどちらにも適しています。もちろん、好きなように構成することもできます。 + +<!-- ## Directories --> + +## ディレクトリ + +<!-- ### The Assets Directory --> + +### assets ディレクトリ + +<!-- The `assets` directory contains your un-compiled assets such as LESS, SASS, or JavaScript. --> + +`assets` ディレクトリには LESS や SASS、JavaScript のようなコンパイルされていないファイルを入れます。 + +<!-- [More documentation about Assets integration](/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 は `components` ディレクトリ内のコンポーネントの data メソッドについては手を加えません（訳注: 一方、Nuxt.js は `pages` ディレクトリ内のコンポーネントの data メソッドには非同期データを扱えるよう手を加えます） + +<!-- ### The Layouts Directory --> + +### layouts ディレクトリ + +<!-- The `layouts` directory contains your Application Layouts. --> + +`layouts` ディレクトリにはアプリケーションのレイアウトファイルを入れます。 + +<!-- _This directory can not be renamed._ --> + +_このディレクトリ名は変更できません。_ + +<!-- [More documentation about Layouts integration](/guide/views#layouts) --> + +レイアウトの取り扱いついてより深く理解するには [レイアウトに関するドキュメント](/guide/views#レイアウト) を参照してください。 + +<!-- ### The Middleware Directory --> + +### middleware ディレクトリ + +_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` ファイルを読み込み、アプリケーションのルーターを作成します。 + +<!-- _This directory can not be renamed._ --> + +_このディレクトリ名は変更できません。_ + +<!-- [More documentation about Pages integration](/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. --> + +`plugins` ディレクトリには、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを入れます。 + +<!-- [More documentation about Plugins integration](/guide/plugins) --> + +プラグインについてより深く理解するには [プラグインに関するドキュメント](/guide/plugins) を参照してください。 + +<!-- ### The Static Directory --> + +### static ディレクトリ + +<!-- The `static` directory contains your static files. Each files inside this directory is mapped to /. --> + +`static` ディレクトリには静的ファイルを入れます。このディレクトリ内のファイルはいずれも `/` に配置されます。 + +<!-- **Example:** /static/robots.txt is mapped as /robots.txt --> + +**例:** /static/robots.txt は /robots.txt に配置されます。 + +<!-- _This directory can not be renamed._ --> + +_このディレクトリ名は変更できません。_ + +<!-- [More documentation about Static integration](/guide/assets#static) --> + +静的ファイルの取り扱いについてより深く理解するには [静的ファイルに関するドキュメント](/guide/assets#webpack-で扱わない静的ファイル) を参照してください。 + +<!-- ### 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 ストア](http://vuex.vuejs.org) のファイルを入れます。Vuex ストアは Nuxt.js フレームワークではオプションとして実装されています。このディレクトリ内に `index.js` ファイルを作成すると、Nuxt.js フレームワーク内でこのオプションが自動的に有効になります。 + +<!-- _This directory can not be renamed._ --> + +_このディレクトリ名は変更できません。_ + +<!-- [More documentation about Store integration](/guide/vuex-store) --> + +ストアの取り扱いについてより深く理解するには [ストアに関するドキュメント](/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 についてより深く理解するには [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 | +| ~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. | --> + +| エイリアス | 使い方 | 説明 | +|-------|------|--------------| +| ~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 new file mode 100644 index 000000000..b4dd94165 --- /dev/null +++ b/ja/guide/index.md @@ -0,0 +1,188 @@ +--- +title: はじめに +description: "2016年10月25日 zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。そしてその発表から数時間後、Next.js と同じやり方で、しかし今度は Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。" +--- + +<!-- 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. --> + +> 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 ? --> + +## Nuxt.js とは何か？ + +<!-- Nuxt.js is a framework for creating Universal Vue.js Applications. --> + +Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。 + +<!-- Its main scope is **UI rendering** while abstracting away the client/server distribution. --> + +クライアントサイド用のディストリビューションと、サーバーサイド用のディストリビューションとを分離して生成している間に行う **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 はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けする、たくさんの機能を備えています。例えば、非同期でのデータのやり取りや、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 はリッチなウェブアプリケーションを構築するために下記のものを含んでいます: + +- [Vue 2](https://github.com/vuejs/vue) +- [Vue-Router](https://github.com/vuejs/vue-router) +- [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). --> + +すべて合わせてもわずか **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) も合わせて使います。 + +<!-- ## 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 --> + +- Vue ファイルで記述できること +- コードを自動的に分割すること +- サーバーサイドレンダリング +- 非同期データをハンドリングするパワフルなルーティング +- 静的ファイルの配信 +- ES6/ES7 のトランスパイレーション +- JS と CSS のバンドル及びミニファイ +- Head 要素の管理 +- 開発モードにおけるホットリローディング +- SASS, LESS, Stylus などのプリプロセッサのサポート + +<!-- ## 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 --> + +## サーバーサイドレンダリング + +<!-- You can use nuxt.js as a framework to handle all the UI rendering of your project. --> + +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 を備えており、vue-server-render は自動的にアプリケーションをサーバーサイドレンダリングするよう設定されています。 + +<!-- Take a look at [the commands](/guide/commands) to learn more about it. --> + +コマンドについてより深く理解するには [コマンド](/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 を利用するにあたって何も制限はありません。[Nuxt.js](/api/nuxt) ガイドを見てみてください。 + +<!-- ## Static Generated --> + +## 静的ファイルの生成 + +<!-- The big innovation of nuxt.js comes here: `nuxt generate` --> + +Nuxt.js による大きなイノベーションがやってきました。それが `nuxt generate` です。 + +<!-- 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/ +----| 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: --> + +最も良い例はこのウェブサイト自体です。このサイトは生成され 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` ブランチにプッシュする + +<!-- 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! --> + +さらに進めて `nuxt generate` で生成された E コマースのウェブアプリケーションを考えてみましょう。そのアプリケーションは CDN でホストされ、商品が在庫切れになったり入荷されたりするたびにアプリケーションが再生成されます。ユーザーがアプリケーション遷移している間に、在庫の状態が（再生成のおかげで）最新の状態になるのです。つまり、サーバーでいろいろなインスタンスを起動したり、キャッシュを持ったりする必要はもうないのです！ diff --git a/ja/guide/installation.md b/ja/guide/installation.md new file mode 100644 index 000000000..b13037097 --- /dev/null +++ b/ja/guide/installation.md @@ -0,0 +1,156 @@ +--- +title: インストール +description: Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは `nuxt` だけです。 +--- + +<!-- 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. --> + +Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは `nuxt` だけです。 + +<!-- ## 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` --> + +> もし [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: --> + +そしてプロジェクトを起動してください: + +```bash +$ npm run dev +``` + +<!-- 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). --> + +プロジェクトのディレクトリ構造についてより深く理解するには [ディレクトリ構造のドキュメント](/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.* --> + +*メモ: `<project-name>` の箇所は置き換えてください。* + +<!-- ### The package.json --> + +### package.json + +<!-- The project needs a `package.json` file to specify how to start `nuxt`: --> + +`nuxt` コマンドを使うように指定する `package.json` ファイルが必要です（訳注: Nuxt.js は開発サーバーを起動する `nuxt` コマンドを用意しています）: + +```json +{ + "name": "my-app", + "scripts": { + "dev": "nuxt" + } +} +``` + +<!-- `scripts` will launch Nuxt.js via `npm run dev`. --> + +上のように書いておけば `npm run dev` で Nuxt.js を起動できます。 + +<!-- ### Installing `nuxt` --> + +### `nuxt` のインストール + +<!-- Once the `package.json` has been created, add `nuxt` to the project via NPM: --> + +`package.json` を作成したら `nuxt` を npm でプロジェクトに追加しましょう: + +```bash +npm install --save nuxt +``` + +<!-- ### 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: --> + +`pages` ディレクトリを作ります: + +```bash +$ mkdir pages +``` + +<!-- then create the first page in `pages/index.vue`: --> + +それから最初のページを `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 --> + +すると、アプリケーションは 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). --> + +プロジェクトのディレクトリ構造についてより深く理解するには [ディレクトリ構造のドキュメント](/guide/directory-structure) を参照してください。 diff --git a/ja/guide/menu.json b/ja/guide/menu.json new file mode 100644 index 000000000..e981ab957 --- /dev/null +++ b/ja/guide/menu.json @@ -0,0 +1,107 @@ +[ + { + "title": "プロローグ", + "links": [ + { + "to": "", "name": "はじめに", + "contents": [ + { "to": "#nuxt-js-とは何か-", "name": "Nuxt.js とは何か？" }, + { "to": "#どのように動作するか-", "name": "どのように動作するか？" }, + { "to": "#主な機能", "name": "主な機能" }, + { "to": "#図解", "name": "図解" }, + { "to": "#サーバーサイドレンダリング", "name": "サーバーサイドレンダリング" }, + { "to": "#静的ファイルの生成", "name": "静的ファイルの生成" } + ] + }, + { "to": "/contribution-guide", "name": "貢献ガイド" }, + { "to": "/release-notes", "name": "リリースノート" } + ] + }, + { + "title": "はじめる", + "links": [ + { + "to": "/installation", "name": "インストール", + "contents": [ + { "to": "#nuxt-js-を使ったスターターテンプレート", "name": "Nuxt.js を使ったスターターテンプレート" }, + { "to": "#スクラッチから始める", "name": "スクラッチから始める" } + ] + }, + { + "to": "/directory-structure", "name": "ディレクトリ構造", + "contents": [ + { "to": "#ディレクトリ", "name": "ディレクトリ" }, + { "to": "#エイリアス-別名-", "name": "エイリアス（別名）" } + ] + }, + { "to": "/configuration", "name": "設定" }, + { + "to": "/routing", "name": "ルーティング", + "contents": [ + { "to": "#ルーティングの基礎", "name": "ルーティングの基礎" }, + { "to": "#動的なルーティング", "name": "動的なルーティング" }, + { "to": "#ネストされたルート", "name": "ネストされたルート" }, + { "to": "#動的でネストされたルート", "name": "動的でネストされたルート" }, + { "to": "#トランジション", "name": "トランジション" }, + { "to": "#ミドルウェア", "name": "ミドルウェア" } + ] + }, + { + "to": "/views", "name": "ビュー", + "contents": [ + { "to": "#ページ", "name": "ページ" }, + { "to": "#レイアウト", "name": "レイアウト" }, + { "to": "#html-の-head-情報", "name": "HTML の head 情報" } + ] + }, + { + "to": "/async-data", "name": "非同期なデータ", + "contents": [ + { "to": "#data-メソッド", "name": "data メソッド" }, + { "to": "#コンテキスト", "name": "コンテキスト" }, + { "to": "#エラー処理", "name": "エラー処理" } + ] + }, + { + "to": "/assets", "name": "アセット", + "contents": [ + { "to": "#webpack-で取り扱う", "name": "Webpack で取り扱う" }, + { "to": "#webpack-で扱わない静的ファイル", "name": "Webpack で扱わない静的ファイル" } + ] + }, + { + "to": "/plugins", "name": "プラグイン", + "contents": [ + { "to": "#外部パッケージの利用", "name": "外部パッケージの利用" }, + { "to": "#vue-プラグイン", "name": "Vue プラグイン" }, + { "to": "#クライアントサイド限定のプラグイン利用", "name": "クライアントサイド限定のプラグイン利用" } + ] + }, + { + "to": "/vuex-store", "name": "Vuex ストア", + "contents": [ + { "to": "#ストアを有効にする", "name": "ストアを有効にする" }, + { "to": "#クラシックモード", "name": "クラシックモード" }, + { "to": "#モジュールモード", "name": "モジュールモード" }, + { "to": "#fetch-メソッド", "name": "fetch メソッド" }, + { "to": "#nuxtserverinit-アクション", "name": "nuxtServerInit アクション" } + ] + }, + { + "to": "/commands", "name": "コマンド", + "contents": [ + { "to": "#コマンド一覧", "name": "コマンド一覧" }, + { "to": "#開発環境", "name": "開発環境" }, + { "to": "#プロダクションのデプロイ", "name": "プロダクションのデプロイ" } + ] + }, + { + "to": "/development-tools", "name": "開発ツール", + "contents": [ + { "to": "#エンドツーエンドテスト", "name": "エンドツーエンドテスト" }, + { "to": "#eslint", "name": "ESLint" } + ] + } + ] + } +] diff --git a/ja/guide/plugins.md b/ja/guide/plugins.md new file mode 100644 index 000000000..d0202a1fa --- /dev/null +++ b/ja/guide/plugins.md @@ -0,0 +1,143 @@ +--- +title: プラグイン +description: Nuxt.js では js プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。プラグインとして自前のライブラリを指定することも、外部のモジュールを指定することもできます。 +--- + +<!-- 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. --> + +> 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> + +<!-- ## 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: --> + +そうすると次のようにページ内で直接それを使うことができます: + +```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`: --> + +ただしここで **ひとつ問題があり**、もし別のページでも import axios と書くと、axios は重複してバンドルファイルに含まれてしまいます。そこで `axios` をアプリケーション内で一度だけインクルードするには `nuxt.config.js` 内で `build.vendor` キーを使います: + +```js +module.exports = { + build: { + vendor: ['axios'] + } +} +``` + +<!-- Then, I can import `axios` anywhere without having to worry about making the bundle bigger! --> + +こうすれば、バンドルファイルが膨れ上がることなく、どの場所にも `import 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-notifications](https://github.com/se-panfilov/vue-notifications) を使いたいときには、アプリケーションを起動する前にプラグインをセットアップする必要があります。 + +<!-- File `plugins/vue-notifications.js`: --> + +そのためには `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`: --> + +それから `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). --> + +`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 というバンドルファイルに含まれます。しかし `vue-notifications` はライブラリなので、vendor というバンドルファイルに含めて、うまくキャッシュさせたいと考えます。 + +<!-- We can update our `nuxt.config.js` to add `vue-notifications` in the vendor bundle: --> + +そうするには `nuxt.config.js` を更新して vendor というバンドルファイルの設定の中に `vue-notifications` を入れます: + +```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. --> + +プラグインのいくつかは **ブラウザでのみ** 動かしたいとします。その場合は `process.BROWSER_BUILD` 変数を使って、あるプラグインをクライアントサイドで動作させることが可能です。 + +<!-- 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. --> + +逆に、サーバーサイドでのみライブラリを読み込む必要がある場合は、`process.SERVER_BUILD` 変数を使うことができます。これは Webpack が `server.bundle.js` ファイルを作成するタイミングで `true` がセットされる変数です。 diff --git a/ja/guide/routing.md b/ja/guide/routing.md new file mode 100644 index 000000000..a4b94c548 --- /dev/null +++ b/ja/guide/routing.md @@ -0,0 +1,425 @@ +--- +title: ルーティング +description: Nuxt.js はウェブアプリケーションのルーティングを生成するためにファイルシステムを利用します。それは PHP がルーティングを生成するようにシンプルです。 +--- + +<!-- 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. --> + +> Nuxt.js は `pages` ディレクトリ内の Vue ファイルの木構造に沿って、自動的に [vue-router](https://github.com/vuejs/vue-router) の設定を生成します。 + +<!-- ## 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**. --> + +パラメータを使って動的なルーティングを定義するには .vue ファイル名またはディレクトリ名に **アンダースコアのプレフィックス** を付ける必要があります。 + +<!-- 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. --> + +`user-id` と名付けられたルートに `:id?` というパスがありますが、これはこの `:id` が必須ではないことを表します。もし必須にしたい場合は `users/_id` ディレクトリ内に `index.vue` ファイルを作成してください。 + +<!-- ### Validate Route params --> + +### ルーティングのパラメータのバリデーション + +<!-- Nuxt.js lets you define a validator method inside your dynamic route component. --> + +Nuxt.js では、動的なルーティングをするコンポーネント内に、パラメータをバリデーションするメソッドを定義することができます。 + +<!-- In this example: `pages/users/_id.vue` --> + +例えば `pages/users/_id.vue` 内にこのように書きます: + +<!-- ```js --> +<!-- export default { --> +<!-- validate ({ params }) { --> +<!-- // Must be a number --> +<!-- return /^\d+$/.test(params.id) --> +<!-- } --> +<!-- } --> +<!-- ``` --> + +```js +export default { + validate ({ params }) { + // 数値でなければならない + return /^\d+$/.test(params.id) + } +} +``` + +<!-- If the validate method does not return `true`, Nuxt.js will automatically load the 404 error page. --> + +もしバリデーションのメソッドが `true` を返さなかった場合は、Nuxt.js は自動的に 404 エラーページをロードします。 + +<!-- More information about the validate method: [API Pages validate](/api/pages-validate) --> + +バリデーションのメソッドについてより深く理解したい場合は [ページバリデーションの API](/api/pages-validate) を参照してください。 + +<!-- ## Nested Routes --> + +## ネストされたルート + +<!-- 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/ +--| 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. --> + +あまり頻繁に使うべきではありませんが、Nuxt.js では動的な親ルーティングの中に動的な子ルーティングを持つことが可能です。 + +<!-- 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. --> + +Nuxt.js では [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components) コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。 + +<!-- ### Global Settings --> + +### グローバルな設定 + +<!-- <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 を書きます: + +```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: --> + +`nuxt.config.js` ファイルに CSS ファイルのパスを指定します: + +```js +module.exports = { + css: [ + 'assets/main.css' + ] +} +``` + +<!-- More information about the transition key: [API Configuration transition](/api/pages-transition) --> + +トランジションについてより深く理解したい場合は [トランジション設定 API](/api/pages-transition) を参照してください。 + +<!-- ### 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 定義を追加します: + +```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: --> + +それから、このページトランジションを利用するためのクラス名を transition プロパティで指定します: + +```js +export default { + transition: 'test' +} +``` + +<!-- More information about the transition property: [API Pages transition](/api/pages-transition) --> + +トランジションプロパティについてより深く理解したい場合は [ページトランジション API](/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). --> + +**ミドルウェアは `middleware/` ディレクトリに入れます。** ファイル名はミドルウェアの名前となります（`middleware/auth.js` は `auth` ミドルウェアになります） + +<!-- A middleware receive [the context](/api#context) as first argument: --> + +ミドルウェアは第一引数として [コンテキスト](/api#コンテキスト) を受け取ります: + +```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 --> + +ミドルウェアは下記の順に実行されます: + +1. `nuxt.config.js` +2. マッチしたレイアウト +3. マッチしたページ + +<!-- 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' + +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` やレイアウトもしくはページ内で `middleware` キーを使います: + +`nuxt.config.js` + +```js +module.exports = { + router: { + middleware: 'stats' + } +} +``` + +<!-- 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. --> + +ミドルウェアを使った実際の例を見たい場合は GitHub 上にある [example-auth0](https://github.com/nuxt/example-auth0) を見てみてください。 diff --git a/ja/guide/views.md b/ja/guide/views.md new file mode 100644 index 000000000..eff46d818 --- /dev/null +++ b/ja/guide/views.md @@ -0,0 +1,311 @@ +--- +title: ビュー +description: このセクションでは Nuxt.js アプリケーションの特定のルートにデータとビューを設定するために必要なことすべてを説明します（ページ、レイアウト、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) --> + +<!-- \> 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 タグのメタ情報などを含みます） + +<!-- ## 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> + <h1 class="red">Hello {{ name }}!</h1> +</template> + +<script> +export default { + data (context) { + // コンポーネントがロードされる前に毎回呼び出されます + return { name: 'World' } + }, + fetch () { + // fetch メソッドは、ページがレンダリングされる前に、ストアにデータを入れるために使われます + }, + head () { + // このページのメタタグをセットします + }, + // さらにいろいろな機能が続きます... + ... +} +</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). | --> + +| 属性 | 説明 | +|-----------|-------------| +| 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#ネストされたルート) で使われます | +| validate | [動的なルーティング](/guide/routing#動的なルーティング) のためのバリデーション関数です | +| middleware | このページのためにミドルウェアを設定し、ミドルウェアはページがレンダリングされる前に呼び出されます。[ルーティングのミドルウェア](/guide/routing#ミドルウェア) を参照してください | + +<!-- More information about the pages properties usage: [API Pages](/api) --> + +ページのプロパティの使い方についてより深く理解するには [ページ API](/api) を参照してください。 + +<!-- ## Layouts --> + +## レイアウト + +<!-- Nuxt.js lets you extend the main layout or create custom layouts by adding them in the `layouts` directory. --> + +Nuxt.js ではメインレイアウトを拡張したり、カスタムレイアウトを `layouts` ディレクトリに入れてレイアウトを追加したりすることができます。 + +<!-- ### Default Layout --> + +### デフォルトレイアウト + +<!-- You can extend the main layout by adding a `layouts/default.vue` file. --> + +`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: --> + +デフォルトのレイアウトのソースコードは下記のようになっています: + +```html +<template> + <nuxt/> +</template> +``` + +<!-- ### 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`: --> + +`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> --> +<!-- ``` --> + +```html +<template> + <div class="container"> + <h1 v-if="error.statusCode === 404">ページが見つかりません</h1> + <h1 v-else>エラーが発生しました</h1> + <nuxt-link to="/">ホーム</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. --> + +`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> --> +<!-- ``` --> + +```html +<template> + <div> + <div>ブログのナビゲーションバーをここに設置します</div> + <nuxt/> + </div> +</template> +``` + +<!-- 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 { + layout: 'blog' +} +</script> +``` + +<!-- 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 情報 + +<!-- Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your application. --> + +Nuxt.js はアプリケーションの `headers` 及び `html attributes` を更新するために [vue-meta](https://github.com/declandewet/vue-meta) を使います。 + +<!-- 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 --> +<!-- } --> +<!-- ``` --> + +```js +{ + keyName: 'head', // vue-meta がメタ情報を探すためのコンポーネントオプションの名前 + attribute: 'n-head', // vue-meta がタグを監視するためにタグに追加する属性名 + ssrAttribute: 'n-head-ssr', // メタ情報が既にサーバーサイドでレンダリングされていることを vue-meta に知らせるための属性名 + tagIDKeyName: 'hid' // vue-meta がタグを上書きすべきかタグを追加すべきか判断するために用いるプロパティ名 +} +``` + +<!-- ### 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: --> + +カスタム viewport 及び Google フォントを定義する例: + +```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). --> + +`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 Pages head](/api/pages-head) --> + +特定のページにメタタグを設定する方法について [ページ head API](/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">子コンポーネントで利用されたときにメタ情報が重複してしまうことを避けるために `hid` キーでユニーク識別子を与えてください。また、これについてより深く理解するには [こちら](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..35b5ffa13 --- /dev/null +++ b/ja/guide/vuex-store.md @@ -0,0 +1,248 @@ +--- +title: Vuex ストア +description: 状態を管理してくれる Vuex ストアは、あらゆる大規模アプリケーションにとても役に立ちます。Nuxt.js が Vuex をコアに組み入れたのはそのような理由からです。 +--- + +<!-- 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. --> + +> 状態を管理してくれる Vuex ストアは、あらゆる大規模アプリケーションにとても役に立ちます。Nuxt.js が [Vuex](https://github.com/vuejs/vuex) をコアに組み入れたのはそのような理由からです。 + +<!-- ## Activate the Store --> + +## ストアを有効にする + +<!-- Nuxt.js will look for the `store` directory, if it exists, it will: --> + +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` ファイルが [モジュール](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' + +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 --> + +> `vuex` は Nuxt.js によって取り込まれているため、別途インストールする必要はありません。 + +<!-- We can now use `this.$store` inside our components: --> + +クラシックモードを有効にすると、コンポーネント内で `this.$store` を使うことができます: + +```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. --> + +> Nuxt.js では `store` ディレクトリ内にモジュールと対応するファイルを持つことができます。 + +<!-- 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 = { + counter: 0 +} + +export const mutations = { + increment (state) { + state.counter++ + } +} +``` + +<!-- Then, you can have a `store/todos.js` file: --> + +また、次のような `store/todos.js` ファイルを作成できます: + +```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: --> + +そして `pages/todos.vue` 内で `todos` モジュールを下記のように使うことができます: + +```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> --> + +<div class="Alert">ストアインスタンスをエクスポートすることでモジュールを持つこともできます。その際にはモジュールをストアに手動で追加する必要があります。</div> + +<!-- ## 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. --> + +fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては data メソッドとよく似ています。 + +<!-- More information about the fetch method: [API Pages fetch](/api/pages-fetch) --> + +fetch メソッドについてより深く理解するためには [ページの fetch メソッド API](/api/pages-fetch) を参照してください。 + +<!-- ## 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 はそれをコンテキストとともに呼び出します（ただしサーバーサイドに限ります）。サーバーサイドからクライアントサイドに直接渡したいデータがあるときに便利です。 + +<!-- 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: { + 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. --> + +> 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. --> + +コンテキストは `nuxtServerInit` へ第二引数として渡されます。`context.redirect()` や `context.error()` が除外される点を除いては `data` メソッドや `fetch` メソッドと共通しています。 diff --git a/ja/lang.json b/ja/lang.json new file mode 100644 index 000000000..f722a3d46 --- /dev/null +++ b/ja/lang.json @@ -0,0 +1,50 @@ +{ + "iso": "ja", + "links": { + "api": "API", + "blog": "ブログ", + "chat": "チャット", + "documentation": "ドキュメント", + "download": "ダウンロード", + "examples": "例", + "ecosystem": "エコシステム", + "faq": "FAQ", + "get_started": "はじめる", + "github": "Github", + "guide": "ガイド", + "homepage": "ホーム", + "live_demo": "ライブデモ", + "live_edit": "ライブ編集", + "twitter": "Twitter", + "vuejs": "Vue.js", + "vue_jobs": "Vue Jobs" + }, + "text": { + "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": "ユニバーサル Vue.js アプリケーション", + "meta": { + "title": "Nuxt.js - ユニバーサル Vue.js アプリケーション", + "description": "Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的ファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです！" + } + }, + "footer": { + "authors": "Made by Chopin Brothers" + }, + "guide": { + "release_notes": "リリースノート", + "contribute": "間違いを見つけた、またはドキュメントに貢献したいですか？", + "edit_on_github": "GitHub でこのページを編集する" + }, + "examples": { + "source_code": "ソースコード" + } +}