Unknown custom element: <preview-component> ovide the “name” option

Question

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

Answer 1

The error your are getting is probably because your forgot to register your component inside your app.js :

new Vue({
    components: {
        PreviewComponent,
    },

Or you forgot to add name to your component inside the <script> tags of your component:

export default {
    name: 'preview-component',
    ...
}

After you register, don't forget to run npm again. This should solve your issue.

Answer 2

Are you using the recursive component registration in app.js?

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

If so, then you'll need to specify the name in the component explicitly in kebab-case:

<script>
export default {
  name: 'preview-component'
...
}
</script>

or

Don't register a name in the component and name the file using Pascal case: PreviewComponent.vue