Unknown custom element element in Vue for a widget non-imported component

0
votes

Normally, one would use Vue.component() to register an imported component. However, I am including a widget snippet in my code instead of an imported module:

<template>
  <v-dialog>
      <script type="application/javascript" defer src="some/hosted/javascript/app.js"></script> 
      <link href="some/hosted/css/app.css" rel="stylesheet" />
      <example-vue-widget some-prop="some-data"></example-vue-widget>
  </v-dialog>
</template>

This is from a widget I created following this tutorial which uses webpack: https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

This widget is essentially a third-party element which works properly.

However, I am getting this:

[Vue warn]: Unknown custom element: <example-vue-widget> - did you register the
component correctly? For recursive components, make sure to provide the "name" option.

I understand why Vue is showing me the warning above as a console error. However, how would I be able to solve this or at least suppress this specific warning?

2
javascripthtmlvue.jswebpackwidget

2 Answers

1
votes

You can register the component in your main.js file. This article does a great job of explaining it. You're basically just gonna add this line to the main file before your new Vue({}) statement. Hopefully that helps!

// Globally register your component
Vue.component('example-vue-widget', exampleVueWidget);
0
votes

Moving the and elements into index.html while keeping the widget snipped tag where it should be solved the issue.