feat: initial support for vue 3

demo.html

@@ -67,14 +67,34 @@
   <hr/>
   <vue-loaders name="square-spin" color="black"></vue-loaders>
   <hr/>
+  <ball-beat color="black"></ball-beat>
+  <hr/>
 </div>
 
-<script src="dist/vue-loaders.umd.js"></script>
-<script src="dist/loaders/ball-beat.js"></script>
+<script src="./dist/vue-loaders.umd.js"></script>
+<script src="./dist/loaders/ball-beat.js"></script>
 <script>
-Vue.use(VueLoaders);
-// Vue.use(VueLoadersBallBeat);
-new Vue().$mount('#app')
+function v2() {
+  Vue.use(VueLoaders);
+  Vue.component('ball-beat', VueLoadersBallBeat.component);
+  new Vue().$mount('#app')
+}
+
+function v3() {
+  const app = Vue.createApp({
+    components: {
+      BallBeat: VueLoadersBallBeat.component
+    }
+  });
+
+  app.use(VueLoaders);
+  app.mount('#app')
+}
+
+const bootstrap = /3\./.test(Vue.version) ? v3 : v2;
+
+bootstrap();
+
 </script>
 </body>
 </html>

package.json

@@ -60,7 +60,11 @@
     "rollup": "1.31.0",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-postcss": "2.0.6",
-    "rollup-plugin-uglify": "6.0.4"
+    "rollup-plugin-uglify": "6.0.4",
+    "vue": "3.0.0-alpha.11"
+  },
+  "peerDependencies": {
+    "vue": "2.x.x||3.x.x||>=3.0.0-alpha||>=3.0.0-beta||>=3.0.0-rc"
   },
   "babel": {
     "presets": [

rollup.config.js

@@ -18,8 +18,12 @@ function createBundleOptionsForLoaders(loaders) {
       name: getLoaderName(fileName),
       file: `./dist/loaders/${fileName}`,
       format: 'umd',
-      esModule: true
+      esModule: true,
+      globals: {
+        'vue': 'Vue'
+      },
     },
+    external: ['vue'],
     plugins: [
       resolve(),
       commonjs(),
@@ -40,8 +44,12 @@ export default [
       file: pkg.main,
       format: 'umd',
       exports: 'default',
-      esModule: true
+      esModule: true,
+      globals: {
+        'vue': 'Vue'
+      },
     },
+    external: ['vue'],
     plugins: [
       resolve(),
       commonjs(),
@@ -65,6 +73,7 @@ export default [
     output: [
       {file: pkg.module, format: 'es'}
     ],
+    external: ['vue'],
     plugins: [
       resolve(),
       commonjs(),