Is There Way To Inherit Templates With Mixins In Vuejs

Someone knows how inherit a mixin with its template? or how to inject dinamically elements or components from a mixin? EDIT: I don't want to modify greeting component, I have two M

Solution 1:

After years, I can imagine a elegant solution, and maybe it could be more elegant using classes, typescript or an annotation that create the component super in the mixin, but for now, the problem is partial solved.

GreetingMixin = {
  data() {
    return {
      greeting: 'Hello',
    };
  },
  provide() { return {child: this}},
  components: {
    super: {
      inject: ['child'],
      template: '<div class="blue">{{ child.greeting }} <strong><slot /></strong></div>',
    }
  },
}


// This should be <div class="blue">Hello <strong>World!</strong></div>Vue.component('welcomeWorld', {
  mixins: [GreetingMixin],
  template: '<super>World!</super>',
});

// This should be <div class="blue">Hi <strong><i>ali</i></strong></div>Vue.component('welcomeName', {
  mixins: [GreetingMixin],
  props: ["name"],
  created() { this.greeting = "Hi" },
  template: '<super><i>{{ name }}</i></super>',
});

// This should be <h1><div class="blue">Hello <strong>World</strong></div></h1>Vue.component('welcomeH1', {
  mixins: [GreetingMixin],
  props: ["name"],
  template: '<h1><super>{{ name }}</super></h1>',
});


var vm = newVue({
  el: '#app'
});

.blue {
color: blue
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><divid="app"><welcome-world></welcome-world><welcome-namename="Ali"></welcome-name><welcome-h1name="Ali"></welcome-h1></div>

Solution 2:

You can't "inherit" mixin templates like in your example, if it were possible there would have to be a standardized way of merging the templates.

Since it seems all you really want to do is inherit the template, why not use component composition with slots?

Vue.component('not-found', {
  template: '#not-found',
  methods: {
    doSomethingSpecial() {
      alert('Hi there');
    },
  },
});

newVue({
  el: '#app',
  data() {
    return {
      notFoundVisible: false,
    };
  },
});

.not-found {
  background-color: white;
  text-align: center;
  font-size: 30px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<scriptsrc="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script><templateid="not-found"><divclass="not-found"><h1>404 Not Found</h1><slot></slot></div></template><divid="app"><not-foundv-show="notFoundVisible" @click="notFoundVisible = false"v-ref:not-found>The resource was not found</not-found><button @click="notFoundVisible = true">Click Me</button><button @click="$refs.notFound.doSomethingSpecial()">Do Something Special</button></div>

Is there any particular reason why you need to mixin these components instead of composing them together?