CODEWITHSUNDEEP
vue.jsvue-component
frosty
frosty

Reputation: 2852

Vue: Unknown custom element after adding component reference within component

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>
`
});

Upvotes: 0

Views: 2055

Answers (1)

Varit J Patel
Varit J Patel

Reputation: 3520

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

Upvotes: 2

Related Questions