intlify / nuxt3

Nuxt 3 Module for vue-i18n-next

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error while mounting app: TypeError: Cannot read properties of undefined (reading 'use')

HiddenUndefined opened this issue · comments

I have a trouble with setup i18n plugin :(

My package.json

{
  // ...
  "devDependencies": {
    "@intlify/nuxt3": "^0.1.10",
    "nuxt3": "latest",
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
    "stylus": "^0.55.0",
    "stylus-loader": "^6.2.0"
  },
  "dependencies": {
    "vue-i18n": "^9.2.0-beta.30"
  }
}

My nuxt.config.ts

{
  // ...
  buildModules: [
    '@intlify/nuxt3'
  ],
  intlify: {
    vueI18n: {
      locale: 'en',
      messages: {
        en: {
          hello: 'HELLO!'
        },
        ja: {
          hello: 'こんにちは!'
        }
      }
    }
  },
}

My error from console

entry.mjs?09c4:39 Error while mounting app: TypeError: Cannot read properties of undefined (reading 'use')
    at eval (plugin.mjs?f014:18:1)
    at async callWithNuxt (nuxt.mjs?73f4:87:1)
    at async applyPlugins (nuxt.mjs?73f4:55:1)
    at async initApp (entry.mjs?09c4:28:1)

Error ref to plugin.mjs, to line with app.use(i18n);

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";
import optionsLoader from "#build/intlify.vuei18n.options.mjs";
import messages from "#build/intlify.locales.mjs";
const isEmpty = (obj) => Object.keys(obj).length === 0;
export default defineNuxtPlugin(async (nuxt) => {
  const { vueApp: app } = nuxt;
  const loadedOptions = await optionsLoader();
  if (!isEmpty(messages)) {
    loadedOptions.messages = messages;
  }
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "en",
    ...loadedOptions
  });
  app.use(i18n);
});

Close :)