diff --git a/content/ja/guides/directory-structure/plugins.md b/content/ja/guides/directory-structure/plugins.md index 1e60be8896..b9e5a1434f 100644 --- a/content/ja/guides/directory-structure/plugins.md +++ b/content/ja/guides/directory-structure/plugins.md @@ -1,6 +1,6 @@ --- title: plugins -description: The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. +description: `plugins` ディレクトリには、ルート Vue.js アプリケーションをインスタンス化する前に実行する Javascript プラグインが含まれています。 position: 11 category: directory-structure csb_link_plugins_client: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_client?fontsize=14&hidenavigation=1&theme=dark @@ -10,60 +10,60 @@ csb_link_plugins_vue: https://codesandbox.io/embed/github/nuxt-academy/guides-ex img: /docs/2.x/plugins.svg imgAlt: modules-servermiddleware-plugins-in-nuxt-js questions: - - question: The `plugins` directory contains your Javascript plugins that you want to run + - question: `plugins` ディレクトリには、実行する Javascript プラグインが含まれています answers: - - before instantiating the root Vue.js Application - - while instantiating the root Vue.js Application - - after instantiating the root Vue.js Application - correctAnswer: before instantiating the root Vue.js Application - - question: The Vue.js hooks beforeCreate and created are called + - ルート Vue.js アプリケーションをインスタンス化する前 + - ルート Vue.js アプリケーションのインスタンス化中 + - ルート Vue.js アプリケーションをインスタンス化した後 + correctAnswer: ルート Vue.js アプリケーションをインスタンス化する前 + - question: beforeCreate および created の Vue.js フックが呼び出される answers: - - only from client side - - only from server side - - from both client side and server side - correctAnswer: from both client side and server side - - question: Every time you want to use use Vue.use() you should create a file in which directory? + - クライアントサイドからのみ + - サーバーサイドからのみ + - クライアントサイドとサーバーサイドの両方から + correctAnswer: クライアントサイドとサーバーサイドの両方から + - question: Vue.use() を使用するたびに、どのディレクトリにファイルを作成する必要がありますか？ answers: - vue - plugins - vuePlugins correctAnswer: plugins - - question: Where do you add the plugin so it is imported to your main application? + - question: プラグインをどこに追加して、メインアプリケーションにインポートしますか？ answers: - - in your layouts page - - in the nuxt.config.js file - - you don't have to, it is automatically imported - correctAnswer: in the nuxt.config.js file - - question: Some plugins might work only in the browser? + - レイアウトページに + - nuxt.config.js ファイル内に + - あなたがする必要はなく、それは自動的にインポートされる + correctAnswer: nuxt.config.js ファイル内に + - question: 一部のプラグインはブラウザでのみ機能する可能性がありますか？ answers: - - true - - false - correctAnswer: true - - question: What extension can you apply if you want your plugin to only run on the server? + - 正 + - 偽 + correctAnswer: 正 + - question: プラグインをサーバー上のみで実行する場合、どの拡張機能を適用できますか？ answers: - .serverside.js - .ssr.js - .server.js correctAnswer: .server.js - - question: What two modes can you use for your plugins? + - question: プラグインに使用できる2つのモードは何ですか？ answers: - - server and client - - ssr and client - - server-side and client-side - correctAnswer: server and client - - question: What do you do to make functions or values available across your app? + - サーバーとクライアント + - ssrとクライアント + - サーバーサイドとクライアントサイド + correctAnswer: サーバーとクライアント + - question: アプリ全体で関数や値を利用できるようにするために何をしますか？ answers: - - create a plugin - - use the inject method - - create a module - correctAnswer: use the inject method - - question: As a convention what should you prefix your inject functions with? + - プラグインを作成する + - インジェクトメソッドを使用する + - モジュールを作成する + correctAnswer: インジェクトメソッドを使用する + - question: 慣例として、注入関数の前に何を付ける必要がありますか？ answers: - $ - _ - ':' correctAnswer: $ - - question: To change the order of your plugins what property do you use? + - question: プラグインの順序を変更するには、どのプロパティを使用しますか？ answers: - orderPlugins - extendPlugins @@ -73,13 +73,13 @@ questions: -The `plugins` directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to `plugins` in `nuxt.config.js`. +`plugins` ディレクトリにはルート Vue.js アプリケーションがインスタンス化する前に実行する Javascript プラグインが含まれています。これは Vue プラグインを追加し、関数や定数を導入する場所です。`Vue.use()` を使用する必要がある時は都度 `plugins/` ファイルを作成し、`nuxt.config.js` の `plugins` にそのパスを追加する必要があります。 -## External Packages +## 外部パッケージ -You may want to use external packages/modules in your application (one great example is [axios](https://axios.nuxtjs.org/)) for making HTTP requests for both server and client. +サーバーとクライアント両方に HTTP リクエストを行うためには、アプリケーションで外部パッケージ/モジュール（著名な例は [axios](https://axios.nuxtjs.org/) です）を使用することをお勧めします。 -First, install it via npm or Yarn. +はじめに、npm か Yarn を介してインストールします。 @@ -98,7 +98,7 @@ npm install @nuxtjs/axios -You can configure for example the axios interceptors to react on possible errors from your API calls across the application. In this example we redirect the user to a custom error page called sorry when we get a 500 status error from our API. +例えば、アプリケーション全体の API 呼び出しから発生する可能性のあるエラーに対応するよう、axios インターセプターを設定できます。この例では、API から 500 ステータスエラーが発生した時、sorry というカスタムエラーページにユーザをリダイレクトします。 ```js{}[plugins/axios.js] export default function ({ $axios, redirect }) { @@ -110,7 +110,7 @@ export default function ({ $axios, redirect }) { } ``` -Last but not least, add the module and the newly created plugin to the project configuration. +最後になりますが、モジュールと新しく作成したプラグインをプロジェクト構成に追加します。 ```js{}[nuxt.config.js] module.exports = { @@ -119,7 +119,7 @@ module.exports = { } ``` -Then we can use it directly in your page components: +そのあとページコンポーネントで直接使用できます: ```js{}[pages/index.vue]