examples/composition/started.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <div id="app">
      <form>
        <label>{{ t('message.language') }}</label>
        <select v-model="locale">
          <option value="en">en</option>
          <option value="ja">ja</option>
        </select>
      </form>
      <p>{{ t("message.hello") }}</p>
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n, useI18n } = VueI18n

      const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        messages: {
          en: {
            message: {
              language: 'Language',
              hello: 'hello world!'
            }
          },
          ja: {
            message: {
              language: '言語',
              hello: 'こんにちは、世界！'
            }
          }
        }
      })

      const app = createApp({
        setup() {
          // `useI18n` return the global compser that is created at `createI18n`
          // `useI18n` must to be called at head of `setup` function
          const { t, locale } = useI18n()

          // Something to do ...
          //

          return { t, locale }
        }
      })
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>