Use multiple Vue apps of the same class on the same page
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist getting things ready to publish Jul 11, 2017
src Add proper documentation to multivue. Add instances to array and retu… Feb 6, 2018
.gitignore initial commit Jul 11, 2017
package.json 1.0.1 Feb 6, 2018
readme.md Update readme.md Jul 12, 2017

readme.md

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>