CODEWITHSUNDEEP
javascripttypescriptvue.jsvuejs2vue-component
Joe Scotto
Joe Scotto

Reputation: 10887

Vue define component with template and script from Vue()

I'm trying to define a component in my global Vue() init and have successfully defined the template for the component but cannot seem to define the actual class that is performing the work for the template. I am using Vue with typescript.

import ListClubsComponent from "./components/ts/list-club";

new Vue({
    el: "#app",
    components: {
        "list-clubs": {
            template: require("./components/clubs/list-clubs.html"),
            model: ListClubsComponent // This should be the class for the template
        }
    }
});

Upvotes: 1

Views: 1095

Answers (1)

cischa
cischa

Reputation: 424

Instead of defining the template for your component at the global Vue() component level, try defining it inside of './components/ts/list-club':

var ListClubsComponent = {
    template : ...,
    data:...
    ...
}

Then import and register that entire component altogether at the global Vue() component:

import ListClubsComponent from "./components/ts/list-club";
new Vue({
    ...
    components : {
        'list-clubs' : ListClubsComponent
    }
    ...
})

This should also be easier to maintain since the template is grouped together with its functionality.

More info at https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration

Upvotes: 2

Related Questions