CODEWITHSUNDEEP
typescriptvue-componentvuejs3vue-cli-3vue-class-components
Danny_DD
Danny_DD

Reputation: 796

Failed to resolve component in same folder Vue 3

I am using Vue 3 with class based components and Typescript. If I try to use a component inside another component I get this error:

[Vue warn]: Failed to resolve component: Button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

This Button component works without problems in other places. This is the component where I'm trying to use the Button and that throws the error:

<template>
    <form>
        <input type="email" />
        <Button text="Submit" />
    </form>
</template>

<script>
import { Vue, Options } from "vue-class-component";
import Button from "@/components/Button";

Options({
  components: {
    Button,
  },
});
export default class Registration extends Vue {}
</script>

I use this Registration component inside the view Status (just another component). This is my folder structure:

/src
--/components
----Button.vue
----Registration.vue
--/views
----Status.vue

I tried to replicate the same error in another component, and everything works. It looks like the problem is not the location (same folder) of the components.

If I try to console.log the component Button, the console will show the component:

Object { props: {…}, components: {…}, extends: {}, methods: {}, computed: {}, setup: setup(props, ctx), render: render(_ctx, _cache, $props, $setup, $data, $options), __scopeId: "data-v-015de462", __file: "src/components/Button.vue", __hmrId: "015de462" }

But in the template is not rendered. This is what is rendered:

<button text="Submit" data-v-5d567869=""></button>

I tried to use also other components instead Button, but I get the same result. I tried to import the component with ./Button instead of @/components/Button without success.

EDIT:

As the comment of @jeremy-castelli suggests, I tried to rename the Button component in CustomButton. I renamed also the filename in CustomButton.vue. In template then I used both <CustomButton ... and <custom-button .... The error stay the same.

What am I doing wrong?

Upvotes: 1

Views: 3930

Answers (1)

Danny_DD
Danny_DD

Reputation: 796

Is embarrassing, but I'll leave the solution here anyway. Let the humiliation serve as a lesson to me.

My decorator Options({}) is missing the @.

It should be @Options({}).

:/

Upvotes: 4

Related Questions