feat(docs): add usage with Quasar CLI (#773)

* feat(docs): add usage with Quasar CLI

* feat(docs): small tweaks to Quasar CLI usage

* feat(docs): further tweaks for Quasar CLI usage

Author: rstoenescu

docs/guide/advanced/optimization.md

@@ -86,6 +86,9 @@ module.exports = {
 }
 ```
 
+### Quasar CLI
+
+No need to do anything. [Quasar CLI](https://quasar.dev) takes care of the optimizations for you.
 
 ## Reduce bundle size with feature build flags
 
@@ -104,6 +107,7 @@ The build will work without configuring these flags, however it is **strongly re
 - webpack: use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)
 - Rollup: use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
 - Vite: configured by default, but can be overwritten using the [`define` option](https://github.com/vitejs/vite/blob/a4133c073e640b17276b2de6e91a6857bdf382e1/src/node/config.ts#L72-L76)
+- Quasar CLI: configured by default, but can be overwritten using quasar.conf.js > build > [env option](https://quasar.dev/quasar-cli/handling-process-env#adding-to-process-env)
 
 :::tip NOTE
 If you are using Vite, you can do the same thing by specifying the option in the [plugin provided officially](https://github.com/intlify/vite-plugin-vue-i18n).

docs/guide/advanced/sfc.md

@@ -529,3 +529,36 @@ module.exports = {
   }
 }
 ```
+
+## Quasar CLI
+
+If we want to add support to the `<i18n>` tag inside a single file component in a [Quasar CLI](https://quasar.dev) project then we need to modify the existing configuration.
+
+In order to do that we need to edit `quasar.conf.js` at the root of our project:
+
+```js
+build: {
+  chainWebpack: chain => {
+    chain.module
+      .rule('i18n-resource')
+        .test(/\.(json5?|ya?ml)$/)
+          .include.add(path.resolve(__dirname, './src/i18n'))
+          .end()
+        .type('javascript/auto')
+        .use('i18n-resource')
+          .loader('@intlify/vue-i18n-loader')
+    chain.module
+      .rule('i18n')
+        .resourceQuery(/blockType=i18n/)
+        .type('javascript/auto')
+        .use('i18n')
+          .loader('@intlify/vue-i18n-loader')
+  }
+}
+```
+
+We also need to make sure that we've installed `@intlify/vue-i18n-loader`:
+
+```sh
+npm i --save-dev @intlify/vue-i18n-loader
+```

docs/ja/guide/advanced/optimization.md

@@ -86,6 +86,9 @@ module.exports = {
 }
 ```
 
+### Quasar CLI
+
+No need to do anything. [Quasar CLI](https://quasar.dev) takes care of the optimizations for you.
 
 ## Reduce bundle size with feature build flags
 
@@ -100,6 +103,7 @@ The build will work without configuring these flags, however it is **strongly re
 - webpack: use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)
 - Rollup: use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
 - Vite: configured by default, but can be overwritten using the [`define` option](https://github.com/vitejs/vite/blob/a4133c073e640b17276b2de6e91a6857bdf382e1/src/node/config.ts#L72-L76)
+- Quasar CLI: configured by default, but can be overwritten using quasar.conf.js > build > [env option](https://quasar.dev/quasar-cli/handling-process-env#adding-to-process-env)
 
 :::tip NOTE
 If you are using Vite, you can do the same thing by specifying the option in the [plugin provided officially](https://github.com/intlify/vite-plugin-vue-i18n).

docs/ja/guide/advanced/sfc.md

@@ -530,3 +530,36 @@ module.exports = {
   }
 }
 ```
+
+## Quasar CLI
+
+If we want to add support to the `<i18n>` tag inside a single file component in a [Quasar CLI](https://quasar.dev) project then we need to modify the existing configuration.
+
+In order to do that we need to edit `quasar.conf.js` at the root of our project:
+
+```js
+build: {
+  chainWebpack: chain => {
+    chain.module
+      .rule('i18n-resource')
+        .test(/\.(json5?|ya?ml)$/)
+          .include.add(path.resolve(__dirname, './src/i18n'))
+          .end()
+        .type('javascript/auto')
+        .use('i18n-resource')
+          .loader('@intlify/vue-i18n-loader')
+    chain.module
+      .rule('i18n')
+        .resourceQuery(/blockType=i18n/)
+        .type('javascript/auto')
+        .use('i18n')
+          .loader('@intlify/vue-i18n-loader')
+  }
+}
+```
+
+We also need to make sure that we've installed `@intlify/vue-i18n-loader`:
+
+```sh
+npm i --save-dev @intlify/vue-i18n-loader
+```