refactor: migrate to <script setup>

src/components/AppBreadcrumb.vue

@@ -1,3 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+const breadcrumbs = ref()
+
+const getBreadcrumbs = () => {
+  return router.currentRoute.value.matched.map((route) => {
+    return {
+      active: route.path === router.currentRoute.value.fullPath,
+      name: route.name,
+      path: `${router.options.history.base}${route.path}`,
+    }
+  })
+}
+
+router.afterEach(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+
+onMounted(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+</script>
+
 <template>
   <CBreadcrumb class="my-0">
     <CBreadcrumbItem
@@ -9,38 +34,4 @@
       {{ item.name }}
     </CBreadcrumbItem>
   </CBreadcrumb>
-</template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import router from '@/router'
-
-export default {
-  name: 'AppBreadcrumb',
-  setup() {
-    const breadcrumbs = ref()
-
-    const getBreadcrumbs = () => {
-      return router.currentRoute.value.matched.map((route) => {
-        return {
-          active: route.path === router.currentRoute.value.fullPath,
-          name: route.name,
-          path: `${router.options.history.base}${route.path}`,
-        }
-      })
-    }
-
-    router.afterEach(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    onMounted(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    return {
-      breadcrumbs,
-    }
-  },
-}
-</script>
+</template>

src/components/AppFooter.vue

@@ -12,9 +12,3 @@
     </div>
   </CFooter>
 </template>
-
-<script>
-export default {
-  name: 'AppFooter',
-}
-</script>

src/components/AppHeader.vue

@@ -1,3 +1,23 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useColorModes } from '@coreui/vue'
+import AppBreadcrumb from './AppBreadcrumb'
+import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+const headerClassNames = ref('mb-4 p-0')
+const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+
+onMounted(() => {
+  document.addEventListener('scroll', () => {
+    if (document.documentElement.scrollTop > 0) {
+      headerClassNames.value = 'mb-4 p-0 shadow-sm'
+    } else {
+      headerClassNames.value = 'mb-4 p-0'
+    }
+  })
+})
+</script>
+
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
@@ -83,37 +103,3 @@
     </CContainer>
   </CHeader>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-export default {
-  name: 'AppHeader',
-  components: {
-    AppBreadcrumb,
-    AppHeaderDropdownAccnt,
-  },
-  setup() {
-    const headerClassNames = ref('mb-4 p-0')
-    const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-
-    onMounted(() => {
-      document.addEventListener('scroll', () => {
-        if (document.documentElement.scrollTop > 0) {
-          headerClassNames.value = 'mb-4 p-0 shadow-sm'
-        } else {
-          headerClassNames.value = 'mb-4 p-0'
-        }
-      })
-    })
-
-    return {
-      headerClassNames,
-      colorMode,
-      setColorMode,
-    }
-  },
-}
-</script>

src/components/AppHeaderDropdownAccnt.vue

@@ -1,3 +1,9 @@
+<script setup>
+import avatar from '@/assets/images/avatars/8.jpg'
+
+const itemsCount = 42
+</script>
+
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
     <CDropdownToggle class="py-0 pe-0" :caret="false">
@@ -32,12 +38,8 @@
       >
         Settings
       </CDropdownHeader>
-      <CDropdownItem>
-        <CIcon icon="cil-user" /> Profile
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-settings" /> Settings
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
         <CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -47,25 +49,8 @@
         <CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
       <CDropdownDivider />
-      <CDropdownItem>
-        <CIcon icon="cil-shield-alt" /> Lock Account
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-lock-locked" /> Logout
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>
-
-<script>
-import avatar from '@/assets/images/avatars/8.jpg'
-export default {
-  name: 'AppHeaderDropdownAccnt',
-  setup() {
-    return {
-      avatar: avatar,
-      itemsCount: 42,
-    }
-  },
-}
-</script>

src/components/AppSidebar.vue

@@ -1,3 +1,17 @@
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useStore } from 'vuex'
+import { AppSidebarNav } from './AppSidebarNav'
+import { logo } from '@/assets/brand/logo'
+import { sygnet } from '@/assets/brand/sygnet'
+
+const store = useStore()
+const sidebarUnfoldable =  computed(() => store.state.sidebarUnfoldable)
+const sidebarVisible = computed(() => store.state.sidebarVisible)
+</script>
+
 <template>
   <CSidebar
     class="border-end"
@@ -28,28 +42,3 @@
     </CSidebarFooter>
   </CSidebar>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useStore } from 'vuex'
-import { AppSidebarNav } from './AppSidebarNav'
-import { logo } from '@/assets/brand/logo'
-import { sygnet } from '@/assets/brand/sygnet'
-export default {
-  name: 'AppSidebar',
-  components: {
-    AppSidebarNav,
-    RouterLink,
-  },
-  setup() {
-    const store = useStore()
-    return {
-      logo,
-      sygnet,
-      sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
-      sidebarVisible: computed(() => store.state.sidebarVisible),
-    }
-  },
-}
-</script>

src/components/AppSidebarNav.js

@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
       )
   },
 })
-export { AppSidebarNav }
+
+export { AppSidebarNav }

src/components/DocsExample.vue

@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  tabContentClass: String,
+})
+
+const url = `https://coreui.io/vue/docs/${props.href}`
+const addClass = props.tabContentClass
+</script>
+
 <template>
   <div class="example">
     <CNav variant="underline-border">
@@ -21,22 +31,3 @@
     </CTabContent>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'DocsExample',
-  props: {
-    href: String,
-    tabContentClass: String,
-  },
-  setup(props) {
-    const url = `https://coreui.io/vue/docs/${props.href}`
-    const addClass = props.tabContentClass
- 
-    return {
-      addClass,
-      url,
-    }
-  },
-}
-</script>