Issues using Vuetify.js components in controls

[Gollum999]

I am trying to use Vuetify.js components in my controls, but I've noticed a few weird issues. I'm not sure if this is a problem with this plugin, with Vuetify, or with my setup, but any advice would be appreciated.

Here is an example in CodePen: https://codepen.io/gollum999/pen/jONrRrj

The two primary issues I've noticed are:

1. Vuetify components inside of Rete nodes don't see certain global Vuetify theme settings, e.g. custom theme colors work fine, but dark mode toggle doesn't work.
2. Some Vuetify components don't work at all.

Issue 1 I can hack around on a case-by-case basis, but I haven't found a solution to issue 2 (aside from never using any of the "bad" components).

I think this is related to vuetifyjs/vuetify#5096, and by extension vuetifyjs/vuetify#4068 and vuejs/vue#8278... but I only do web stuff as a hobby so most of this went over my head. It sounds like this plugin is somehow getting a different instance of Vue that doesn't see the global Vuetify config? Or maybe this plugin isn't registering its Vue components in the way that Vuetify expects?

Again, I'm not really sure where to look here, so any help is appreciated.

[Ni55aN]

What version of your installed Vue.js?

[Gollum999]

Vue 2.6.10

And for completeness:

npm 6.9.0
vue/cli 3.5.5
rete 1.3.0
rete-vue-render-plugin 0.3.5
vuetify 2.0.2

[Ni55aN]

const vm = new Vue({
  el: '#app',
  vuetify: new Vuetify({

vuetify is initialized for vm instance. Controls has its own Vue instances

Use:

Vue.use(Vuetify);

or specify Vuetify components in Rete.Control -> component

import { VSelect } from 'vuetify/lib'
///
components: {
  'v-select': VSelect
}

It this case I see this.$vuetify.lang is undefined. Not sure why Vuetify does not contain this property.

[Ni55aN]

#17 (comment)

editor.use(VueRenderPlugin, {
  options: {
    vuetify: new Vuetify()
  }
});

[Gollum999]

Sorry it took me so long to try this out, but this seems to fix the problem! Thanks for the help.

[ozertx]

Same problem again. But with vuetify 3.
I solve this problem, by creating Vuetify app in vue ReteCustomNode.

https://github.com/ozertx/vuetify-rete/blob/main/src/components/rete/ReteCustomNode.vue#L37