web component with i18n inside and vue 3

[dsldiesel]

I'm creating a Vue web component using vue-cli 4.5.13 and the --target wc option. I also need the component to use the vue-i18n-next plugin (last version for vue 3 projects), which requires some options to be passed to the main Vue instance, but now there is no main instance since the entrypoint is the vue component itself, so i18n has to be instantiated within the component.

Old vue2 i18n option works, but instantiating the i18n object in the component options is not valid for vue3 (this.$i18n stays undefined). So this is not working:

export default {
name: "custom-compo",
i18n: i18n,
components: { ChildComponent }
data, methods...
};
The solution should work both if exporting the web component (and using it on a standard page) and also if npm run serve ing a standard app with this component inside (but again instantiating i18n in the compo, not in main.js)

I am not asking how to setup vue-i18n within a normal vue project, but how to initialise i18n within a component that's gonna be built or exported as a custom-element or web-component, using the vue-cli, with vue 3 (npm run build --target wc)

I am not using composition api with setup(), but old options api. Just upgraded to vue3 package and updated deprecated syntax as per docs.

[kazupon]

If you want to use Vue 3 to create web components, you will need to do the following

• need to use Vue 3.2
  • web components are supported since Vue 3.2: https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md#custom-elements
• need to configure vue-cli for web components builds
  • build setting example: https://v3.vuejs.org/guide/web-components.html#skipping-component-resolution

Note that VueI18n for web components will be supported in the future since Vue 3.2 was recently released.
We have already received a proposal request and are working on it.
#628

We'll plan to support web components in the [email protected] official release.

[dsldiesel]

Hi @kazupon
Thanks for your reply!

Just to clarify, I am not sure I intend to use defineCustomElement function as in #628 ;
My only purpose is to have the ability to inject i18n directly inside a normal vue component so i18n is available on it and all children, as I am doing now in vue2, and then export this vue component to web-component with the npm run build --wc command.
Adding the i18n object created to the compo options made the job with previous versions of vue and vue-i18n:

// lang/i18n.js
import enGB from '../lang/en-GB';
import esES from '../lang/es-ES';
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default new VueI18n({
  locale         : 'es-ES',
  fallbackLocale : 'en-GB',
  messages       : {
    'es-ES' : esES,
    'en-GB' : enGB
  }
});

// vue compo:
...
import i18n from '@/lang/i18n';
...
export default {
  name       : 'web-component',  
  i18n,
  components : {
    ...
  }
}

This made available this.$i18n for this compo and all children.
I am looking for the way to do the same with new versions of vue and vue-i18n:

// lang/i18n.js
import enGB from './en-GB';
import esES from './es-ES';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale         : 'es-ES',
  fallbackLocale : 'en-GB',
  messages       : {
    'es-ES' : esES,
    'en-GB' : enGB
  }
});

export default i18n;

// vue compo:
...
import i18n from '@/lang/i18n';
...
export default {
  name       : 'web-component',  
  i18n ------> not working, this.$i18n is undefined
  components : {
    ...
  }
}

Maybe this is something very easy that I am missing with new version?
I have vue-cli 4.5.13, and vue 3.2 installed, although building with --wc is not ready yet in this cli; However, serving the vue component in a simple vue app with npm run serve worked before with vue2, but not now, as the i18n object is undefined in the component and all children have no $t, for example.

I insist that I never instantiate i18n in main.js as usual, but inside the vue component to be exported, so it has itself the object in the case it is exported as WC, having no connection at all with any other files like main.js.

Thanks for your help!