Vue: Unknown custom element after adding component reference within component

Question

I'm new to Vue and testing vue-draggable component. Once I add reference to vue-draggable component, I get the error "Unknown custom element: < fxm-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

What am I missing here? Similar threads earlier does not have component referenced within a component.

import draggable from "./vue-draggable";

Vue.component('fxm-form', {
    name: 'fxm-form',

    props: [
        "formMode"
    ],

    components: {
        draggable
    },

    data() {
        return {
            list: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF']
            }
    },


    mounted() {
    },

    methods:
    {
    },

    template: `

    <div>
      <h1>Dragable Test</h1>

      <draggable :list="list" class="drag-container">
        <div v-for="item in list" class="drag-item">{{ item }}</div>
      </draggable>

    </div>
`
});

tony19 · Accepted Answer · 2022-07-16 00:59:50Z

2

When you create a component with Vue.component(), it registers components globally.

As per official docs:

global registration must take place before the root Vue instance is created (with new Vue)

This is because either you've not initialized your component before Vue Instance.

You can register your component inside you Vue Instance.

Here is the working codesandbox example

edited Jul 16, 2022 at 0:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 23, 2019 at 7:01

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Vue: Unknown custom element after adding component reference within 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