├── .gitignore
├── src
    └── multivue.js
├── package.json
├── dist
    └── multivue.js
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.DS_Store
3 | 


--------------------------------------------------------------------------------
/src/multivue.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | /**
 4 |  * Creates an instance for each occurence of the given query selector.
 5 |  *
 6 |  * @param {String} querySelector
 7 |  * @param {Object} vueComponent
 8 |  * @return {Array}
 9 |  */
10 | export default function(querySelector, vueComponent) {
11 |     const appElements = Array.from(document.querySelectorAll(querySelector));
12 |     const instances = [];
13 |   
14 |     if (appElements.length === 0) {
15 |       return instances;
16 |     }
17 |   
18 |     for (const appEl of appElements) {
19 |       const vueData = Object.assign({
20 |         el: appEl,
21 |       }, vueComponent);
22 |   
23 |       instances.push(new Vue(vueData));
24 |     }
25 |   
26 |     return instances;
27 |   }
28 |   


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-multivue",
 3 |   "version": "1.0.1",
 4 |   "description": "Allows using multiple vue apps of the same class on the same page.",
 5 |   "main": "dist/multivue.js",
 6 |   "scripts": {
 7 |     "compile": "babel --presets=es2015 -d dist src",
 8 |     "prepublish": "npm run compile"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "multivue",
13 |     "multiple",
14 |     "javascript"
15 |   ],
16 |   "author": "Drew J Bartlett",
17 |   "license": "ISC",
18 |   "dependencies": {
19 |     "vue": "^2.3.4"
20 |   },
21 |   "babel": {
22 |     "presets": [
23 |       "es2015"
24 |     ]
25 |   },
26 |   "bugs": {
27 |     "url": "https://github.com/drewjbartlett/vue-multivue/issues"
28 |   },
29 |   "homepage": "https://github.com/drewjbartlett/vue-multivue#readme",
30 |   "devDependencies": {
31 |     "babel-cli": "^6.24.1",
32 |     "babel-preset-es2015": "^6.24.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/dist/multivue.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | exports.default = function (querySelector, vueComponent) {
 8 |     var appElements = Array.from(document.querySelectorAll(querySelector));
 9 | 
10 |     var _iteratorNormalCompletion = true;
11 |     var _didIteratorError = false;
12 |     var _iteratorError = undefined;
13 | 
14 |     try {
15 |         for (var _iterator = appElements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
16 |             var appEl = _step.value;
17 | 
18 |             var vueData = Object.assign({
19 |                 el: appEl
20 |             }, vueComponent);
21 | 
22 |             new _vue2.default(vueData);
23 |         }
24 |     } catch (err) {
25 |         _didIteratorError = true;
26 |         _iteratorError = err;
27 |     } finally {
28 |         try {
29 |             if (!_iteratorNormalCompletion && _iterator.return) {
30 |                 _iterator.return();
31 |             }
32 |         } finally {
33 |             if (_didIteratorError) {
34 |                 throw _iteratorError;
35 |             }
36 |         }
37 |     }
38 | };
39 | 
40 | var _vue = require('vue');
41 | 
42 | var _vue2 = _interopRequireDefault(_vue);
43 | 
44 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # MultiVue for Vue.js
 2 | 
 3 | Use multiple vue apps of the same class on the same page.
 4 | 
 5 | ## Vue support
 6 | 
 7 | Supports only Vue >= 2
 8 | 
 9 | ## Installation
10 | 
11 |     $ npm install vue-multivue --save
12 | 
13 | ## JS & Vue
14 | 
15 | ```vue
16 | // AwesomeComponent.vue
17 | <template>
18 |     <div>
19 |         <button @click="doSomethingCool"></button>
20 |     </div>
21 | </template>
22 | 
23 | <script>
24 |     export default {
25 |         data () {
26 |             return {
27 |                 isDoingSomethingCool: false
28 |             }
29 |         },
30 | 
31 |         methods: {
32 |             doSomethingCool () {
33 |                 this.isDoingSomethingCool = true;
34 |             }
35 |         }
36 |     }
37 | </script>
38 | ```
39 | 
40 | ```js
41 | // app.js
42 | import MultiVue from 'vue-multivue';
43 | import AwesomeComponent from './Components/AwesomeComponent.vue';
44 | 
45 | new MultiVue('.my-app', {
46 |     components: {
47 |         AwesomeComponent
48 |     }
49 | });
50 | ```
51 | 
52 | ## HTML
53 | 
54 | Now you can use your app with the `.my-app` selector multiple times on a single page.
55 | 
56 | ```html
57 | <html>
58 |     <body>
59 |         <div class="wrap">
60 |             <div class="my-app">
61 |                 <awesome-component></awesome-component>
62 |             </div>
63 | 
64 |             <div class="some-other-div">...</div>
65 | 
66 |             <div class="my-app another-class">
67 |                 <awesome-component></awesome-component>
68 |             </div>
69 | 
70 |             <div class="some-other-div-again">...</div>
71 | 
72 |             <div class="my-app some-other-class">
73 |                 <awesome-component></awesome-component>
74 |             </div>
75 |         </div>
76 |     </body>
77 | </html>
78 | ```
79 | 


--------------------------------------------------------------------------------