diff --git a/docs/ja/configurations/custom-blocks.md b/docs/ja/configurations/custom-blocks.md index a9d41d00c..9b56edba1 100644 --- a/docs/ja/configurations/custom-blocks.md +++ b/docs/ja/configurations/custom-blocks.md @@ -4,9 +4,9 @@ `*.vue` ファイル内にカスタム言語ブロックを定義することが出来ます。カスタムブロックの内容は `vue-loader` のオブジェクトで指定された loader によって処理され、次にコンポーネントモジュールによって要求されます。この設定は `lang` 属性の代わりにタグ名を使用する点をのぞいて[高度な loader の設定](../configurations/advanced.md)に記載されたものと似ています。 -もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。 +もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。加えて、見つかった loader が関数を返す場合は、その関数は `*.vue` ファイルのコンポーネントをパラメータとして呼び出します。 -## 例 +## 単一ドキュメントファイルの例 全ての `` カスタムブロックを一つのドキュメントファイルに展開する例を示します: @@ -65,3 +65,69 @@ module.exports = { ] } ``` + +## 実行時に利用可能なドキュメント + +``カスタムブロックをコンポーネントに注入して実行時に利用できるようにする例です。 + +#### docs-loader.js + +カスタムブロックコンテンツを注入するためには、カスタム loader が必要です: + +``` js +module.exports = function (source, map) { + this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' + + JSON.stringify(source) + + '}', map) +} +``` + +#### webpack.config.js + +次に、`` カスタムブロック用のカスタム loader を使用するように webpack を設定します。 + +``` js +const docsLoader = require.resolve('./custom-loaders/docs-loader.js') + +module.exports = { + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue', + options: { + loaders: { + 'docs': docsLoader + } + } + } + ] + } +} +``` + +#### component.vue + +実行時にインポートされたコンポーネントの `` ブロックの内容にアクセスできるようになりました。 + +``` html + + + +``` diff --git a/docs/ja/start/spec.md b/docs/ja/start/spec.md index cc27296a8..8bca22041 100644 --- a/docs/ja/start/spec.md +++ b/docs/ja/start/spec.md @@ -94,6 +94,13 @@ export default {