update docs

Author: kazupon

docs/guide/advanced/optimization.md

@@ -1,91 +1,183 @@
 # Optimization
 
 
-## Improve performance and reduce bundle size with runtime build only
+## Performance
 
 As described in "[installation](../../installation##from-cdn-or-without-a-bundler)" section, Vue I18n offer the following two built ES modules for Bundler.
 
 - message compiler + runtime: **`vue-i18n.esm-bundler.js`**
 - runtime only: **`vue-i18n.runtime.esm-bundler.js`**
 
-For bundler, it’s configured to bundle `vue-i18n.esm-bundler.js` by default. If you want to reduce the bundle size further, you can configure the bundler to use `vue-i18n.runtime.esm-bundler.js`, which is runtime only.
-
-The use of this ES Module means that **all locale messages have to pre-compile to Message functions**.
+For bundler, it’s configured to bundle `vue-i18n.esm-bundler.js` with [`@intlify/bundle-tools`](https://github.com/intlify/bundle-tools#intlifybundle-tools) as default. If you want to reduce the bundle size further, you can configure the bundler to use `vue-i18n.runtime.esm-bundler.js`, which is runtime only.
 
 :::danger NOTE
 IF [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is enabled, `vue-i18n.esm-bundler.js` would not work with compiler due to `eval` statements. These statements violate the `default-src 'self'` header. Instead you need to use `vue-i18n.runtime.esm-bundler.js`.
 :::
 
-### vite
+The use of this ES Module means that **all locale messages have to pre-compile to Message functions**. what this means it improves performance because vue-i18n just only execute Message functions, so no compilation.
+
+Also, the message compiler is not bundled, therefore **bundle size can be reduced**
+
+## How to configure
+
+We can configure these modules with module path using the module resolve alias feature (e.g. `resolve.alias` vite and webpack) of some bundler, but It takes time and effort.
+Intlify project provides plugins/loaders for some bundlers, for simplicity
+
+### `@intlify/unplugin-vue-i18n`
 
-In vite, use `alias` option as below:
+[`unplugin`](https://github.com/unjs/unplugin) is an unified plugin system for bundle tool such as vite, webpack, rollup, esbuild and etc.
+
+Intlify project is providing [`@intlify/unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n) for vite and webpack.
+
+If you do a production build, Vue I18n will automatically bundle the runtime only module
+
+#### Install plugin
+
+```sh
+npm install --save-dev @intlify/unplugin-vue-i18n
+```
+
+#### Configure plugin for vite
 
 ```js
-import path from 'path'
+// vite.config.ts
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueI18n from '@intlify/vite-plugin-vue-i18n'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'url'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 
 export default defineConfig({
-  // ...
-  alias: {
-    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
-  },
+  /* ... */
   plugins: [
-    vue(),
-    vueI18n({
-      include: path.resolve(__dirname, './path/to/src/locales/**')
-    })
+    /* ... */
+    VueI18nPlugin({
+      /* options */
+      // locale messages resourece pre-compile option
+      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
+    }),
   ],
-  // ...
 })
 ```
 
-:::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/bundle-tools/tree/main/packages/vite-plugin-vue-i18n).
+#### Configure plugin for webpack
+
+```js
+// webpack.config.js
+const paht = require('path')
+const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')
+
+module.exports = {
+  /* ... */
+  plugins: [
+    /* ... */
+    VueI18nPlugin({
+      /* options */
+      // locale messages resourece pre-compile option
+      include: path.resolve(__dirname, './path/to/src/locales/**'),
+    })
+  ]
+}
+```
+
+#### More configuration
+
+About optoins and features, see the deital [page](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#intlifyunplugin-vue-i18n)
+
+### `@intlify/vite-plugin-vue-i18n`
+
+[`vite`](https://vitejs.dev/) is next generation frontend tooling.
+
+Intlify project is providing [`@intlify/vite-plugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n)
+
+If you do a production build, Vue I18n will automatically bundle the runtime only module
+
+:::warning NOTICE
+This plugin will be deprecated in the near future, because we can replace `@intlify/unplugin-vue-i18n`.
 :::
 
-### webpack
+#### Install plugin
+
+```sh
+npm install --save-dev @intlify/vite-plugin-vue-i18n
+```
 
-In webpack, use `resolve.alias` as below:
+#### Configure
 
 ```js
-module.exports = {
-  // ...
-  resolve: {
-    alias: {
-      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
-    }
-  },
-  // ...
-}
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'url'
+import vueI18n from '@intlify/vite-plugin-vue-i18n'
+
+export default defineConfig({
+  /* ... */
+  plugins: [
+    /* ... */
+    vueI18n({
+      /* options */
+      // locale messages resourece pre-compile option
+      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
+    }),
+  ]
+})
 ```
 
-:::tip NOTE
-For more information about pre-compiling locale messages, see [`@intlify/vue-i18n-loader`](https://github.com/intlify/vue-i18n-loader)
+#### More configuration
+
+About optoins and features, see the deital [page](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n)
+
+### `@intlify/vue-i18n-loader`
+
+[webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. 
+
+Intlify project is providing [`@intlify/vue-i18n-loader`](https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader)
+
+:::danger NOTICE
+This plugin will be deprecated in the near future, because we can replace `@intlify/unplugin-vue-i18n`.
 :::
 
-### rollup
+#### Install loader
 
-In rollup, use [`@rollup/plugin-alias`](https://github.com/rollup/plugins/tree/master/packages/alias) as below:
+```sh
+npm install --save-dev @intlify/vue-i18n-loader
+```
+
+#### Configure
 
 ```js
-import path from 'path'
-import alias from '@rollup/plugin-alias'
+// webpack.config.js
+const paht = require('path')
 
 module.exports = {
-  // ...
-  plugins: [
-    alias({
-      entries: {
-        'vue-i18n': path.resolve(__dirname, './node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js')
-      }
-    })
-  ],
-  // ...
+  /* ... */
+  resolve: {
+    alias: {
+      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+    }
+  },
+  /* ... */
+  module: {
+    rules: [
+      // ...
+      {
+        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
+        type: 'javascript/auto',
+        loader: '@intlify/vue-i18n-loader',
+        include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
+          path.resolve(__dirname, 'src/locales')
+        ]
+      },
+      // ...
+    ]
+  }
 }
 ```
 
+#### More configuration
+
+About optoins and features, see the deital [page](https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader)
+
 ### Quasar CLI
 
 No need to do anything. [Quasar CLI](https://quasar.dev) takes care of the optimizations for you.

docs/installation.md

@@ -73,13 +73,13 @@ You will have to clone directly from GitHub and build `vue-i18n` yourself if you
 ```sh
 git clone git@github.com:intlify/vue-i18n-next.git node_modules/vue-i18n
 cd node_modules/vue-i18n
-npm install # or `yarn`
-npm run build  # or `yarn run build`
+npm install
+npm run build
 ```
 
 
 ## Explanation of Different Builds
-In the [dist/ directory of the npm package](https://cdn.jsdelivr.net/npm/[email protected].0/dist/) you will find many different builds of Vue I18n. Here is an overview of which dist file should be used depending on the use-case.
+In the [dist/ directory of the npm package](https://cdn.jsdelivr.net/npm/[email protected].10/dist/) you will find many different builds of Vue I18n. Here is an overview of which dist file should be used depending on the use-case.
 
 ### From CDN or without a Bundler
 
@@ -115,9 +115,9 @@ Global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built
 :::tip NOTE
 If you use `vue-i18n.runtime.esm-bundler.js`, you will need to precompile all locale messages, and you can do that with `.json` (`.json5`) or `.yaml`, i18n custom blocks to manage i18n resources. Therefore, you can be going to pre-compile all locale messages with bundler and the following loader / plugin.
 
-- [`@intlify/vue-i18n-loader`](https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader)
-- [`@intlify/rollup-plugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/rollup-plugin-vue-i18n)
+- [`@intlify/unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n)
 - [`@intlify/vite-plugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n)
+- [`@intlify/vue-i18n-loader`](https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader)
 :::
 
 ### For Node.js (Server-Side)

examples/bridge/legacy/scope/local.html

@@ -87,7 +87,7 @@ <h1>Child</h1>
       )
 
       Vue.use(i18n)
-      
+
       const app = new Vue({ i18n, components: { Child } })
       app.$mount('#app')
     </script>