CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2vue-component
Bryan Miller
Bryan Miller

Reputation: 3323

Vue components with partial reusability

I'm working on a large app with legacy code. I've run into this issue twice now and am realizing there must be a better solution than what I've done to solve it. The issue is as follows.

There are 3 separate pages where I need to add very similar Vue functionality. However, these pages have significantly different HTML/Blade templates. Therefore, it's like I have to pass in separate HTML/Blade templates to the component in addition to component props.

I can kind of accomplish this using Vue inline-templates, which takes care of the significantly different HTML/Blade template problem.

However, the remaining issue is that I have 3 .js Vue components, one for each page. This would be fine, except the Vue code in each file is very similar.

It's also possible that at some point I will need to add more unique Vue code to each component, and would like to keep that possibility open.

What I would like to do is find a way to reuse the Vue code that is very similar in each component.

I have tried thinking of a way to nest the same child component within each of these 3 separate components, but I don't see how that would be possible due to the differences in the HTML/Blade in each file.

Any suggestions would be most appreciated, as I feel like I'm duplicating too much Vue code!

Upvotes: 0

Views: 2532

Answers (1)

Bryan Miller
Bryan Miller

Reputation: 3323

Thanks to user thanksd for providing the solution in the comments above. Mixins indeed were the way to go for me. That way, instead of this:

Vue.component('first-component', {
    template: // something unique
    methods : {
        functionNumber1: function () {
            // do something
        },
});

Vue.component('second-component', {
    template: // something totally different
    methods : {
        functionNumber1: function () {
            // do same something
        },
    }

});

I can essentially do this:

const myMixin = {
    methods : {
        functionNumber1: function () {
            // do same something
        },
}

Vue.component('first-component', {
    template: // something unique
    mixins: ['myMixin']
});

Vue.component('second-component', {
    template: // something totally different
    mixins: ['myMixin']
});

Upvotes: 1

Related Questions