How to use this with I18N custom block?

[montella1507]

Hi,

i cannot make it work.

How to use together:
VIte + vite-plugin-vue2 + i18n codeblocks?

when i do:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import vue2 from '@vitejs/plugin-vue2'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [

    vue2(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

i got error of unknown elements... when i use plugin:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import vue2 from '@vitejs/plugin-vue2'


import { createI18nPlugin } from '@yfwz100/vite-plugin-vue2-i18n';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [

    vue2(),
   createI18nPlugin({}),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

it is buildable and messages from blocks work, however "global" messages are not working (they are not in there)

[montella1507]

I have tried this as well:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'

import vuePlugin from '@vitejs/plugin-vue2'

import { createI18nPlugin } from '@yfwz100/vite-plugin-vue2-i18n';


const vueI18nPlugin = {
  name: 'vue-i18n',
  transform(code, id) {
    if (/vue&type=i18n/.test(id)) {
      return
    }
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(require('js-yaml').load(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  }
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [

    vuePlugin(),
    vueI18nPlugin,
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

it is buildable, however it throws error:
vue.runtime.esm.js:4603

   [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '_t')"

[kingyue737]

https://stackoverflow.com/questions/73647129/how-use-vue-i18n-with-vue2-vite/73678068#73678068

[montella1507]

HI @kingyue737 and how to use that in legacy mode? (without composition api) ?

[kingyue737]

@montella1507 https://stackblitz.com/edit/vitejs-vite-ed3cmt
Just add compositionOnly: false in vite plugin config and add legacy: true in vue i18n config

[montella1507]

ok now.. it only drops on this error:

this.$i18n is undefined, however, bridge has messages from i18n service.

[kingyue737]

@montella1507 My example does not have such issue. Can you provide a minimal reproduction?