Vue - 我如何在 window 中加载组件？

Question

I'm trying to use Winbox JS to add windows to my Vue project. Inside of those windows, i would like to render dynamic components. The problem with my code is that while i can create the windows, i can't find a way to load the components as well.

Here is what i tried:

App.vue

<template>
  <div id="app">
    <button-counter />
    <button @click="spwanbox()" variant="primary">Create winbox</button>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {},
  methods: {
    spwanbox() {
      new WinBox("testing", {
        heigth: 100,
        width: 300,
        x: 10,
        y: 50,
        html: "<button-counter />",
      });
    },
  },
};
</script>

Here the button will successfully create the window, but the component is not loaded inside the window. What am i doing wrong? Any kind of advice is appreciated.

Here is a full code sandbox repository: https://codesandbox.io/s/great-mclean-7lbsq?file=/src/App.vue:0-404

Answer 1

The WinBox.js package does not seem to have any support for integrating with Vue. The content inside one of its windows is not part of your Vue app and can't use props, data, methods, components, etc. Options include:

• mounting a secondary Vue app into the WinBox window and bridging data between the apps as needed (fully functional, but possibly tedious to code)
• using the WinBox mount option (see example on its home page) to clone content from your app into one of its windows (loses all reactivity and interactivity, so not much of an option)
• migrating to Vue 3 and using its teleport feature to place content from your app into WinBox windows (cleanest, but the migration may present difficulties)