如何使用 Vue Composition API 为 vueI18n@next 创建 Quasar 框架引导文件？

Question

我们正在尝试安装带有 Quasar 框架的新 vueI18n@next 软件包，以便与 Vue 2 和 Vue Composition API 一起使用。 Vue I18n docs 提到这个：

import { createApp } from 'vue'
import { createI18n, useI18n } from 'vue-i18n'

// call with I18n option
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: { en: { ... } }
})

const App = {
  setup() {
    // ...
    const { t } = useI18n({ ... })
    return { ... , t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')

当我们尝试将其转换为 Quasar Framework boot file 时，我们在 app.setup 部分遇到错误：

import { boot } from 'quasar/wrappers'
import messages from 'src/i18n'
import Vue from 'vue'
import { createI18n, useI18n, VueI18n } from 'vue-i18n'

declare module 'vue/types/vue' {
  interface Vue {
    i18n: VueI18n
  }
}

const i18n = createI18n({
  legacy: false,
  locale: 'en-us',
  fallbackLocale: 'en-us',
  messages,
})

Vue.use(i18n)

export default boot(({ app }) => {
  // Set i18n instance on app
  app.setup = () => {
    const { t } = useI18n()
    return { t }
  }
})

错误：

正确的安装方法是什么？

Answer 1

Quasar 仍在 Vue 2 上，而不是 Vue 3。所以我们现在使用 vue-i18n-composable 包来代替这个引导文件：

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n-composable'
import messages from 'src/i18n'
import VueI18n from 'vue-i18n'

declare module 'vue/types/vue' {
  interface Vue {
    i18n: VueI18n
  }
}

const i18n = createI18n({
  locale: 'en-us',
  fallbackLocale: 'en-us',
  messages,
})

export default boot(({ app }) => {
  app.i18n = i18n
})

如何使用 Vue Composition API 为 vueI18n@next 创建 Quasar 框架引导文件？

How to create a Quasar Framework boot file for vueI18n@next with the Vue Composition API?

vue.js

vuejs2

vue-component

quasar-framework

vue-composition-api