Reuse Vue component in html with unpkg

Question

Struggling a lot to reuse a Vue component (vue-json-pretty) through unpkg. I guess I missing some basics but could not manage to sort it myself.

My HTML:

<link rel="stylesheet" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/styles.css"/>
<script src="https://unpkg.com/[email protected]/lib/vue-json-pretty.js"></script>

<div id="app">
  <div>
    <vue-json-pretty
      :path="'res'"
      :data="{ key: 'value' }"
      @click="handleClick">
    </vue-json-pretty>
  </div>
  <div>
    <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
      <h1 v-fd-margin:large>
         Hello Fundamental Vue 
      </h1>
      <template #control="{toggle}">
        <fd-button @click="toggle">Show Popover</fd-button>
      </template>
    </fd-popover>
  </div>
</div>

JS:

new Vue({ 
  el: '#app',
  data: {
    json: '{"count":3}'
  },
  methods: {
    handleClick: function() {
      console.log("clicked!")
    },
  },
})

Error Message:

"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the 'name' option. (found in )"

code in codepen

https://github.com/leezng/vue-json-pretty

Any help for my codepen example to work will be much appreciated :)

Answer 1

You need to declare vue-json-pretty as component. otherwise Vue dont know what is that tag. Declare it at top like this

Vue.component("vue-json-pretty", VueJsonPretty.default);
new Vue({
  el: '#app',
  data: {
    json: '{"count":4}'
  },
  methods: {
    handleClick: function() {
      console.log("clxicked!")
    },
  },
})