Closed ghost closed 3 years ago
Any news about this issue?
update? @karol-f
your workaround seems to be the solution. you can also just use the <v-app></v-app>
tags if being rendered by vue
@green3lephant, and anyone finds this
You need to do two things:
Make sure you attach the vue component and vuetify asynchronously (see below and shadowDOM examples in readme)
Vue.customElement(componentName, () => import('./App.vue').then((c) => c.default).then((app) => {
app.vuetify = vuetify;
return app;
}), {
shadow: true,
beforeCreateVueInstance(root) {
const rootNode = root.el.getRootNode();
if (rootNode instanceof ShadowRoot) {
root.shadowRoot = rootNode;
} else {
root.shadowRoot = document.head;
}
return root;
},
});
This will solve this problem and also the HMR problem (I'll update the vuetify example over the weekend) @karol-f this should address this issue so you can close it.
@bryanvaz Good job!
I'm trying to use the vuetify dialog in my custom element. When trying to open the dialog I'm getting a few errors/warinings, but only the builded. In Vue CLI it's working fine.
The first issue with
Cannot read property 'smAndDown' of undefined"
happens because breakpointthis.$vuetify.breakpoint.smAndDown
isn't defined.I found a workaround to fix this issue by wrapping the vue component into this div
<div class="v-application v-application--is-ltr" id="app" data-app="true">
because vuetify breakpoint classes depending on v-application. But that's just a workaround.How can I fix this?
I made a repo to reporduce the issue https://github.com/green3lephant/vce-vuetify-test
npm run dev
index.html
in./demo
-Folder