Vue define component with template and script from Vue()

Question

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

tony19 · Accepted Answer · 2022-07-15 04:34:39Z

2

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

edited Jul 15, 2022 at 4:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 4, 2019 at 19:09

cischa

4242 silver badges9 bronze badges

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

2 Comments

Joe Scotto Over a year ago

That worked perfectly.. now if I wanted to add an SCSS style to that how could I do it?

cischa Over a year ago

Awesome! If you want to combine all of (S)CSS, JS, and HTML into one file for a single component, Vue has a great framework for it called Vue single-file components: vuejs.org/v2/guide/single-file-components.html It's great to start using when your projects start getting more serious

Collectives™ on Stack Overflow

Vue define component with template and script from Vue()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related