CODEWITHSUNDEEP
vue.jsvue-router
shrw
shrw

Reputation: 1801

Vue.js how to load dependent components

Vue.js : how to load dependent components?

From router currently using component as follows:

import A from './A';

export default {
    components : {
        'new-comp-A' : NewCompA 
    }
}
...

But this renders the template before import causing errors. Is there a better way for loading dependencies?

The template uses the - did you register the component correctly.

Upvotes: 2

Views: 676

Answers (2)

Phil
Phil

Reputation: 164970

Your casing is incorrect. Use either 'NewCompA' or 'new-comp-a' for the name.

In fact, it would be even easier to use

import NewCompA from 'wherever/the/component/is/defined'

export default {
  components: {
    NewCompA
  }
}

Your template can then use either

<NewCompA></NewCompA>
<!-- or -->
<new-comp-a></new-comp-a>

See https://v2.vuejs.org/v2/guide/components-registration.html#Name-Casing

Upvotes: 2

Matt Oestreich
Matt Oestreich

Reputation: 8538

After looking at your code again, it does not seem normal. You are assigning the variable A to your component, but trying to import it with the variable NewCompA..

You need to change the following:

From this:

import A from './A';

export default {
    components : {
        'new-comp-A' : NewCompA 
    }
}
...

To this:

import A from './A';

export default {
    components : {
        'NewCompA' : A
    }
}
...

and use it like this:

<new-comp-a>

Upvotes: 1

Related Questions