I try to import the i18n package to my project to be able to apply the translations (Catalan, Spanish and English). But when I run the project I get an error that "createI18n" is not a function. Vue version is 3.

Error:

i18n.js´

import { createI18n } from 'vue-i18n/dist/vue-i18n';

import ca from '../lang/ca.json';
import es from '../lang/es.json';
import en from '../lang/en.json';

const i18n = createI18n({
    locale: 'ca',
    messages: {
      ca, es, en
    }
});
export default i18n;

app.js (main):

import { createApp } from "vue/dist/vue.esm-bundler.js";
import i18n from './i18n';

const app = createApp({});

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

package.json

{
    "private": true,
    "scripts": {
        "watch": "vite",
        "dev": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^1.1.5",
        "@vue/compiler-sfc": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "postcss": "^8.4.14",
        "sass": "^1.52.1",
        "tailwindcss": "^3.0.24",
        "vite": "^2.9.9",
        "vite-plugin-laravel": "^0.2.0-beta.12",
        "vue": "^3.2.36"
    },
    "dependencies": {
        "vue-i18n": "^8.27.1"
    }
}

CodePudding user response：

You should install the latest version of the vue-i18n module :

npm uninstall vue-i18n

then run

npm install --save vue-i18n@next