vuetify dialog

[ghost]

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 breakpoint this.$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

1. Build the repo npm run dev
2. Open index.html in ./demo-Folder

[ghost]

Any news about this issue?

[ghost]

update? @karol-f

[activeliang]

References：https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d#gistcomment-3542722

[kmanzana]

your workaround seems to be the solution. you can also just use the <v-app></v-app> tags if being rendered by vue

[bryanvaz]

@green3lephant, and anyone finds this

You need to do two things:

1. Make sure you are using shadowDOM structure described in the README

2. 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.

[karol-f]

@bryanvaz Good job!