Initial setup for vue 3.

+ upgraded to vue 3.
+ replaced node-sass with sass package.
+ updated version to 0.2.0
+ Made toggle work with vue 3 syntax.

Author: mve

package.json

@@ -1,25 +1,24 @@
 {
   "name": "vue-toggle-component",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.11.0",
-    "node-sass": "^5.0.0",
-    "sass-loader": "^11.0.1",
-    "vue": "^2.6.12"
+    "sass": "^1.32.11",
+    "sass-loader": "10.1.1",
+    "vue": "^3.0.11"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.12",
     "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.12",
+    "@vue/compiler-sfc": "^3.0.11",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^6.2.2"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -1,14 +1,13 @@
 <template>
-  <div id="app">
-    <vue-toggle title="Toggle me" id="1" />
-  </div>
+  <VueToggle title="Toggle me" id="1"/>
 </template>
 
 <script>
-import VueToggle from "@vue-toggle-component";
+import VueToggle from "./components/VueToggle";
 
 export default {
-  name:       'App',
-  components: { VueToggle },
+  name: 'App',
+  components: {VueToggle}
 }
+
 </script>

src/components/VueToggle.vue

@@ -1,21 +1,20 @@
 <template>
   <section class="wrapper" :title="title">
-    <input :id="id" :name="name" v-model="toggled" class="toggle" type="checkbox" @click="toggled = !toggled" />
-    <label :for="id" class="toggler" />
-    <span class="title" v-text="title" @click="toggled = !toggled" />
+    <input :id="id" :name="name" v-model="toggled" class="toggle" type="checkbox" @click="toggled = !toggled"/>
+    <label :for="id" class="toggler"/>
+    <span class="title" v-text="title" @click="toggled = !toggled"/>
   </section>
 </template>
 
 <script>
-
 export default {
   name: 'VueToggle',
 
   props: {
-    id:      { type: String, required: true },
-    name:    { type: [String, Boolean], default: false },
-    title:   { type: String, required: true },
-    toggled: { type: Boolean, default: false },
+    id: {type: String, required: true},
+    name: {type: [String, Boolean], default: false},
+    title: {type: String, required: true},
+    toggled: {type: Boolean, default: false},
   },
 }
 </script>

src/main.js

@@ -1,6 +1,4 @@
-import Vue from 'vue'
+import {createApp} from "vue";
 import App from './App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({ render: h => h(App) }).$mount('#app')
+createApp(App).mount('#app');