boot error: SyntaxError: Must be called at the top of a setup function

[DarkLite1]

When we add to the top of our store/index.ts file the following line:

const { locale } = useI18n({ useScope: 'global' })

We get the following error:

boot error: SyntaxError: Must be called at the top of a setup function

src/boot/i18n.ts

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import { Quasar } from 'quasar'
import { LanguageCode } from 'src/store'

import en from 'src/i18n/en.json'
import fr from 'src/i18n/fr.json'

export default boot(({ app }) => {
  type MessageSchema = typeof en
  const i18n = createI18n<[MessageSchema], 'en' | 'fr'>({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: { en: en, fr: fr  },
  })

  app.use(i18n)
})

src/store/index.tx

import { reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n({ useScope: 'global' }) // TROUBLE LINE

export const store = reactive({
  countryLocale: {} as { value: string; label: string },
  setCountry(countryCode: CountryCodeString) {
      this.countryLocale = { value: 'en', label: 'English' }
  },
})

watch(
  () => store.countryLocale,
  (newLocal) => {
    console.log('local chaanged', newLocal)
    store.countryLocale = newLocal
    locale.value = 'en'
  }
)

How are we supposed to change the locale without importing the module?

This issue is similar to #15185

Thank you for your help.

[yusufkandemir]

This is not a Quasar problem, it's just how Vue works. So, you'd face the same thing with any kind of Vue project.

This is possible to solve by making your store composable, while still having a global state. If what I said didn't make sense to you, then I would recommend Pinia instead of spinning your own store.