Vue.use with vue-custom-element

[enf644]

Good day. I have trouble using Vue.use() with vue-custom-element. I am using Vuetify just as described in specification - Vue.use(Vuetify) The problem is - this.$vuetify is unidentified when component is inside custom-element.

I created sandbox - https://codesandbox.io/s/vuetify-playground-vl653?fontsize=14

Is there a way to make this.$vuetify available inside custom element?

[karol-f]

It's probably due to this - https://vuetifyjs.com/en/customization/internationalization#custom-components

I will need more time to check it, I guess that You will need vue-i18n or something to use built in Vuetify t

https://github.com/vuetifyjs/vuetify/issues/4861#issuecomment-413217720

[enf644]

Is there a way to mock or re-create this.$vuetify inside custom-element? Maybe use beforeCreateVueInstance somehow? I am a bit lost here.

[karol-f]

Hi @enf644 - it was pretty simple.

You have to define vuetify: new Vuetify({}) in component passed to vue-custom-element. The same way You do with e.g. store.

Here's working example - https://codesandbox.io/s/vuetify-playground-ogx9u

Vue.customElement('is-working', {
    ...VuetifyComponent,
    vuetify: new Vuetify({})
})

[enf644]

Thank you very much @karol-f !

[kinesisweb]

@karol-f Any chance you could repost this: https://codesandbox.io/s/vuetify-playground-ogx9u ... the current link isn't working.

I'm trying to get Vuetify components to work inside a custom element in a vue-cli project and I'm not having much luck.

[karol-f]

@kinesisweb Is there a problem? The only code snippet You need is https://github.com/karol-f/vue-custom-element/issues/186#issuecomment-549174404 - You extend Vue Component with Vuetify object as every Custom Element is separate Vue instance.

[kinesisweb]

@karol-f So say I was trying to get v-btn to work inside a custom-element, what would I need to have?

I'm currently using vuetify-loader in my project via a plugins js file

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts);

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

Is this method of using Vuetify compatible with vue-custom-element?

[karol-f]

@kinesisweb As every Custom Element is separate Vue instance You have to add vuetify not only to

new Vue({
  vuetify,
}).$mount('#app')

but also to your registered components, e.g.

Vue.customElement('my-custom-element', {
    ...VuetifyComponent,
    vuetify,
})

[kinesisweb]

@karol-f So, after some effort, I've managed to get the Vuetify component to render inside a customElement... Only problem I'm having now is that none of the styling seems to work.

// myElement.vue
<template>
    <v-btn color="primary">Button</v-btn>
</template>

<script>
import { VBtn } from "vuetify/lib";

export default {
    components: {
        VBtn
    }
}
</script>

// main.js
import Vue from "vue";
import vuetify from "./plugins/vuetify";

import VueCustomElement from "vue-custom-element";
import MyElement from "@/components/myElement.vue";
Vue.use(VueCustomElement);

Vue.customElement("vue-my-element", { ...MyElement, vuetify });

So now, the button renders, but including color="primary" breaks the styling on it. Any way to get the stylesheet included properly without having to include the entire Vuetify CSS as a separate dependency?

[karol-f]

Hi, You have to somehow add CSS styles to your components. You can:

• just import all styles in page header or separate component
• import individual CSS files from components, so e.g. <vuetify-button> will import CSS file with styles only for button

Is that what You are expecting? Or maybe You need something else?

[ClaudioVR]

Hi,

Im having the same issue as @kinesisweb.

I have built successfully and my vuetify element renders ok, but all the classes have been lost, essentially breaking all the vuetify styling.

Has anyone come up with a solution for this? Cheers

[karol-f]

@ClaudioVR But You've included CSS on top of Your page?

[ClaudioVR]

@karol-f yes. Ive tried with both the css file created in the build and with a vuetify cdn stylesheet, but it still doesn`t work.

[karol-f]

Why CSS added to the page won't style Vuetify components? Did You check if it (CSS) has all the classes that are in custom element?

[ClaudioVR]

hei @karol-f , I`m not sure. Trying all sorts of combinations but without luck.

Do you have any working examples on codesandbox to refer to? One where you`re using Vuetify?

[ClaudioVR]

@karol-f @kinesisweb I`ve found a solution that seems to work for me.

I import vuetify into the component. In my case into App.vue (as I have a number of nested components)

So my App.vue file looks like

<template>
  <v-app>
    <HelloWorld :msg="msg" />
  </v-app> 
</template>

<script>
import HelloWorld from './components/HelloWorld';
import vuetify from './plugins/vuetify';

export default {
  name: 'App',
  vuetify,
  props: ['msg'],
  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

Hope it works for others too