/vue-multivue

Use multiple Vue apps of the same class on the same page

Primary LanguageJavaScript

MultiVue for Vue.js

Use multiple vue apps of the same class on the same page.

Vue support

Supports only Vue >= 2

Installation

$ npm install vue-multivue --save

JS & Vue

// AwesomeComponent.vue
<template>
    <div>
        <button @click="doSomethingCool"></button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                isDoingSomethingCool: false
            }
        },

        methods: {
            doSomethingCool () {
                this.isDoingSomethingCool = true;
            }
        }
    }
</script>
// app.js
import MultiVue from 'vue-multivue';
import AwesomeComponent from './Components/AwesomeComponent.vue';

new MultiVue('.my-app', {
    components: {
        AwesomeComponent
    }
});

HTML

Now you can use your app with the .my-app selector multiple times on a single page.

<html>
    <body>
        <div class="wrap">
            <div class="my-app">
                <awesome-component></awesome-component>
            </div>

            <div class="some-other-div">...</div>

            <div class="my-app another-class">
                <awesome-component></awesome-component>
            </div>

            <div class="some-other-div-again">...</div>

            <div class="my-app some-other-class">
                <awesome-component></awesome-component>
            </div>
        </div>
    </body>
</html>