wopehq / vue3-tree

A tree library for Vue 3
https://wopehq.github.io/vue3-tree/
MIT License
70 stars 23 forks source link

Using via cdn #100

Closed WpSlt closed 2 years ago

WpSlt commented 2 years ago

Using cdn I got: [Vue warn]: Component is missing template or render function. at <Tree nodes= (2) [{…}, {…}]0: {id: 1, label: 'Animal', nodes: Array(2)}1: {id: 6, label: 'People'}length: 2[[Prototype]]: Array(0) onUpdate:nodes=fn >

with following code:

<div id="trest">
    <Tree v-model:nodes="data" />
</div>

const test = Vue.createApp({ components: { Tree, }, setup() { const data = Vue.ref([ { id: 1, label: 'Animal', nodes: [ { id: 2, label: 'Dog', }, { id: 3, label: 'Cat', nodes: [ { id: 4, label: 'Egyptian Mau Cat', }, { id: 5, label: 'Japanese Bobtail Cat', }, ], }, ], }, { id: 6, label: 'People', }, ]);

return {
  data,
};

} }); test.component("Tree", Tree) const testEl = test.mount('#test')

kadiryazici commented 2 years ago

Hi, I think this is because we didn't specify a build option for unpkg or jsdelivr. With this PR I hope it'll be fixed https://github.com/teamseodo/vue3-tree/pull/101.

After this PR passes you will be able to use vue3-tree like this:

<link rel="stylesheet" href="https://unpkg.com/vue3-tree@0.11.1/dist/style.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js"></script>
<script src="https://unpkg.com/vue3-tree@0.11.1/dist/vue3-tree.js"></script>
const TreeComponent = Tree.default;

/// OR

const MyComponent = {
  components: {
    Tree: Tree.default
  }
}

You need to import Vue first and then Vue3-Tree