retejs / rete

JavaScript framework for visual programming
https://retejs.org
MIT License
10.17k stars 653 forks source link

how to use vue3 plugin for Node #656

Closed MountainRipper closed 1 year ago

MountainRipper commented 1 year ago

when i use element-plus or ant-design for node control,it works ,they only need import css and ui-component in .vue , but when use other ui library, such as Vuetify, Quasar, it need register them as plugin to Vue app,like

 import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'

const vuetify = createVuetify()
const app = createApp(App)
app.use(vuetify).mount('#app')

i read the code of rete-vue-plugin/src/vuecompat/vue3.ts, there is no any code to use a vue plugin. so my question is ,is there a way to use Vuetify, Quasar as a control render.

MountainRipper commented 1 year ago

through many attempts, finally i figure out one way to let it works, in control's .vue component, in create hook method, use getCurrentInstance to get the app instance , and register the vuetify as plugin, without well testing, it seems worked fine, so is there a better way to do this by official?

in TextControl.vue

<script>
import { ElPopover, ElText,ElButton} from "element-plus";
import { getCurrentInstance } from "vue";

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default {
  props: ['data'],
  created() {
    const ctx = getCurrentInstance()
    if(!!!ctx.appContext.app.hasVuetify){
      ctx.appContext.app.hasVuetify = true
      const vuetify = createVuetify({components, directives })
      ctx.appContext.app.use(vuetify)
    } 
  },
  components: {
    ElPopover,
    ElText,
    ElButton
  },
  data() {
    return {
    }
  }
}
</script>
Ni55aN commented 1 year ago

getCurrentInstance()

This approach is correct. You can create a separate component-provider for the plugin and reuse it in other components

rete-vue-plugin supports both Vue 2 and Vue 3, but the mechanisms for connecting their plugins are different. So, it does not have a built-in support for plugins (at least for now), since I cannot guarantee that plugins will be correctly shared across many Vue instances

MountainRipper commented 1 year ago

well i got it, thanks for your excellent work.