Vue 3: [Vue warn]: Failed to resolve component

Question

In Vue 3, when I register a component to use, I use the following in my .js file:

import blogpost from '../../../blogpost.vue'
app.use(blogpost);

I create a simple component, i.e. BlogPost.vue.

<!-- BlogPost.vue -->
<template>
    <h4>{{ title }}</h4>
</template>
<script>
    export default {
        name: 'BlogPost',
        props: ['title']
    }
</script>

In my html file, I call the following:

<div id="app">
    <blogpost title = 'test'/>
</div>

When I run the app, I get the following:

runtime-core.esm-bundler.js?fea0:38 [Vue warn]: Failed to resolve component: blogpost. If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

It's like Vue can't render the component. I am using webpack to compile, so if I put the wrong location in, it errors out. So the location is right, I guess?

Is there something I am doing wrong?

user18630923 · Accepted Answer · 2023-02-04 09:59:47Z

2

I don't know whether you have solved this, anyway, here is the answer. Use app.component() to globally register a component (look here).

answered Feb 4, 2023 at 9:59

user18630923

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3: [Vue warn]: Failed to resolve component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related