JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<div id='app'>
  <users-list></users-list>
  <companies-list></companies-list>
</div>

JavaScript

var ListMixin = {
  data: function() {
    return {title: 'Just a List' }
  },
  template: '<div><div>{{titleReversed}}</div><app-list :items="items"></app-list></div>',
  computed: {
    titleReversed () {
      return this.title.split('').reverse().join('');
    }
  }
};

var UsersList = {
  mixins: [ListMixin],
  data () {
    return {
      title: 'Users',
      items: ['User 1', 'User 2', 'User 3']
    };
  }
};

var AppList = {
  template: '<ul><li v-for="i in items"><{{i}}/li></ul>'
};

var CompaniesList = {
  mixins: [ListMixin],
  data () {
    return {
      items: ['Company 1', 'Company 2', 'Company 3']
    };
  }
};

Vue.component('appList', {
  props: ['items'],
  template: '<ul><li v-for="i in items">{{i}}</li></ul>'
});

new Vue({
  el: '#app',
  components: {
    usersList: UsersList,
    companiesList: CompaniesList
  }
});