vue-multivue

1.0.1 • Public • Published

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>

Package Sidebar

Install

npm i vue-multivue

Weekly Downloads

12

Version

1.0.1

License

ISC

Unpacked Size

4.06 kB

Total Files

4

Last publish

Collaborators

  • drewjbartlett