switched to vue 3

pvanlierop · May 14, 2020 · 83ceaf0 · 83ceaf0
1 parent 0ade166
commit 83ceaf0
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 36 deletions.
diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js
@@ -1,11 +1,13 @@
-Vue.component('product-display', {
+app.component('product-display', {
   props: {
     premium: {
       type: Boolean,
-      required: true,
-    },
+      required: true
+    }
   },
-  template: `
+  template:
+    /*html*/
+    `
    <div class="product">
         
     <div class="container">
@@ -56,18 +58,18 @@ Vue.component('product-display', {
           id: 2234,
           color: 'green',
           image: './assets/images/socks_green.jpg',
-          quantity: 10,
+          quantity: 10
         },
         {
           id: 2235,
           color: 'blue',
           image: './assets/images/socks_blue.jpg',
-          quantity: 0,
-        },
+          quantity: 0
+        }
       ],
       reviews: [],
       tabs: ['review-form', 'review-list'],
-      activeTab: 'review-form',
+      activeTab: 'review-form'
     }
   },
   methods: {
@@ -79,7 +81,7 @@ Vue.component('product-display', {
     },
     addReview(review) {
       this.reviews.push(review)
-    },
+    }
   },
   computed: {
     productName() {
@@ -96,6 +98,6 @@ Vue.component('product-display', {
         return 'Free'
       }
       return 2.99
-    },
-  },
+    }
+  }
 })
diff --git a/components/ReviewForm.js b/components/ReviewForm.js
@@ -1,5 +1,7 @@
-Vue.component('review-form', {
-  template: `
+app.component('review-form', {
+  template:
+    /*html*/
+    `
     <form class="review-form" @submit.prevent="onSubmit">
       <h3>Leave a review</h3>
 
@@ -26,20 +28,20 @@ Vue.component('review-form', {
     return {
       name: '',
       text: '',
-      rating: null,
+      rating: null
     }
   },
   methods: {
     onSubmit() {
       const review = {
         name: this.name,
         text: this.text,
-        rating: this.rating,
+        rating: this.rating
       }
       this.$emit('review-submitted', review)
       this.name = ''
       this.text = ''
       this.rating = null
-    },
-  },
+    }
+  }
 })
diff --git a/components/ReviewList.js b/components/ReviewList.js
@@ -1,5 +1,7 @@
-Vue.component('review-list', {
-  template: `
+app.component('review-list', {
+  template:
+    /*html*/
+    `
     <div class="review-container">
       <p v-if="!reviews.length">There are no reviews yet.</p>
       <ul v-else>
@@ -14,7 +16,7 @@ Vue.component('review-list', {
   props: {
     reviews: {
       type: Array,
-      required: true,
-    },
-  },
+      required: true
+    }
+  }
 })
diff --git a/index.html b/index.html
@@ -6,15 +6,9 @@
     <!-- Import Styles -->
     <link rel="stylesheet" href="./assets/styles.css" />
     <!-- Import Vue.js -->
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
   </head>
-
   <body>
-    <!-- Import Components -->
-    <script src="./components/ProductDisplay.js"></script>
-    <script src="./components/ReviewForm.js"></script>
-    <script src="./components/ReviewList.js"></script>
-
     <div id="app">
       <div class="nav-bar"></div>
 
@@ -29,5 +23,9 @@
 
     <!-- Import App -->
     <script src="./main.js"></script>
+    <!-- Import Components -->
+    <script src="./components/ProductDisplay.js"></script>
+    <script src="./components/ReviewForm.js"></script>
+    <script src="./components/ReviewList.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,12 +1,15 @@
-const app = new Vue({
-  el: '#app',
-  data: {
-    premium: true,
-    cart: [],
+const app = Vue.createApp({
+  data() {
+    return {
+      premium: true,
+      cart: []
+    }
   },
   methods: {
     updateCart(id) {
       this.cart.push(id)
-    },
-  },
+    }
+  }
 })
+
+app.mount('#app')