add: defineComponent

Author: vikdiesel

src/App.vue

@@ -8,12 +8,13 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import menu from '@/menu.js'
 import NavBar from '@/components/NavBar.vue'
 import AsideMenu from '@/components/AsideMenu.vue'
 import FooterBar from '@/components/FooterBar.vue'
 
-export default {
+export default defineComponent({
   name: 'Home',
   components: {
     FooterBar,
@@ -32,5 +33,5 @@ export default {
       avatar: 'https://avatars.dicebear.com/v2/gridy/John-Doe.svg'
     })
   }
-}
+})
 </script>

src/components/AsideMenu.vue

@@ -35,10 +35,11 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { mapState } from 'vuex'
 import AsideMenuList from '@/components/AsideMenuList.vue'
 
-export default {
+export default defineComponent({
   name: 'AsideMenu',
   components: { AsideMenuList },
   props: {
@@ -65,5 +66,5 @@ export default {
       //
     }
   }
-}
+})
 </script>

src/components/AsideMenuItem.vue

@@ -40,7 +40,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'AsideMenuItem',
   components: {
     AsideMenuList: () => import('@/components/AsideMenuList.vue')
@@ -77,5 +79,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

src/components/AsideMenuList.vue

@@ -10,9 +10,10 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import AsideMenuItem from '@/components/AsideMenuItem.vue'
 
-export default {
+export default defineComponent({
   name: 'AsideMenuList',
   components: {
     AsideMenuItem
@@ -30,5 +31,5 @@ export default {
       this.$emit('menu-click', item)
     }
   }
-}
+})
 </script>

src/components/CardComponent.vue

@@ -32,7 +32,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'CardComponent',
   props: {
     title: {
@@ -54,5 +56,5 @@ export default {
       this.$emit('header-icon-click')
     }
   }
-}
+})
 </script>

src/components/CardWidget.vue

@@ -32,10 +32,11 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import CardComponent from '@/components/CardComponent.vue'
 import GrowingNumber from '@/components/GrowingNumber.vue'
 
-export default {
+export default defineComponent({
   name: 'CardWidget',
   components: { GrowingNumber, CardComponent },
   props: {
@@ -64,5 +65,5 @@ export default {
       default: null
     }
   }
-}
+})
 </script>

src/components/Charts/LineChart.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { Line as LineChartElement } from 'vue-chartjs/legacy'
 import {
   Chart,
@@ -22,7 +23,7 @@ import {
 
 Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
 
-export default {
+export default defineComponent({
   name: 'LineChart',
   components: {
     LineChartElement
@@ -49,5 +50,5 @@ export default {
       default: 150
     }
   }
-}
+})
 </script>

src/components/CheckboxRadioPicker.vue

@@ -21,7 +21,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'CheckboxRadioPicker',
   props: {
     options: {
@@ -51,5 +53,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

src/components/ClientsTableSample.vue

@@ -122,10 +122,11 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { mapState } from 'vuex'
 import ModalBox from '@/components/ModalBox.vue'
 
-export default {
+export default defineComponent({
   name: 'ClientsTableSample',
   components: { ModalBox },
   props: {
@@ -168,5 +169,5 @@ export default {
       this.isModalActive = false
     }
   }
-}
+})
 </script>

src/components/FilePicker.vue

@@ -26,7 +26,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'FilePicker',
   props: {
     accept: {
@@ -82,5 +84,5 @@ export default {
     //   )
     // }
   }
-}
+})
 </script>