diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 71fd18d74..1e3de5b91 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -67,7 +67,7 @@ function nav() {
     },
     {
       text: 'Roadmap',
-      link: '/guide/roadmap'
+      link: '/guide/extra/roadmap'
     },
     {
       text: 'v9.x',
@@ -90,17 +90,9 @@ function sidebarGuide() {
           text: 'What is Vue I18n?',
           link: '/guide/introduction'
         },
-        {
-          text: 'Getting Started',
-          link: '/guide/'
-        },
         {
           text: 'Installation',
           link: '/guide/installation'
-        },
-        {
-          text: 'Roadmap',
-          link: '/guide/roadmap'
         }
       ]
     },
@@ -108,6 +100,10 @@ function sidebarGuide() {
       text: 'Essentials',
       collapsible: true,
       items: [
+        {
+          text: 'Getting Started',
+          link: '/guide/essentials/started',
+        },
         {
           text: 'Message Format Syntax',
           link: '/guide/essentials/syntax'
@@ -217,13 +213,20 @@ function sidebarGuide() {
       ]
     },
     {
-      text: 'v8.x',
+      text: 'Extra Topics',
       collapsible: true,
-      collapsed: true,
       items: [
+        {
+          text: 'Different Distribution files',
+          link: '/guide/extra/dist'
+        },
         {
           text: 'Documentation for v8.x',
-          link: '/guide/v8-docs'
+          link: '/guide/extra/v8-docs'
+        },
+        {
+          text: 'Roadmap',
+          link: '/guide/extra/roadmap'
         }
       ]
     }
diff --git a/docs/.vitepress/theme/styles/global.css b/docs/.vitepress/theme/styles/global.css
index 6516422db..8e4b7f7a6 100644
--- a/docs/.vitepress/theme/styles/global.css
+++ b/docs/.vitepress/theme/styles/global.css
@@ -1,10 +1,26 @@
 :root {
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
+  --vp-code-color: #476582;
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-image-filter: blur(72px);
   --vp-home-hero-image-background-image: linear-gradient( -45deg, #647eff 30%, #42d392 );
   --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #647eff, #42d392);
 }
 
+:root.dark {
+  --vp-code-color: #c9def1;
+
+  --vp-home-hero-image-filter: blur(72px);
+  --vp-home-hero-image-background-image: linear-gradient(
+    0deg,
+    var(--vp-c-brand-soft) 50%,
+    var(--vp-c-brand-soft) 50%
+  );
+}
+
 .vp-sponsor-grid.xmini .vp-sponsor-grid-link   { height: 64px; }
 .vp-sponsor-grid.xmini .vp-sponsor-grid-image  { max-width: 64px; max-height: 22px }
 
diff --git a/docs/guide/advanced/composition.md b/docs/guide/advanced/composition.md
index 8d7f2ebcc..53f49311a 100644
--- a/docs/guide/advanced/composition.md
+++ b/docs/guide/advanced/composition.md
@@ -6,23 +6,31 @@ We have been describing the features of Vue I18n using the Legacy API, which is
 
 ## Basic Usage
 
-Let’s look at the basic usage of Vue I18n Composition API! Here we will learn the basic usage by modifying the code in [Getting Started](../../guide/) to learn the basic usage.
+Let’s look at the basic usage of Vue I18n Composition API! Here we will learn the basic usage by modifying the code in [Getting Started](../../guide/essentials/started) to learn the basic usage.
 
 To compose with `useI18n` in `setup` of Vue 3, there is one thing you need to do, you need set the `legacy` option of the `createI18n` function to `false`.
 
 The following is an example of adding the `legacy` option to `createI18n`:
 
-```js{5}
+```js{4}
 // ...
 
-// 2. Create i18n instance with options
 const i18n = VueI18n.createI18n({
-  legacy: false, // you must set `false`, to use Composition API
-  locale: 'ja', // set locale
-  fallbackLocale: 'en', // set fallback locale
-  messages, // set locale messages
-  // If you need to specify other options, you can set other options
-  // ...
+  legacy: false, // you must set `false`, to use Composition API // [!code ++]
+  locale: 'ja',
+  fallbackLocale: 'en',
+  messages: {
+    en: {
+      message: {
+        hello: 'hello world'
+      }
+    },
+    ja: {
+      message: {
+        hello: 'こんにちは、世界'
+      }
+    }
+  }
 })
 
 // ...
@@ -37,39 +45,42 @@ The following properties of i18n instance created by `createI18n` change its beh
 - `global` property: VueI18n instance to Composer instance
 :::
 
-You are now ready to use `useI18n` in the component `setup`. The code looks like this:
+You are now ready to use `useI18n` in the `App.vue` component. The code looks like this:
 
-```js{5-8}
-// ...
-
-// 3. Create a vue root instance
-const app = Vue.createApp({
-  setup() {
-    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
-    return { t } // return render context that included `t`
-  }
-})
+```vue
+<script setup> // [!code ++]
+import { useI18n } from 'vue-i18n' // [!code ++]
+const { t } = useI18n() // [!code ++]
+</script> // [!code ++]
 
-// ...
+<template>
+  <h1>{{ $t("message.hello") }}</h1>
+</template>
 ```
 
-You must call `useI18n` at top of the `setup`.
+You must call `useI18n` at top of the `<script setup>`.
 
 The `useI18n` returns a Composer instance. The Composer instance provides a translation API such as the `t` function, as well as properties such as `locale` and `fallbackLocale`, just like the VueI18n instance. For more information on the Composer instance, see the [API Reference](../../api/composition#composer).
 
 In the above example, there are no options for `useI18n`, so it returns a Composer instance that works with the global scope. As such, it returns a Composer instance that works with the global scope, which means that the localized message referenced by the spread `t` function here is the one specified in `createI18n`.
 
-By returning `t` as render context in the `setup`, you can use `t` in the components template:
+you can use `t` in the components template:
 
-```html{2}
-<div id="app">
-  <p>{{ t("message.hello") }}</p>
-</div>
+```vue
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>
+
+<template>
+  <h1>{{ $t("message.hello") }}</h1> // [!code --]
+  <h1>{{ t("message.hello") }}</h1> // [!code ++]
+</template>
 ```
 
 The output follows:
 
-```html{2}
+```vue
 <div id="app">
   <p>こんにちは、世界</p>
 </div>
@@ -81,7 +92,38 @@ In the Legacy API mode, the messages were translated using either `$t` or the Vu
 
 In the Composition API mode, the Message Format Syntax remains the same as in the Legacy API mode. You can use the Composer instance `t` to translate a message as follows:
 
-```html
+```vue
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n({
+  locale: 'en',
+  messages: {
+    en: {
+      msg: 'hello',
+      named: '{msg} world!',
+      list: '{0} world!',
+      literal: "{'hello'} world!",
+      the_world: 'the world',
+      dio: 'DIO:',
+      linked: '@:dio @:the_world !!!!'
+    },
+    ja: {
+      msg: 'こんにちは',
+      named: '{msg} 世界！',
+      list: '{0} 世界！',
+      literal: "{'こんにちは'} 世界！",
+      the_world: 'ザ・ワールド！',
+      dio: 'ディオ:',
+      linked: '@:dio @:the_world ！！！！'
+    }
+  }
+})
+
+const msg = computed(() => t('msg'))
+</script>
+
 <template>
   <p>{{ t('named', { msg }) }}</p>
   <p>{{ t('list', [msg]) }}</p>
@@ -89,42 +131,6 @@ In the Composition API mode, the Message Format Syntax remains the same as in th
   <p>{{ t('linked') }}</p>
 </template>
 
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-export default {
-  setup() {
-    const { t } = useI18n({
-      locale: 'en',
-      messages: {
-        en: {
-          msg: 'hello',
-          named: '{msg} world!',
-          list: '{0} world!',
-          literal: "{'hello'} world!",
-          the_world: 'the world',
-          dio: 'DIO:',
-          linked: '@:dio @:the_world !!!!'
-        },
-        ja: {
-          msg: 'こんにちは',
-          named: '{msg} 世界！',
-          list: '{0} 世界！',
-          literal: "{'こんにちは'} 世界！",
-          the_world: 'ザ・ワールド！',
-          dio: 'ディオ:',
-          linked: '@:dio @:the_world ！！！！'
-        }
-      }
-    })
-
-    const msg = computed(() => t('msg'))
-
-    return { t, msg }
-  }
-}
-</script>
 ```
 
 For more details of `t`, see the [API Reference](../../api/composition#t-key).
@@ -135,7 +141,22 @@ In the Legacy API mode, the plural form of the message was translated using eith
 
 In the Composition API mode, the plural form of the message is left in syntax as in the Legacy API mode, but is translated using the `t` of the Composer instance:
 
-```html
+```vue
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n({
+  locale: 'en',
+  messages: {
+    en: {
+      car: 'car | cars',
+      apple: 'no apples | one apple | {count} apples',
+      banana: 'no bananas | {n} banana | {n} bananas'
+    }
+  }
+})
+</script>
+
 <template>
   <h2>Car:</h2>
   <p>{{ t('car', 1) }}</p>
@@ -150,27 +171,6 @@ In the Composition API mode, the plural form of the message is left in syntax as
   <p>{{ t('banana', 1) }}</p>
   <p>{{ t('banana', { n: 'too many' }, 100) }}</p>
 </template>
-
-<script>
-import { useI18n } from 'vue-i18n'
-
-export default {
-  setup() {
-    const { t } = useI18n({
-      locale: 'en',
-      messages: {
-        en: {
-          car: 'car | cars',
-          apple: 'no apples | one apple | {count} apples',
-          banana: 'no bananas | {n} banana | {n} bananas'
-        }
-      }
-    })
-
-    return { t }
-  }
-}
-</script>
 ```
 
 :::tip NOTE
@@ -183,44 +183,39 @@ In the Legacy API mode, Datetime value was formatted using `$d` or the VueI18n i
 
 In the Composition API mode, it uses the `d` of the Composer instance to format:
 
-```html
-<template>
-  <p>{{ t('current') }}: {{ d(now, 'long') }}</p>
-</template>
-
-<script>
+```vue
+<script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default {
-  setup() {
-    const { t, d } = useI18n({
-      locale: 'en-US',
-      messages: {
-        'en-US': {
-          current: 'Current Datetime'
-        }
-      },
-      datetimeFormats: {
-        'en-US': {
-          long: {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit'
-          }
-        }
+const { t, d } = useI18n({
+  locale: 'en-US',
+  messages: {
+    'en-US': {
+      current: 'Current Datetime'
+    }
+  },
+  datetimeFormats: {
+    'en-US': {
+      long: {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
       }
-    })
-
-    const now = ref(new Date())
-
-    return { t, d, now }
+    }
   }
-}
+})
+
+const now = ref(new Date())
 </script>
+
+<template>
+  <p>{{ t('current') }}: {{ d(now, 'long') }}</p>
+</template>
+
 ```
 
 For more details of `d`, see the [API Reference](../../api/composition#d-value).
@@ -231,40 +226,34 @@ In the Legacy API mode, Number value is formatted using `$n` or the `n` of the V
 
 In the Composition API mode, it is formatted using the `n` of the Composer instance:
 
-```html
-<template>
-  <p>{{ t('money') }}: {{ n(money, 'currency') }}</p>
-</template>
-
-<script>
+```vue
+<script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default {
-  setup() {
-    const { t, n } = useI18n({
-      locale: 'en-US',
-      messages: {
-        'en-US': {
-          money: 'Money'
-        }
-      },
-      numberFormats: {
-        'en-US': {
-          currency: {
-            style: 'currency',
-            currency: 'USD'
-          }
-        }
+const { t, n } = useI18n({
+  locale: 'en-US',
+  messages: {
+    'en-US': {
+      money: 'Money'
+    }
+  },
+  numberFormats: {
+    'en-US': {
+      currency: {
+        style: 'currency',
+        currency: 'USD'
       }
-    })
-
-    const money = ref(1000)
-
-    return { t, n, money }
+    }
   }
-}
+})
+
+const money = ref(1000)
 </script>
+
+<template>
+  <p>{{ t('money') }}: {{ n(money, 'currency') }}</p>
+</template>
 ```
 
 For more details of `n`, see the [API Reference](../../api/composition#n-value).
@@ -279,20 +268,14 @@ There are two ways to refer the global scope Composer instance at the component.
 
 ### Explicit with `useI18n`
 
-As we have explained, `setup` in `useI18n` is a way.
+As we have explained, in `useI18n` is a way.
 
-```js
+```ts
 import { useI18n } from 'vue-i18n'
 
-export default {
-  setup() {
-    const { t } = useI18n({ useScope: 'global' })
-
-    // Something to do here ...
+const { t } = useI18n({ useScope: 'global' })
 
-    return { t }
-  }
-}
+// Something to do here ...
 ```
 
 The above code sets the `useI18n` option to `useScope: 'global'`, which allows `useI18n` to return a Composer instance that can be accessed by the i18n instance `global` property. This allows `useI18n` to return the Composer instance that can be accessed by i18n instance`global` property, which is a global scope. The Composer instance is a global scope.
@@ -362,42 +345,36 @@ The following example codes:
 ```js
 import { useI18n } from 'vue-i18n'
 
-export default {
-  setup() {
-    const { t, d, n, tm, locale } = useI18n({
-      locale: 'ja-JP',
-      fallbackLocale: 'en-US',
-      messages: {
-        'en-US': {
-          // ....
-        },
-        'ja-JP': {
-          // ...
-        }
-      },
-      datetimeFormats: {
-        'en-US': {
-          // ....
-        },
-        'ja-JP': {
-          // ...
-        }
-      },
-      numberFormats: {
-        'en-US': {
-          // ....
-        },
-        'ja-JP': {
-          // ...
-        }
-      }
-    })
-
-    // Something to do here ...
-
-    return { t, d, n, tm, locale }
+const { t, d, n, tm, locale } = useI18n({
+  locale: 'ja-JP',
+  fallbackLocale: 'en-US',
+  messages: {
+    'en-US': {
+      // ....
+    },
+    'ja-JP': {
+      // ...
+    }
+  },
+  datetimeFormats: {
+    'en-US': {
+      // ....
+    },
+    'ja-JP': {
+      // ...
+    }
+  },
+  numberFormats: {
+    'en-US': {
+      // ....
+    },
+    'ja-JP': {
+      // ...
+    }
   }
-}
+})
+
+// Something to do here ...
 ```
 
 
@@ -405,27 +382,21 @@ If you use i18n custom blocks  in SFC as i18n resource of locale messages, it  w
 
 The following is an example of using  i18n custom blocks and `useI18n` options:
 
-```html
-<script>
+```vue
+<script setup>
 import { useI18n } from 'vue-i18n'
 import en from './en.json'
 
-export default {
-  setup() {
-    const { t, availableLocales, getLocaleMessages } = useI18n({
-      locale: 'en',
-      messages: {
-        en
-      }
-    })
-
-    availableLocales.forEach(locale => {
-      console.log(`${locale} locale messages`, getLocaleMessages(locale))
-    })
-
-    return { t }
+const { t, availableLocales, getLocaleMessages } = useI18n({
+  locale: 'en',
+  messages: {
+    en
   }
-}
+})
+
+availableLocales.forEach(locale => {
+  console.log(`${locale} locale messages`, getLocaleMessages(locale))
+})
 </script>
 
 <i18n locale="ja">
@@ -443,21 +414,19 @@ In this example, the definition of resources is separated from i18n custom block
 
 ### Global Scope
 
-You want to change the locale with `setup`, just get a global Composer with `useI18n` and change it using the `locale` property of the instance.
-
-```js
-setup() {
-  const { t, locale } = useI18n({ useScope: 'global' })
+You want to change the locale with `<script setup>`, just get a global Composer with `useI18n` and change it using the `locale` property of the instance.
 
-  locale.value = 'en' // change!
+```vue
+<script setup>
+const { t, locale } = useI18n({ useScope: 'global' })
 
-  return { t, locale } // you can return it with render context!
-}
+locale.value = 'en' // change!
+</script>
 ```
 
 And you can also use the setup context in the template, which can be changed as follows:
 
-```html
+```vue
 <select v-model="locale">
   <option value="en">en</option>
   <option value="ja">ja</option>
@@ -468,7 +437,7 @@ When you change the locale of the global scope, components that depend on the gl
 
 If you are using the [implicit way](composition#implicit-with-injected-properties-and-functions), you can also change it in template with `$i18n.locale`, as follows:
 
-```html
+```vue
 <select v-model="$i18n.locale">
   <option value="en">en</option>
   <option value="ja">ja</option>
diff --git a/docs/guide/advanced/optimization.md b/docs/guide/advanced/optimization.md
index f9d8dbeae..09f490c07 100644
--- a/docs/guide/advanced/optimization.md
+++ b/docs/guide/advanced/optimization.md
@@ -44,10 +44,23 @@ If you do the production build, Vue I18n will automatically bundle the runtime o
 
 #### Install plugin
 
-```sh
-npm install --save-dev @intlify/unplugin-vue-i18n
+::: code-group
+
+```sh [npm]
+npm install @intlify/unplugin-vue-i18n -D
+```
+
+```sh [yarn]
+yarn add @intlify/unplugin-vue-i18n -D
+```
+
+```sh [pnpm]
+pnpm add -D @intlify/unplugin-vue-i18n
 ```
 
+:::
+
+
 #### Configure plugin for vite
 
 ```js
@@ -132,7 +145,7 @@ Each time localization is performed in an application using `$t` or `t` function
 
 You need to configure the following feature flag with `esm-bundler` build and bundler such as vite:
 
-- `__INTLIFY_JIT_COMPILATION__`  (enable/disable message compiler for JIT style, default: `false`) 
+- `__INTLIFY_JIT_COMPILATION__`  (enable/disable message compiler for JIT style, default: `false`)
 - `__INTLIFY_DROP_MESSAGE_COMPILER__`  (enable/disable whether to tree-shake message compiler when we will be bundling, this flag works when `__INTLIFY_JIT_COMPILATION__` is enabled. default: `false`)
 
 :::warning NOTICE
diff --git a/docs/guide/advanced/sfc.md b/docs/guide/advanced/sfc.md
index b8f76bffc..3fe1eedb9 100644
--- a/docs/guide/advanced/sfc.md
+++ b/docs/guide/advanced/sfc.md
@@ -6,7 +6,7 @@ If you are building Vue component or Vue application using single file component
 
 The following in [single file components example](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc):
 
-```html
+```vue
 <script>
 export default {
   name: 'App'
@@ -64,10 +64,22 @@ To use i18n custom blocks, you need to use the following plugins for bundler.
 
 #### Installation
 
-```sh
-npm i --save-dev @intlify/unplugin-vue-i18n
+::: code-group
+
+```sh [npm]
+npm install @intlify/unplugin-vue-i18n -D
+```
+
+```sh [yarn]
+yarn add @intlify/unplugin-vue-i18n -D
 ```
 
+```sh [pnpm]
+pnpm add -D @intlify/unplugin-vue-i18n
+```
+
+:::
+
 #### Configure plugin for Vite
 
 ```js
@@ -139,6 +151,18 @@ build: {
 
 We also need to make sure that we've installed `@intlify/vue-i18n-loader`:
 
-```sh
-npm i --save-dev @intlify/vue-i18n-loader
+::: code-group
+
+```sh [npm]
+npm install @intlify/vue-i18n-loader -D
+```
+
+```sh [yarn]
+yarn add @intlify/vue-i18n-loader -D
 ```
+
+```sh [pnpm]
+pnpm add -D @intlify/vue-i18n-loader
+```
+
+:::
diff --git a/docs/guide/advanced/typescript.md b/docs/guide/advanced/typescript.md
index cc3e33d24..ce158505a 100644
--- a/docs/guide/advanced/typescript.md
+++ b/docs/guide/advanced/typescript.md
@@ -19,6 +19,7 @@ You can support the type-safe resources with resource schema using TypeScript.
 The following is an example code to define type-safe resources for `messages` defined with `createI18n` option.
 
 Locale messages resource:
+
 ```json
 {
   "world": "the world!"
@@ -26,7 +27,8 @@ Locale messages resource:
 ```
 
 Application entrypoint:
-```typescript
+
+```ts
 import { createI18n } from 'vue-i18n'
 import enUS from './locales/en-US.json'
 
@@ -76,6 +78,7 @@ In addition to local messages, the resource type definitions can also include da
 The following is an example of code that defines type-safe resources for locale messages and number formats on a per-component basis in `useI18n`.
 
 locale mesasges to import in Vue components:
+
 ```json
 {
   "messages": {
@@ -85,14 +88,9 @@ locale mesasges to import in Vue components:
 ```
 
 Vue components with type-safe resources:
-```html
-<template>
-  <p>message: {{ t('messages.hello', { name: 'kazupon' }) }}</p>
-  <p>currecy: {{ n(1000, 'currency') }}</p>
-</template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+```vue
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import enUS from './en-US.json' // import locale messages for Vue component
 
@@ -102,41 +100,40 @@ type MessageSchema = typeof enUS
 // define number format schema for Vue component
 type NumberSchema = {
   currency: {
-    style: 'currency',
+    style: 'currency'
     currencyDisplay: 'symbol'
     currency: string
   }
 }
 
-// define Vue component
-export default defineComponent({
-  setup() {
-    /**
-     * You can specify the your definition schema with object literal at first type parameters
-     * About type parameter, see the http://vue-i18n.intlify.dev/api/composition.html#usei18n
-     */
-    const { t, n } = useI18n<{
-      message: MessageSchema,
-      number: NumberSchema
-    }, 'en-US'>({
-      inheritLocale: true,
-      messages: {
-        'en-US': enUS
-      },
-      numberFormats: {
-        'en-US': {
-          currency: {
-            style: 'currency',
-            currencyDisplay: 'symbol',
-            currency: 'USD'
-          }
-        }
+/*
+ * You can specify the your definition schema with object literal at first type parameters
+ * About type parameter, see the http://vue-i18n.intlify.dev/api/composition.html#usei18n
+ */
+const { t, n } = useI18n<{
+  message: MessageSchema,
+  number: NumberSchema
+}, 'en-US'>({
+  inheritLocale: true,
+  messages: {
+    'en-US': enUS
+  },
+  numberFormats: {
+    'en-US': {
+      currency: {
+        style: 'currency',
+        currencyDisplay: 'symbol',
+        currency: 'USD'
       }
-    })
-    return { t, n }
+    }
   }
 })
 </script>
+
+<template>
+  <p>message: {{ t('messages.hello', { name: 'kazupon' }) }}</p>
+  <p>currecy: {{ n(1000, 'currency') }}</p>
+</template>
 ```
 
 the above codes, by specifying the defined schema as the first type parameter of `useI18n`, you can use TypeScript to check for undefined resources for locale messages and number formats. Also, by specifying the locale to be defined in the second type parameter, TypeScript can check for undefined locales.
@@ -186,6 +183,7 @@ Use-cases on your project, you may have Vue components that do not use local sco
 For that use case, you can also support interpolation of resource keys by explicitly specifying the schema defined for the global scope in the type parameter of `useI18n`.
 
 define schema for global scope:
+
 ```ts
 /**
  * define the resource schema
@@ -207,29 +205,24 @@ export type NumberSchema = {
 ```
 
 Then, just import the defined schema and use it as a type parameter of `useI18n`, as in the following Vue component:
-```html
-<template>
-  <p>message: {{ t('hello') }}</p>
-  <p>currecy: {{ n(1000, 'currency') }}</p>
-</template>
 
+```vue
 <script lang="ts">
-import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 // import resource schema for global scope
 import type { MessageSchema, NumberSchema } from '../locales/schema'
 
-// define Vue component
-export default defineComponent({
-  setup() {
-    const { t, n } = useI18n<{ message: MessageSchema, number: NumberSchema }>({
-      useScope: 'global'
-    })
-    return { t, n }
-  }
+const { t, n } = useI18n<{ message: MessageSchema, number: NumberSchema }>({
+  useScope: 'global'
 })
 </script>
+
+<template>
+  <p>message: {{ t('hello') }}</p>
+  <p>currecy: {{ n(1000, 'currency') }}</p>
+</template>
+
 ```
 
 As a result, you can use the interpolation of resource keys in the APIs provided by VueI18n, such as `t` and `n`.
@@ -256,6 +249,7 @@ VueI18n provides the following interfaces:
 With using these interfaces and the `declare module`, you can define a global schema for VueI18n.
 
 The following is an example of a global schema defined in `d.ts`:
+
 ```ts
 /**
  * you need to import the some interfaces
@@ -304,6 +298,7 @@ Previously, when using `createI18n` and `useI18n` with type definitions for glob
 This way, you don't need to do that.
 
 The following is an example with `createI18n`:
+
 ```ts
 import { createI18n, type I18nOptions } from 'vue-i18n'
 
@@ -356,28 +351,22 @@ The first type parameter of `createI18n` above does not specify the type that is
 The second type parameter of `createI18n` specifies a type hint for options.
 
 In the case of the `useI18n` case used by Vue components, it looks like this:
-```html
-<template>
-  <p>`t` resource key completion: {{ t('menu.login') }}</p>
-  <p>`d` resource key completion: {{ d(new Date(), 'short') }}</p>
-  <p>`n` resource key completion: {{ n(1000, 'currency') }}</p>
-</template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+```vue
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-  name: 'HelloWorld',
-  setup() {
-    // use global scope
-    const { t, d, n } = useI18n({
-      inheritLocale: true
-    })
-    return { t, d, n }
-  }
+// use global scope
+const { t, d, n } = useI18n({
+  inheritLocale: true
 })
 </script>
+
+<template>
+  <p>`t` resource key completion: {{ t('menu.login') }}</p>
+  <p>`d` resource key completion: {{ d(new Date(), 'short') }}</p>
+  <p>`n` resource key completion: {{ n(1000, 'currency') }}</p>
+</template>
 ```
 
 As you can see from the above code, you don't need to specify anything for the type parameter of `useI18n`. You can interpolate API Resource Keys such as `t`, `d`, and `n` without specifying them.
diff --git a/docs/guide/advanced/wc.md b/docs/guide/advanced/wc.md
index 9aaccc161..26af7708a 100644
--- a/docs/guide/advanced/wc.md
+++ b/docs/guide/advanced/wc.md
@@ -21,9 +21,10 @@ Using `defineCustomElement`, which is supported since Vue 3.2, we can provide Vu
 However, the provided Web Components cannot be inserted directly into HTML. You need to prepare the following Web Components to host the i18n instance created by `createI18n`.
 
 Web Components that host the i18n instance:
-```html
-<script lang="ts">
-import { defineComponent, provide } from 'vue'
+
+```vue
+<script setup lang="ts">
+import { provide } from 'vue'
 import { createI18n, I18nInjectionKey } from 'vue-i18n'
 
 /**
@@ -42,19 +43,10 @@ const i18n = createI18n<false>({
   }
 })
 
-export default defineComponent({
-  // ...
-  setup(props) {
-    /**
-     * provide i18n instance with `I18nInjectionKey` for other web components
-     */
-    provide(I18nInjectionKey, i18n)
-
-    // ...
-
-    return {}
-  }
-})
+/**
+ * provide i18n instance with `I18nInjectionKey` for other web components
+ */
+provide(I18nInjectionKey, i18n)
 </script>
 
 <!-- template to slot the content -->
@@ -79,7 +71,7 @@ Then, to host other Web Components, the `template` block makes it possible by us
 
 Export this hosted Web Components as follows:
 
-```javascript
+```js
 import { defineCustomElement } from 'vue'
 import I18nHost from './components/I18nHost.ce.vue'
 
@@ -90,7 +82,7 @@ export { I18nHostElement }
 
 The following `useI18n` implements and exports Web Components to:
 
-```html
+```vue
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
@@ -102,7 +94,7 @@ const { t } = useI18n()
 </template>
 ```
 
-```javascript
+```js
 import { defineCustomElement } from 'vue'
 import HelloI18n from './components/HelloI18n.ce.vue'
 
@@ -112,7 +104,7 @@ export { HelloI18nElement }
 
 When the following Vue application is registered as a custom element of Web Components:
 
-```javascript
+```js
 import { createApp } from 'vue'
 import { I18nHostElement } from './path/to/I18nHostElement'
 import { HelloI18nElement } from './path/to/HelloI18nElement'
@@ -126,7 +118,7 @@ createApp(App).mount('#app')
 
 So, In `App.vue`, which is the entry point of a Vue application, the following template will work:
 
-```html
+```vue
 <template>
   <i18n-host>
     <h1>Vue I18n in Web component</h1>
@@ -138,6 +130,7 @@ So, In `App.vue`, which is the entry point of a Vue application, the following t
 The complete example described so far can be looked [here](https://github.com/intlify/vue-i18n-next/tree/master/examples/web-components).
 
 ## Limitations
+
 1. The Vue I18n that can be used to implement Web Components is only **Composition API**.
 2. When implementing Web Components, **Vue components implemented with `useI18n` cannot be imported and used together**. This is due to the [Provide / Inject](https://v3.vuejs.org/guide/web-components.html#definecustomelement) limitations of Vue.js for Web Components.
 
diff --git a/docs/guide/essentials/datetime.md b/docs/guide/essentials/datetime.md
index 0b983a3ed..d798e59b6 100644
--- a/docs/guide/essentials/datetime.md
+++ b/docs/guide/essentials/datetime.md
@@ -74,12 +74,6 @@ As result the below:
 
 ## Custom Formatting
 
-:::danger NOTE
-Not supported IE, due to no support `Intl.DateTimeFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts)
-
-If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-datetimeformat)
-:::
-
 `$d` returns resulting string with fully formatted datetime, which can only be used as a whole. In situations when you need to style some part of the formatted datetime (like fraction digits), `$d` is not enough. In such cases DatetimeFormat component (`i18n-d`) will be of help.
 
 With a minimum set of properties, `i18n-d` generates the same output as `$d`, wrapped into configured DOM element.
diff --git a/docs/guide/essentials/number.md b/docs/guide/essentials/number.md
index 763809c77..cc5d10db6 100644
--- a/docs/guide/essentials/number.md
+++ b/docs/guide/essentials/number.md
@@ -79,12 +79,6 @@ As result the below:
 
 ## Custom Formatting
 
-:::danger NOTE
-Not supported IE, due to no support `Intl.NumberFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts)
-
-If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-numberformat)
-:::
-
 `$n` returns resulting string with fully formatted number, which can only be used as a whole. In situations when you need to style some part of the formatted number (like fraction digits), `$n` is not enough. In such cases NumberFormat component (`i18n-n`) will be of help.
 
 With a minimum set of properties, `i18n-n` generates the same output as `$n`, wrapped into configured DOM element.
@@ -173,4 +167,4 @@ Full list of the supported scoped slots as well as other `i18n-n`, properties ca
 
 The Scope resolving of NumberFormat component is same as Translation component.
 
-See the [here](../advanced/component.md#scope-resolving)
\ No newline at end of file
+See the [here](../advanced/component.md#scope-resolving)
diff --git a/docs/guide/essentials/scope.md b/docs/guide/essentials/scope.md
index f6382b242..8edd34509 100644
--- a/docs/guide/essentials/scope.md
+++ b/docs/guide/essentials/scope.md
@@ -62,7 +62,7 @@ createApp({
 
 Component:
 
-```html
+```vue
 <template>
   <div class="locale-changer">
     <select v-model="$i18n.locale">
diff --git a/docs/guide/essentials/started.md b/docs/guide/essentials/started.md
new file mode 100644
index 000000000..86bc53068
--- /dev/null
+++ b/docs/guide/essentials/started.md
@@ -0,0 +1,112 @@
+# Getting started
+
+Creating a global application with Vue + Vue I18n is dead simple. With Vue.js, we are already composing our application with components. When adding Vue I18n to the mix, all we need to do is ready resource messages and simply use the localization API that are offered with Vue I18n.
+
+:::tip NOTE
+This guide will assume that you are already familiar with Vue itself. You don't need to be a Vue expert, but you may occasionally need to refer back to the [core Vue documentation](https://vuejs.org/) for more information about certain features.
+:::
+
+## An example
+
+we're going to consider this example:
+
+- [StackBlitz example](https://stackblitz.com/edit/vue-i18n-get-started?file=main.js)
+
+Let's start by looking at the root component, `App.vue`.
+
+### App.vue
+
+```vue
+<template>
+  <h1>{{ $t('message.hello') }}</h1>
+</template>
+```
+
+In the template, we use the `$t` translation API injected with Vue I18n, to localize. This allows Vue I18n to change the locale without rewriting the template, also to be able to support the globally application.
+
+You will have the following output:
+
+```vue
+<h1>こんにちは、世界</h1>
+```
+
+Let's take a look at how this is achieved in JavaScript!
+
+### Creating the i18n instance
+
+The i18n instance is created by calling the function `createI18n`.
+
+```js
+const i18n = createI18n({
+  locale: 'ja',
+  fallbackLocale: 'en',
+  messages: {
+    en: {
+      message: {
+        hello: 'hello world'
+      }
+    },
+    ja: {
+      message: {
+        hello: 'こんにちは、世界'
+      }
+    }
+  }
+})
+```
+
+We can specify some options to `createI18n`.
+The important options are the `locale`, `fallbackLocale`, and `messages` options.
+
+`locale` is the language of the Vue application to be localized.
+
+`fallbackLocale` is the language to fall back to if the key resource specified in the `$t` translation API is not found in the language of `locale`.
+
+`messages` is the locale messages to translate with the `$t` translation API. The structure of the locale message is the hierarchical object structure with each locale as the top property
+
+### Registering the i18n plugin
+
+Once we've created our i18n instance, we need to register it as a plugin by calling `use` on our application:
+
+```js
+const app = createApp(Vue)
+app.use(i18n)
+app.mount('#app')
+```
+
+Like with most Vue plugins, the call to `use` needs to happen before the call to `mount`.
+
+If you're curious about what this plugin does, some of its responsibilities include:
+
+1. Adding the global properties and methods such as `$t`, `$i18n`
+2. Enabling the `useI18n` composables
+3. [Globally registering](https://vuejs.org/guide/components/registration.html#global-registration) the `i18n-t`, `i18n-d`, and `i18n-n` components.
+
+## Conventions in this guide
+
+### Single-File Components
+
+Vue I18n is most commonly used in applications built using a bundler (e.g. Vite) and [SFCs](https://vuejs.org/guide/introduction.html#single-file-components) (i.e. `.vue ` files). Most of the examples in this guide will be written in that style, but Vue Router itself doesn't require you to use build tools or SFCs.
+
+For example, if you're using the _global builds_ of [Vue](https://vuejs.org/guide/quick-start.html#using-vue-from-cdn) and [Vue I18n](../installation#Direct-Download-CDN), the libraries are exposed via global objects, rather than imports:
+
+```js
+const { createApp } = Vue
+const { createI18n, useI18n } = VueI18n
+```
+
+### Component API style
+
+Vue I18n can be used with both the Composition API and the Options API. Where relevant, the examples in this guide will show components written in both styles. Composition API examples will typically use `<script setup>`, rather than an explicit `setup` function.
+
+If you need a refresher about the two styles, see [Vue - API Styles](https://vuejs.org/guide/introduction.html#api-styles).
+
+Vue I18n works with both Vue composition API and Options API. Vue I18n has two APIs style like Vue, Composition API and Legacy API for options API using.
+
+:::tip NOTE
+In Vue I18n v9 and later, the API offered by Vue I18n v8.x is called **Legacy API** mode.
+:::
+
+The following sections will be explained using the Legacy API.
+
+If you wuold like to use it in Composition API style and already understand Vue I18n, you can step to [here](../advanced/composition).
diff --git a/docs/guide/extra/dist.md b/docs/guide/extra/dist.md
new file mode 100644
index 000000000..7b2231e31
--- /dev/null
+++ b/docs/guide/extra/dist.md
@@ -0,0 +1,63 @@
+# Different Distribution files
+In the [dist/ directory of the npm package](https://cdn.jsdelivr.net/npm/vue-i18n@9.1.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
+
+- **`vue-i18n(.runtime).global(.prod).js`**:
+  - For direct use via `<script src="...">` in the browser. Exposes the `VueI18n` global
+  - In-browser message format compilation:
+    - `vue-i18n.global.js` is the "full" build that includes both the compiler and the runtime so it supports compiling message formats on the fly
+    - `vue-i18n.runtime.global.js` contains only the runtime and requires message formats to be pre-compiled during a build step
+  - Inlines all Vue I18n core internal packages - i.e. it’s a single file with no dependencies on other files. This means you **must** import everything from this file and this file only to ensure you are getting the same instance of code
+  - Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `*.prod.js` files for production
+
+:::tip NOTE
+Global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and are only meant for direct use via `<script src="...">`.
+:::
+
+- **`vue-i18n(.runtime).esm-browser(.prod).js`**:
+  - For usage via native ES modules imports (in browser via `<script type="module">`)
+  - Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build
+
+## With a Bundler
+
+- **`vue-i18n(.runtime).esm-bundler.js`**:
+  - For use with bundlers like `webpack`, `rollup` and `parcel`
+  - Leaves prod/dev branches with `process.env`<wbr/>`.NODE_ENV` guards (must be replaced by bundler)
+  - Does not ship minified builds (to be done together with the rest of the code after bundling)
+  - Imports dependencies (e.g. `@intlify/core-base`, `@intlify/message-compiler`)
+    - Imported dependencies are also `esm-bundler` builds and will in turn import their dependencies (e.g. `@intlify/message-compiler` imports `@intlify/shared`)
+    - This means you **can** install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version
+  - In-browser locale messages compilation:
+    - **`vue-i18n.runtime.esm-bundler.js`** is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via `module` field in `package.json`) because when using a bundler templates are typically pre-compiled (e.g. in `*.json` files)
+    - **`vue-i18n.esm-bundler.js` (default)**: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings).  To use this build, change your import statement to: `import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";`
+
+:::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/unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n)
+:::
+
+## For Node.js (Server-Side)
+
+- **`vue-i18n.cjs(.prod).js`**:
+  - For CommonJS usage in Node.js
+  - For use in Node.js via `require()`
+  - If you bundle your app with webpack with `target: 'node'` and properly externalize `vue-i18n`, this is the build that will be loaded
+  - The dev/prod files are pre-built, but the appropriate file is automatically required based on `process.env`<wbr/>`.NODE_ENV`
+
+:::tip Support Version
+:new: 9.3+
+:::
+
+- **`vue-i18n(.runtime).node.mjs`**:
+  - For ES Modules usage in Node.js
+  - For use in Node.js via `import`
+  - The dev/prod files are pre-built, but the appropriate file is automatically required based on `process.env`<wbr/>`.NODE_ENV`
+  - This module is proxy module of `vue-i18n(.runtime).mjs`
+    - **`vue-i18n.runtime.node.mjs`**: is runtime only. proxy `vue-i18n.runtime.mjs`.
+    - **`vue-i18n.node.mjs`**: includes the runtime compiler. proxy `vue-i18n.mjs`.
+
+:::tip NOTE
+ES Modules will be the future of the Node.js module system. The `vue-i18n.cjs(.prod).js` will be deprecated in the future. We recommend you would use `vue-i18n(.runtime).node.mjs`.
+:::
diff --git a/docs/guide/roadmap.md b/docs/guide/extra/roadmap.md
similarity index 100%
rename from docs/guide/roadmap.md
rename to docs/guide/extra/roadmap.md
diff --git a/docs/guide/extra/v8-docs.md b/docs/guide/extra/v8-docs.md
new file mode 100644
index 000000000..5db88818c
--- /dev/null
+++ b/docs/guide/extra/v8-docs.md
@@ -0,0 +1,22 @@
+# Documentation for v8.x
+
+- [Introduction](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/introduction.md)
+- [Getting started](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/started.md)
+- [Installation](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/installation.md)
+- Guide
+  - [Formatting](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/formatting.md)
+  - [Pluralization](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/pluralization.md)
+  - [DateTime localization](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/datetime.md)
+  - [Number localization](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/number.md)
+  - [Locale messages syntax](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/messages.md)
+  - [Fallback localization](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/fallback.md)
+  - [Component based localization](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/component.md)
+  - [Custom directive localization](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/directive.md)
+  - [Component interpolation](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/interpolation.md)
+  - [Single file components](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/sfc.md)
+  - [Hot reloading](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/hot-reload.md)
+  - [Locale changing](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/locale.md)
+  - [Lazy loading translations](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/lazy-loading.md)
+  - [Tooling](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/guide/tooling.md)
+- [API references](https://github.com/intlify/vue-i18n-next/blob/master/docs-old/api/README.md)
+
diff --git a/docs/guide/index.md b/docs/guide/index.md
deleted file mode 100644
index b7d4e9830..000000000
--- a/docs/guide/index.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Getting started
-
-:::tip NOTE
-We will be using [ES6](https://github.com/lukehoban/es6features) in the code samples in the guide.
-
-Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details [here](https://v3.vuejs.org/guide/installation.html#runtime-compiler-vs-runtime-only).
-:::
-
-Creating a global application with Vue + Vue I18n is dead simple. With Vue.js, we are already composing our application with components. When adding Vue I18n to the mix, all we need to do is ready resource messages and simply use the localization API that are offered with Vue I18n.
-
-Here’s a basic example via script tag:
-
-## HTML
-
-```html
-<script src="https://unpkg.com/vue@3"></script>
-<script src="https://unpkg.com/vue-i18n@9"></script>
-
-<div id="app">
-  <p>{{ $t("message.hello") }}</p>
-</div>
-```
-
-In the HTML template, we use the `$t` translation API injected with Vue I18n, to localize. This allows Vue I18n to change the locale without rewriting the template, also to be able to support the global application.
-
-## JavaScript
-
-```js
-// 1. Ready translated locale messages
-// The structure of the locale message is the hierarchical object structure with each locale as the top property
-const messages = {
-  en: {
-    message: {
-      hello: 'hello world'
-    }
-  },
-  ja: {
-    message: {
-      hello: 'こんにちは、世界'
-    }
-  }
-}
-
-// 2. Create i18n instance with options
-const i18n = VueI18n.createI18n({
-  locale: 'ja', // set locale
-  fallbackLocale: 'en', // set fallback locale
-  messages, // set locale messages
-  // If you need to specify other options, you can set other options
-  // ...
-})
-
-
-// 3. Create a vue root instance
-const app = Vue.createApp({
-  // set something options
-  // ...
-})
-
-// 4. Install i18n instance to make the whole app i18n-aware
-app.use(i18n)
-
-// 5. Mount
-app.mount('#app')
-
-// Now the app has started!
-```
-
-Output the following:
-
-```html
-<div id="app">
-  <p>こんにちは、世界</p>
-</div>
-```
-
-By default, calling `app.use(i18n)` gives us access to the VueI18n instance from each component with `this.$i18n`, which can be referenced from the `global` property of i18n instance that created with `createI18n`. As well as, translation API such as `this.$t` is also injected into each component, so these API can be used with templates.
-
-To use similar ways like the `setup` function, you need to call the `useI18n` functions. We will learn more about this in the [Composition API](./advanced/composition).
-
-:::tip NOTE
-For more information on the Composition API, please refer to [documentation](https://v3.vuejs.org/guide/composition-api-introduction.html) of Vue.js
-:::
-
-Throughout the docs, we’ll use APIs like `this.$i18n` and `this.$t`, which are almost backwards compatible from Vue I18n v8.x.
-
-:::tip NOTE
-In Vue I18n v9 and later, the API offered by Vue I18n v8.x is called **Legacy API** mode.
-:::
-
-The following sections will be explained using the Legacy API mode.
diff --git a/docs/guide/installation.md b/docs/guide/installation.md
index 5a9348a0f..debdac7ee 100644
--- a/docs/guide/installation.md
+++ b/docs/guide/installation.md
@@ -5,51 +5,24 @@
 
 - Vue.js `3.0.0`+
 
-
-## Direct Download
-
-<https://unpkg.com/vue-i18n@9>
-
-[unpkg.com](https://unpkg.com) provides a npm-based CDN links. The above link will always point to the latest release on npm.
-
-### Global import
-
-```html
-<script src="https://unpkg.com/vue@3"></script>
-<script src="https://unpkg.com/vue-i18n@9"></script>
-```
-
-You can also use a specific version/tag via URLs like <https://unpkg.com/vue-i18n@9.1.0/dist/vue-i18n.global.js>
-
-### ES Modules import
-
-```html
-<script type="module" src="https://unpkg.com/vue@3/dist/vue.esm-browser.js">
-<script type="module" src="https://unpkg.com/vue-i18n@9/dist/vue-i18n.esm-browser.js">
-```
-
-You can also use a specific version/tag via URLs like <https://unpkg.com/vue-i18n@9.1.0/dist/vue-i18n.esm-browser.js>
-
-
 ## Package managers
 
-### NPM
+::: code-group
 
-```sh
+```sh [npm]
 npm install vue-i18n@9
 ```
 
-### Yarn
-
-```sh
+```sh [yarn]
 yarn add vue-i18n@9
 ```
 
-### PNPM
-```sh
+```sh [pnpm]
 pnpm add vue-i18n@9
 ```
 
+:::
+
 When using with a module system, you must explicitly install the `vue-i18n`
 via `app.use()`:
 
@@ -70,88 +43,38 @@ app.use(i18n)
 app.mount('#app')
 ```
 
-## Edge version
 
-Add the following line to the `dependencies` in `package.json`:
-
-```json
-"vue-i18n": "npm:@vue-i18n-edge"
-```
+## Direct Download
 
-And then run `npm install` or `yarn install` or `pnpm install`.
+<https://unpkg.com/vue-i18n@9>
 
-## Dev Build
+[unpkg.com](https://unpkg.com) provides a npm-based CDN links. The above link will always point to the latest release on npm.
 
-You will have to clone directly from GitHub and build `vue-i18n` yourself if you want to use the latest dev build.
+### Global import
 
-```sh
-git clone git@github.com:intlify/vue-i18n-next.git node_modules/vue-i18n
-cd node_modules/vue-i18n
-npm install
-npm run build
+```html
+<script src="https://unpkg.com/vue@3"></script>
+<script src="https://unpkg.com/vue-i18n@9"></script>
 ```
 
+You can also use a specific version/tag via URLs like <https://unpkg.com/vue-i18n@9.12.0/dist/vue-i18n.global.js>
 
-## Explanation of Different Builds
-In the [dist/ directory of the npm package](https://cdn.jsdelivr.net/npm/vue-i18n@9.1.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
-
-- **`vue-i18n(.runtime).global(.prod).js`**:
-  - For direct use via `<script src="...">` in the browser. Exposes the `VueI18n` global
-  - In-browser message format compilation:
-    - `vue-i18n.global.js` is the "full" build that includes both the compiler and the runtime so it supports compiling message formats on the fly
-    - `vue-i18n.runtime.global.js` contains only the runtime and requires message formats to be pre-compiled during a build step
-  - Inlines all Vue I18n core internal packages - i.e. it’s a single file with no dependencies on other files. This means you **must** import everything from this file and this file only to ensure you are getting the same instance of code
-  - Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `*.prod.js` files for production
-
-:::tip NOTE
-Global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and are only meant for direct use via `<script src="...">`.
-:::
-
-- **`vue-i18n(.runtime).esm-browser(.prod).js`**:
-  - For usage via native ES modules imports (in browser via `<script type="module">`)
-  - Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build
-
-### With a Bundler
-
-- **`vue-i18n(.runtime).esm-bundler.js`**:
-  - For use with bundlers like `webpack`, `rollup` and `parcel`
-  - Leaves prod/dev branches with `process.env`<wbr/>`.NODE_ENV` guards (must be replaced by bundler)
-  - Does not ship minified builds (to be done together with the rest of the code after bundling)
-  - Imports dependencies (e.g. `@intlify/core-base`, `@intlify/message-compiler`)
-    - Imported dependencies are also `esm-bundler` builds and will in turn import their dependencies (e.g. `@intlify/message-compiler` imports `@intlify/shared`)
-    - This means you **can** install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version
-  - In-browser locale messages compilation:
-    - **`vue-i18n.runtime.esm-bundler.js`** is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via `module` field in `package.json`) because when using a bundler templates are typically pre-compiled (e.g. in `*.json` files)
-    - **`vue-i18n.esm-bundler.js` (default)**: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings).  To use this build, change your import statement to: `import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";`
+### ES Modules import
 
-:::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.
+```html
+<script type="module" src="https://unpkg.com/vue@3/dist/vue.esm-browser.js">
+<script type="module" src="https://unpkg.com/vue-i18n@9/dist/vue-i18n.esm-browser.js">
+```
 
-- [`@intlify/unplugin-vue-i18n`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n)
-:::
+You can also use a specific version/tag via URLs like <https://unpkg.com/vue-i18n@9.12.0/dist/vue-i18n.esm-browser.js>
 
-### For Node.js (Server-Side)
 
-- **`vue-i18n.cjs(.prod).js`**:
-  - For CommonJS usage in Node.js
-  - For use in Node.js via `require()`
-  - If you bundle your app with webpack with `target: 'node'` and properly externalize `vue-i18n`, this is the build that will be loaded
-  - The dev/prod files are pre-built, but the appropriate file is automatically required based on `process.env`<wbr/>`.NODE_ENV`
+## Edge version
 
-:::tip Support Version
-:new: 9.3+
-:::
+Add the following line to the `dependencies` in `package.json`:
 
-- **`vue-i18n(.runtime).node.mjs`**:
-  - For ES Modules usage in Node.js
-  - For use in Node.js via `import`
-  - The dev/prod files are pre-built, but the appropriate file is automatically required based on `process.env`<wbr/>`.NODE_ENV`
-  - This module is proxy module of `vue-i18n(.runtime).mjs`
-    - **`vue-i18n.runtime.node.mjs`**: is runtime only. proxy `vue-i18n.runtime.mjs`.
-    - **`vue-i18n.node.mjs`**: includes the runtime compiler. proxy `vue-i18n.mjs`.
+```json
+"vue-i18n": "npm:@vue-i18n-edge"
+```
 
-:::tip NOTE
-ES Modules will be the future of the Node.js module system. The `vue-i18n.cjs(.prod).js` will be deprecated in the future. We recommend you would use `vue-i18n(.runtime).node.mjs`.
-:::
+And then run `npm install` or `yarn install` or `pnpm install`.
diff --git a/docs/guide/integrations/nuxt3.md b/docs/guide/integrations/nuxt3.md
index 9c41297be..40a3e466a 100644
--- a/docs/guide/integrations/nuxt3.md
+++ b/docs/guide/integrations/nuxt3.md
@@ -30,10 +30,19 @@ We will now set up the initial environment for using Vue I18n with Nuxt 3.
 
 Run the following command to create a Nuxt 3 application:
 
-```sh
+::: code-group
+
+```sh [npx]
 npx nuxi init nuxt3-app-vue-i18n
 ```
 
+```sh [pnpm]
+pnpm dlx nuxi init nuxt3-app-vue-i18n
+```
+
+:::
+
+
 Once we have run the above command, the created Nuxt 3 initial project will have the following directory structure:
 
 ```
@@ -51,10 +60,22 @@ tree -L 1
 
 Install Vue I18n with the following command:
 
-```sh
-npm install --save-dev vue-i18n
+::: code-group
+
+```sh [npm]
+npm install vue-i18n -D
+```
+
+```sh [yarn]
+yarn add vue-i18n -D
+```
+
+```sh [pnpm]
+pnpm add -D vue-i18n
 ```
 
+:::
+
 ### Setup Nuxt plugin
 
 Create a `plugins` directory as follows:
@@ -109,10 +130,23 @@ We will edit `app.vue` of the setup Nuxt 3 application as follows:
 
 We have edited and saved, run the following command to run the Nuxt 3 application in local:
 
-```sh
+::: code-group
+
+```sh [npm]
 npm run dev
 ```
 
+```sh [yarn]
+yarn dev
+```
+
+```sh [pnpm]
+pnpm dev
+```
+
+:::
+
+
 Once the application is served on `http://localhost:3000`, we'll see the following:
 
 ![Nuxt3 setup](/nuxt3-setup.png)
@@ -232,7 +266,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
 
 The `messages` option will be the one holding the local resources we register to it and being as fine-grained as we want. This granularity facilitates integration with the localization service.
 
-Let's run `npm run dev` and head to `http://localhost:3000` to see if the changes so far work.
+Let's run `npm run dev` (or `yarn dev` or `pnpm dev`) and head to `http://localhost:3000` to see if the changes so far work.
 
 ![Setup i18n on Nuxt3](/nuxt3-setup-i18n.gif)
 
@@ -250,10 +284,22 @@ Enter [@intlify/unplugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/
 
 ### Install `@intlify/unplugin-vue-i18n`
 
-```sh
-npm install --save-dev @intlify/unplugin-vue-i18n
+::: code-group
+
+```sh [npm]
+npm install @intlify/unplugin-vue-i18n -D
+```
+
+```sh [yarn]
+yarn add @intlify/unplugin-vue-i18n -D
 ```
 
+```sh [pnpm]
+pnpm add -D @intlify/unplugin-vue-i18n
+```
+
+:::
+
 ### Configure Nuxt config
 
 Configure `nuxt.config.ts` like the below:
diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
index 51887ed82..f6225711c 100644
--- a/docs/guide/introduction.md
+++ b/docs/guide/introduction.md
@@ -22,7 +22,7 @@ Already know Vue I18n v8.x and just want to learn about what’s new in Vue I18n
 
 Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.
 
-Go to [Get Started](./)
+Go to [Installation](./installation)
 
 
 ## Meet the team
diff --git a/docs/guide/migration/features.md b/docs/guide/migration/features.md
index 53b684f2a..3540e9f61 100644
--- a/docs/guide/migration/features.md
+++ b/docs/guide/migration/features.md
@@ -22,7 +22,24 @@ You can specify the number of messages to be pluralized.
 
 The below example:
 
-```html
+```vue
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n({
+  locale: 'en',
+  messages: {
+    en: {
+      message: {
+        plural: 'no bananas | {n} banana | {n} bananas'
+      }
+    }
+  }
+})
+
+const count = ref(0)
+</script>
+
 <template>
   <i18n-t keypath="message.plural" :plural="count">
     <template #n>
@@ -30,28 +47,6 @@ The below example:
     </template>
   </i18n-t>
 </template>
-
-<script>
-import { useI18n } from 'vue-i18n'
-
-export default {
-  setup() {
-    const { t } = useI18n({
-      locale: 'en',
-      messages: {
-        en: {
-          message: {
-            plural: 'no bananas | {n} banana | {n} bananas'
-          }
-        }
-      }
-    })
-    const count = ref(0)
-
-    return { count, t }
-  }
-}
-</script>
 ```
 
 ## DatetimeFormat Component
diff --git a/docs/guide/migration/vue2.md b/docs/guide/migration/vue2.md
index e98a53af5..001af6423 100644
--- a/docs/guide/migration/vue2.md
+++ b/docs/guide/migration/vue2.md
@@ -2,6 +2,10 @@
 
 ## `vue-i18n-bridge`
 
+:::danger NOTE
+vue-i18n-bridge will not be provided in v10 due to Vue 2 EOL. v9.x will be the last version.
+:::
+
 ### What is `vue-i18n-bridge`?
 
 `vue-i18n-bridge` is a bridge to make the upgrade as easy as possible between vue-i18n@v8.26.1 or later and vue-i18n@v9.x.
@@ -17,15 +21,23 @@ And, also some features are backported from vue-i18n@v9.x:
 
 #### Package manager
 
-```sh
-# npm
+::: code-group
+
+```sh [npm]
 npm install vue-i18n-bridge
-# yarn
+```
+
+```sh [yarn]
 yarn add vue-i18n-bridge
-# pnpm
+```
+
+```sh [pnpm]
 pnpm add vue-i18n-bridge
 ```
 
+:::
+
+
 You must install the below packages before using this library:
 
 - vue-i18n: >= v8.26.1 < v9
diff --git a/examples/type-safe/global-type-definition/src/App.vue b/examples/type-safe/global-type-definition/src/App.vue
index 00a694468..4c5cd7824 100644
--- a/examples/type-safe/global-type-definition/src/App.vue
+++ b/examples/type-safe/global-type-definition/src/App.vue
@@ -1,19 +1,11 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
 <template>
   <HelloWorld />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import HelloWorld from './components/HelloWorld.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-})
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/examples/type-safe/global-type-definition/src/components/HelloWorld.vue b/examples/type-safe/global-type-definition/src/components/HelloWorld.vue
index 401937eae..762398b0d 100644
--- a/examples/type-safe/global-type-definition/src/components/HelloWorld.vue
+++ b/examples/type-safe/global-type-definition/src/components/HelloWorld.vue
@@ -1,22 +1,15 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+// use global scope
+const { t, d, n } = useI18n({
+  useScope: 'global',
+  inheritLocale: true
+})
+</script>
+
 <template>
   <p>`t` resource key completion: {{ t('menu.login') }}</p>
   <p>`d` resource key completion: {{ d(new Date(), 'short') }}</p>
   <p>`n` resource key completion: {{ n(1000, 'currency') }}</p>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-export default defineComponent({
-  name: 'HelloWorld',
-  setup() {
-    // use global scope
-    const { t, d, n } = useI18n({
-      useScope: 'global',
-      inheritLocale: true
-    })
-    return { t, d, n }
-  }
-})
-</script>
diff --git a/examples/type-safe/type-annotation/src/App.vue b/examples/type-safe/type-annotation/src/App.vue
index 2434165c8..746044f1e 100644
--- a/examples/type-safe/type-annotation/src/App.vue
+++ b/examples/type-safe/type-annotation/src/App.vue
@@ -1,22 +1,13 @@
+<script setup lang="ts">
+import LocalScope from './components/LocalScope.vue'
+import GlobalScope from './components/GlobalScope.vue'
+</script>
+
 <template>
   <LocalScope />
   <GlobalScope />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import LocalScope from './components/LocalScope.vue'
-import GlobalScope from './components/GlobalScope.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    LocalScope,
-    GlobalScope
-  }
-})
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/examples/type-safe/type-annotation/src/components/GlobalScope.vue b/examples/type-safe/type-annotation/src/components/GlobalScope.vue
index a7560d276..8dbf6254b 100644
--- a/examples/type-safe/type-annotation/src/components/GlobalScope.vue
+++ b/examples/type-safe/type-annotation/src/components/GlobalScope.vue
@@ -1,23 +1,15 @@
-<template>
-  <p>message: {{ t('world') }}</p>
-  <p>currecy: {{ n(1000, 'currency') }}</p>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-
 // import schema for global scope
 import type { MessageSchema, NumberSchema } from '../locales/schema'
 
-export default defineComponent({
-  name: 'GlobalScope',
-  setup() {
-    // use global scope
-    const { t, n } = useI18n<{ message: MessageSchema; number: NumberSchema }>({
-      useScope: 'global'
-    })
-    return { t, n }
-  }
+// use global scope
+const { t, n } = useI18n<{ message: MessageSchema; number: NumberSchema }>({
+  useScope: 'global'
 })
 </script>
+
+<template>
+  <p>message: {{ t('world') }}</p>
+  <p>currecy: {{ n(1000, 'currency') }}</p>
+</template>
diff --git a/examples/type-safe/type-annotation/src/components/LocalScope.vue b/examples/type-safe/type-annotation/src/components/LocalScope.vue
index 6159fd644..6760c8113 100644
--- a/examples/type-safe/type-annotation/src/components/LocalScope.vue
+++ b/examples/type-safe/type-annotation/src/components/LocalScope.vue
@@ -1,10 +1,4 @@
-<template>
-  <p>message: {{ t('messages.hello', { name: 'kazupon' }) }}</p>
-  <p>currecy: {{ n(1000, 'currency') }}</p>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import enUS from './en-US.json'
 
@@ -17,35 +11,34 @@ type NumberSchema = {
   }
 }
 
-export default defineComponent({
-  name: 'LocalScope',
-  setup() {
-    /**
-     * if you can specify resource schema to type parameter of `useI18n`,
-     * you can make to be type-safe the i18n resources.
-     */
-    const { t, n } = useI18n<
-      {
-        message: MessageSchema
-        number: NumberSchema
-      },
-      'en-US'
-    >({
-      inheritLocale: true,
-      messages: {
-        'en-US': enUS
-      },
-      numberFormats: {
-        'en-US': {
-          currency: {
-            style: 'currency',
-            currencyDisplay: 'symbol',
-            currency: 'USD'
-          }
-        }
+/**
+ * if you can specify resource schema to type parameter of `useI18n`,
+ * you can make to be type-safe the i18n resources.
+ */
+const { t, n } = useI18n<
+  {
+    message: MessageSchema
+    number: NumberSchema
+  },
+  'en-US'
+>({
+  inheritLocale: true,
+  messages: {
+    'en-US': enUS
+  },
+  numberFormats: {
+    'en-US': {
+      currency: {
+        style: 'currency',
+        currencyDisplay: 'symbol',
+        currency: 'USD'
       }
-    })
-    return { t, n }
+    }
   }
 })
 </script>
+
+<template>
+  <p>message: {{ t('messages.hello', { name: 'kazupon' }) }}</p>
+  <p>currecy: {{ n(1000, 'currency') }}</p>
+</template>
diff --git a/examples/web-components/src/App.vue b/examples/web-components/src/App.vue
index bd1a897ae..dbc0af343 100644
--- a/examples/web-components/src/App.vue
+++ b/examples/web-components/src/App.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const locale = ref<string>('en')
+</script>
+
 <template>
   <form>
     <label for="locale-select">select language: </label>
@@ -13,12 +19,6 @@
   </i18n-host>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const locale = ref<string>('en')
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/examples/web-components/src/components/I18nHost.ce.vue b/examples/web-components/src/components/I18nHost.ce.vue
index 8e93fcdfa..5f1ea5122 100644
--- a/examples/web-components/src/components/I18nHost.ce.vue
+++ b/examples/web-components/src/components/I18nHost.ce.vue
@@ -1,5 +1,5 @@
-<script lang="ts">
-import { defineComponent, provide, watchEffect } from 'vue'
+<script setup lang="ts">
+import { provide, watchEffect } from 'vue'
 import { createI18n, I18nInjectionKey } from 'vue-i18n'
 
 /**
@@ -31,24 +31,15 @@ const i18n = createI18n<false>({
   }
 })
 
-export default defineComponent({
-  props: {
-    locale: {
-      type: String,
-      default: 'en'
-    }
-  },
-  setup(props) {
-    /**
-     * provide i18n instance with `I18nInjectionKey` for other web components
-     */
-    provide(I18nInjectionKey, i18n)
+const props = defineProps<{ locale: string }>()
 
-    watchEffect(() => {
-      i18n.global.locale.value = props.locale
-    })
-    return {}
-  }
+/**
+ * provide i18n instance with `I18nInjectionKey` for other web components
+ */
+provide(I18nInjectionKey, i18n)
+
+watchEffect(() => {
+  i18n.global.locale.value = props.locale
 })
 </script>
 
diff --git a/packages/vue-i18n-core/src/composer.ts b/packages/vue-i18n-core/src/composer.ts
index ae17db5e5..b12d47fe3 100644
--- a/packages/vue-i18n-core/src/composer.ts
+++ b/packages/vue-i18n-core/src/composer.ts
@@ -346,7 +346,7 @@ export interface ComposerOptions<
    * @remarks
    * The locale messages of localization.
    *
-   * @VueI18nSee [Getting Started](../guide/)
+   * @VueI18nSee [Getting Started](../guide/essentials/started)
    *
    * @defaultValue `{}`
    */
@@ -1258,7 +1258,7 @@ export interface Composer<
    * @remarks
    * The locale messages of localization.
    *
-   * @VueI18nSee [Getting Started](../guide/)
+   * @VueI18nSee [Getting Started](../guide/essentials/started)
    */
   readonly messages: ComputedRef<{ [K in keyof Messages]: Messages[K] }>
   /**
diff --git a/packages/vue-i18n-core/src/i18n.ts b/packages/vue-i18n-core/src/i18n.ts
index 5750c2284..c641335c2 100644
--- a/packages/vue-i18n-core/src/i18n.ts
+++ b/packages/vue-i18n-core/src/i18n.ts
@@ -423,7 +423,7 @@ export function createI18n<
  *
  * If you use composition API mode, you need to specify {@link ComposerOptions}.
  *
- * @VueI18nSee [Getting Started](../guide/)
+ * @VueI18nSee [Getting Started](../guide/essentials/started)
  * @VueI18nSee [Composition API](../guide/advanced/composition)
  *
  * @example
diff --git a/packages/vue-i18n-core/src/legacy.ts b/packages/vue-i18n-core/src/legacy.ts
index 5b92e70b6..8512165c8 100644
--- a/packages/vue-i18n-core/src/legacy.ts
+++ b/packages/vue-i18n-core/src/legacy.ts
@@ -138,7 +138,7 @@ export interface VueI18nOptions<
    * @remarks
    * The locale messages of localization.
    *
-   * @VueI18nSee [Getting Started](../guide/)
+   * @VueI18nSee [Getting Started](../guide/essentials/started)
    *
    * @defaultValue `{}`
    */
@@ -945,7 +945,7 @@ export interface VueI18n<
    * @remarks
    * The locale messages of localization.
    *
-   * @VueI18nSee [Getting Started](../guide/)
+   * @VueI18nSee [Getting Started](../guide/essentials/started)
    */
   readonly messages: { [K in keyof Messages]: Messages[K] }
   /**