How do we create a widget in Vuejs using vue-custom-element and Vuejs3 in html?-CodePudding

I am trying to learn how to create a simple VueJs Widget using vue-custom-element in a simple HTML page so I can use that page where ever it seems fit.

I am trying to add it by following

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-custom-element.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>
<script>
  Vue.customElement('test-widget', {
    template: `<div>Hello World!</div>`
  });
</script>

Unfortunately, when I am trying to load the page I am seeing 2 errors

Uncaught TypeError: window.Vue.use is not a function at vue-custom-element.min.js:6:9328
Uncaught TypeError: Vue.customElement is not a function

I think it has something to do with the compatibility but not quite sure. So thanks in advance and remember I am trying to make it work on the HTML page, not on Vue CLI, and please suggest if there's any better way to do it.

CodePudding user response：

From vue-custom-element's Description:

Works with Vue 0.12.x, 1.x and 2.x

You're using https://cdn.jsdelivr.net/npm/vue, which resolves to latest 3.x.

Let's change Vue version to latest 2.x:

<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-custom-element.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>
<script>
  Vue.customElement('test-widget', {
    template: `<div>Hello World!</div>`
  });
</script>

<test-widget></test-widget>