nuxt3: __vite_ssr_import_2__.default is not a function

afaics the whole shebang of this package can easily be replaced by simply installing https://vue-i18n.intlify.dev/ and adding a nuxt3 plugin by placing a file (e.g. called i18n.ts) in the plugins folder with the following content:

import { createI18n } from 'vue-i18n'

import de from '../locales/de.json'
import fr from '../locales/fr.json'

const i18n = createI18n({
	legacy: false,
	globalInjection: true,
	locale: 'de',
	fallbackLocale: 'de',
	messages: {
		de,
		fr,
	},
})

export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.vueApp.use(i18n)
})

Same problem with Nuxt 3 rc.3

It works on me, and I hope helps someone…

  // package.json
  
   "devDependencies": {
        "@intlify/vite-plugin-vue-i18n": "^3.4.0",
        "nuxt": "^3.0.0-rc.3"
    },
    "dependencies": {
        "sass": "^1.51.0",
        "vue-i18n": "^9.2.0-beta.36",
        "vuetify": "^3.0.0-beta.3"
    }

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt";
import vueI18n from '@intlify/vite-plugin-vue-i18n';

export default defineNuxtConfig({
    ssr: true,
    css: [
        "~~/assets/variables.scss",
    ],
    build: {
        transpile: ["vuetify","vue-i18n"],
    },
    vite: {
        plugins: [
            vueI18n({
                // compositionOnly: false
            })
        ],
    },
})

// ~~/plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import { createI18n } from 'vue-i18n';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

import messages from "~~/locales";

export default defineNuxtPlugin((nuxtApp) => {

    type MessageSchema = typeof messages.en;

    const i18n = createI18n<[MessageSchema], "en" | "tr">({
        locale: "tr",
        fallbackLocale: "en",
        messages
    });

    const vuetify = createVuetify({
        components,
        directives,
        defaults: {
            global: {
                ripple: false
            },
        },
    });

    nuxtApp.vueApp.use(vuetify);
    nuxtApp.vueApp.use(i18n);
});

// ~~/locales/en/index.ts

export default {
    title: "Component Title",
    email:{
        label: "Email Address",
        hint: "Text-field hint"
    }
}

// ~~/pages/index.ts
<template>
    <div>{{ t('title') }}</div>
    <v-text-field v-bind="tm('email')" />
</template>

<script lang="ts" setup>
    import { useI18n } from "vue-i18n";
    const { t, tm } = useI18n();
</script>

Thanks @codeflorist, I went with your approach.

For anyone looking to use t() in computed properties, hopefully this will save you some time…

import { useI18n } from 'vue-i18n'
const { t } = useI18n({ useScope: 'global' })

Guys I have solved this problem by @erayturan without using vuetify.

Link of my open source project: https://github.com/anburocky3/developer-resources (Feel free to browse the code and check what i used to make it work.)

@erayturan Do i need to import in each file? Is there any global access like $t()?

$t() is globally accessible in templates but not in script setup. so this should work:

// ~~/pages/index.vue
<template>
    <div>{{ $t('title') }}</div>
</template>

for script setup, you can make useI18n() accessible via autoload without requiring the import statement via creating a file called useI18n within the composables folder with the following content:

import { useI18n as useI18nSrc } from 'vue-i18n'
export const useI18n = () => useI18nSrc()

Why it is still not solved. 😔

临时解决方法： /node_modules/@intlify/nuxt3/dist/module.mjs 第107行左右

    addTemplate({
      filename: INTLIFY_VUEI18N_OPTIONS_VIRTUAL_FILENAME,
      write: true,
      getContents: () => {
        return `${nuxt.options.dev ? "// 'vueI18n' option loading ..." : ""}`;
      }
    });
    const loaderOptions = {
      vueI18n: isObject(options.vueI18n) ? options.vueI18n : isString(options.vueI18n) ? resolve(nuxt.options.rootDir, options.vueI18n) : void 0
    };

替换为

    const loaderOptions = {
      vueI18n: isObject(options.vueI18n) ? options.vueI18n : isString(options.vueI18n) ? resolve(nuxt.options.rootDir, options.vueI18n) : void 0
    };
    addTemplate({
      filename: INTLIFY_VUEI18N_OPTIONS_VIRTUAL_FILENAME,
      write: true,
      getContents: () => {
        return `${nuxt.options.dev ? "// 'vueI18n' option loading ..." : ""}
export default async () => (
    ${JSON.stringify(loaderOptions.vueI18n)}
)
        `;
      }
    });

还有一处没有写入 不影响使用

    addTemplate({
      filename: INTLIFY_LOCALE_VIRTUAL_FILENAME,
      +write: true,
      getContents: ({ utils }) => {
        const importMapper = /* @__PURE__ */ new Map();
        localeResources.forEach(({ locale }) => {
          importMapper.set(locale, utils.importName(`locale_${locale}`));
        });
        return `
${localeResources.map((l) => `import ${importMapper.get(l.locale)} from '${l.path}'`).join("\n")}
export default { ${[...importMapper].map((i) => `${JSON.stringify(i[0])}:${i[1]}`).join(",")} }
`;
      }
    });