vue multivue

Multivue para vue.js

Use múltiples aplicaciones VUE de la misma clase en la misma página.

Soporte VUE

Admite solo vue> = 2

Instalación

 $ npm install vue-multivue --save

JS y 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

Ahora puede usar su aplicación con el selector .my-app varias veces en una sola página.

 < 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 >