Error 'Unknown custom element: <vue-json-pretty>'

[duduindo]

JSBin

https://jsbin.com/fomudog/edit?html,console

Console

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

found in

---> <App>
       <Root>"

Code

// App
const App = Vue.component('app', {
  render(create) {
    return create('div', [
      create('vue-json-pretty', {
        props: {              
          data: "{ key: 'value' }"
        }
      })
    ])
  }      
})

// Use    
Vue.use(VueJsonPretty)
      
// Instance
new Vue({        
  render(create) {
    return create(App)
  }
}).$mount('#app')

[duduindo]

My Solution

JSBin

https://jsbin.com/sizowup/edit?html,output

Code

// App
const App = Vue.component('app', {
  render(create) {
    return create('div', [
      create('vue-json-pretty', {
        props: {                           
          data: { 
            key: 'value',
            first: 'Hello, World!',
          }
        }
      })
    ])
  }      
})

/**
 * HERE
 */
// Use    
// Vue.use(VueJsonPretty)
Vue.component('vue-json-pretty', VueJsonPretty.default)

      
// Instance
new Vue({        
  render(create) {
    return create(App)          
  }
}).$mount('#app')

Difference

From:

// Use    
Vue.use(VueJsonPretty)

To:

// Use    
// Vue.use(VueJsonPretty)
Vue.component('vue-json-pretty', VueJsonPretty.default) // Why 'default'?

[leezng]

See the differences between CommonJS and ESModule