⚠️ Issue vue3 vue-i18n Introduced problem

[Sunny-liaokai]

What version of astro are you using?

2.3.2

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

windows

What browser are you using?

chrome

Describe the Bug

After importing vue and specifying the vue App entry file in astro.config.mjs Problems encountered in registering vue-il8n in the entry file. I want to obtain the local browser language through the browser, but the Windows object is empty.

// astro.config.mjs file
export default defineConfig({
    base: '/',
    // Enable Vue to support Vue components.
    integrations: [vue({appEntrypoint: '/src/pages/main'})]
})

// main.ts file
import type { App } from 'vue';
/*注册国际化*/
import { i18n } from '@/language'
/*注册svg*/
import 'virtual:svg-icons-register'

// console.log(window)
export default (app: App) => {
    app.use(i18n);
}

// language.ts file
import { createI18n, I18n} from "vue-i18n";

// no windows navigator storage
const userLocale = navigator.language
const defaultLang = userLocale.substring(0, 2);
export const I18n=createI18n({
        locale: defaultLang,
        legacy: false, 
        fallbackLocale: 'en-US',
        globalInjection: true, 
        silentTranslationWarn: false,
        message: {
            'en':{
              }
        }
    })

Link to Minimal Reproducible Example

1

Participation

• [X] I am willing to submit a pull request for this issue.

[NaCoLiu]

@Sunny-liaokai use this config

vue.ts

import type { App } from 'vue';
import { createI18n } from 'vue-i18n';

import messages from '@intlify/unplugin-vue-i18n/messages';

export const I18n = createI18n({
  locale: 'en',
  messages,
  globalInjection: true,
  legacy: false,
});

export default (app: App) => {
  app.use(I18n);
};

astro.config.ts

vite: {
    plugins: [
      VueI18nPlugin({
        include: ['./src/i18n/**'],
      }),
    ],
    resolve: {
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
      ],
    },
  },

[bluwy]

IIUC appEntrypoint is used for both SSR and the client, so you can't use window, navigator, etc there. You'd need a fallback language on SSR to work, especially for static builds. For output: 'server', you could derive the language from req.headers["accept-language"], which the req could be from Astro.request.