From 43745d958ad07ad86ca09166b337cd627b00183d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 29 Apr 2024 13:51:42 +0200
Subject: [PATCH 01/11] refactor: migrate to `<script setup>`

---
 .eslintrc.js => .eslintrc.cjs               |   2 +
 src/App.vue                                 |  56 ++-
 src/_nav.js                                 |  17 -
 src/components/AppBreadcrumb.vue            |  61 ++--
 src/components/AppFooter.vue                |   6 -
 src/components/AppHeader.vue                |  54 ++-
 src/components/AppHeaderDropdownAccnt.vue   |  35 +-
 src/components/AppSidebar.vue               |  39 +-
 src/components/AppSidebarNav.js             |   3 +-
 src/components/DocsExample.vue              |  29 +-
 src/layouts/DefaultLayout.vue               |  23 +-
 src/styles/style.scss                       |   1 +
 src/views/base/Accordion.vue                |  17 +-
 src/views/base/Breadcrumbs.vue              |   6 -
 src/views/base/Cards.vue                    |  21 +-
 src/views/base/Carousels.vue                |  24 +-
 src/views/base/Collapses.vue                |  86 ++---
 src/views/base/ListGroups.vue               |  26 +-
 src/views/base/Navs.vue                     |  10 +-
 src/views/base/Paginations.vue              |   6 -
 src/views/base/Placeholders.vue             |  22 +-
 src/views/base/Popovers.vue                 |   6 -
 src/views/base/Progress.vue                 |  31 +-
 src/views/base/Spinners.vue                 |  14 +-
 src/views/base/Tables.vue                   |   6 -
 src/views/base/Tooltips.vue                 |   6 -
 src/views/buttons/ButtonGroups.vue          |   6 -
 src/views/buttons/Buttons.vue               |  18 +-
 src/views/buttons/Dropdowns.vue             |   8 +-
 src/views/charts/CChartBarExample.vue       |  61 ++--
 src/views/charts/CChartDoughnutExample.vue  |  33 +-
 src/views/charts/CChartLineExample.vue      |  45 +--
 src/views/charts/CChartPieExample.vue       |  33 +-
 src/views/charts/CChartPolarAreaExample.vue |  73 ++--
 src/views/charts/CChartRadarExample.vue     |  75 ++--
 src/views/charts/Charts.vue                 |  21 +-
 src/views/dashboard/Dashboard.vue           | 271 +++++++-------
 src/views/dashboard/MainChart.vue           | 248 ++++++-------
 src/views/forms/ChecksRadios.vue            |   6 -
 src/views/forms/FloatingLabels.vue          |   6 -
 src/views/forms/FormControl.vue             |   6 -
 src/views/forms/InputGroup.vue              |  14 +-
 src/views/forms/Layout.vue                  |   6 -
 src/views/forms/Range.vue                   |  10 +-
 src/views/forms/Select.vue                  |   7 -
 src/views/forms/Validation.vue              | 305 ++++++----------
 src/views/icons/Brands.vue                  |  24 +-
 src/views/icons/CoreUIIcons.vue             |  24 +-
 src/views/icons/Flags.vue                   |  24 +-
 src/views/notifications/Alerts.vue          |  19 +-
 src/views/notifications/Badges.vue          |  34 +-
 src/views/notifications/Modals.vue          | 376 ++++++++------------
 src/views/notifications/Toasts.vue          |  38 +-
 src/views/pages/Login.vue                   |   8 +-
 src/views/pages/Page404.vue                 |   8 +-
 src/views/pages/Page500.vue                 |   8 +-
 src/views/pages/Register.vue                |   8 +-
 src/views/theme/ColorTheme.vue              |  20 +-
 src/views/theme/Colors.vue                  |  28 +-
 src/views/theme/Typography.vue              |   6 -
 src/views/widgets/Widgets.vue               | 124 +++----
 src/views/widgets/WidgetsStatsTypeA.vue     | 133 ++-----
 src/views/widgets/WidgetsStatsTypeD.vue     |  75 ++--
 63 files changed, 1059 insertions(+), 1757 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (78%)

diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 78%
rename from .eslintrc.js
rename to .eslintrc.cjs
index fc9e572a..7d0be3d2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.cjs
@@ -1,7 +1,9 @@
+/* eslint-env node */
 module.exports = {
   extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'vue/multi-word-component-names': 'off',
   },
 };
diff --git a/src/App.vue b/src/App.vue
index 177546e0..9a8eaeca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,36 @@
-<template>
-  <router-view />
-</template>
-<script>
+<script setup>
 import { onBeforeMount } from 'vue'
 import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-export default {
-  setup() {
-    const { isColorModeSet, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
-    const store = useStore()
-
-    onBeforeMount(() => {
-      const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme =
-        urlParams.get('theme') &&
-        urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-      if (theme) {
-        setColorMode(theme)
-        return
-      }
-
-      if (isColorModeSet()) {
-        return
-      }
-
-      setColorMode(store.state.theme)
-    })
-  },
-}
+const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const store = useStore()
+
+onBeforeMount(() => {
+  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+  let theme = urlParams.get('theme')
+
+  if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
+    theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
+  }
+
+  if (theme) {
+    setColorMode(theme)
+    return
+  }
+
+  if (isColorModeSet()) {
+    return
+  }
+
+  setColorMode(store.state.theme)
+})
 </script>
 
+<template>
+  <router-view />
+</template>
+
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';
diff --git a/src/_nav.js b/src/_nav.js
index 6e7d0eb5..3433bdaf 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -282,21 +282,4 @@ export default [
       },
     ],
   },
-
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Download CoreUI',
-  //   href: 'http://coreui.io/vue/',
-  //   icon: { name: 'cil-cloud-download', class: 'text-white' },
-  //   _class: 'bg-success text-white',
-  //   target: '_blank'
-  // },
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Try CoreUI PRO',
-  //   href: 'http://coreui.io/pro/vue/',
-  //   icon: { name: 'cil-layers', class: 'text-white' },
-  //   _class: 'bg-danger text-white',
-  //   target: '_blank'
-  // }
 ]
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 49ddfc73..be83cad9 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 391618c4..b62df395 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -12,9 +12,3 @@
     </div>
   </CFooter>
 </template>
-
-<script>
-export default {
-  name: 'AppFooter',
-}
-</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 043a1ca7..46e2b842 100644
--- a/src/components/AppHeader.vue
+++ b/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>
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index f6166fc7..d51d1fe0 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/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>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index e4d53528..bfc3b075 100644
--- a/src/components/AppSidebar.vue
+++ b/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>
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 11092c7d..68c30537 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
       )
   },
 })
-export { AppSidebarNav }
+
+export { AppSidebarNav }
\ No newline at end of file
diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue
index 5ec26d21..31d46bf0 100644
--- a/src/components/DocsExample.vue
+++ b/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>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 83d249ac..4779d05a 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { CContainer } from '@coreui/vue'
+import AppFooter from '@/components/AppFooter.vue'
+import AppHeader from '@/components/AppHeader.vue'
+import AppSidebar from '@/components/AppSidebar.vue'
+</script>
+
 <template>
   <div>
     <AppSidebar />
@@ -12,19 +19,3 @@
     </div>
   </div>
 </template>
-<script>
-import { CContainer } from '@coreui/vue'
-import AppFooter from '@/components/AppFooter.vue'
-import AppHeader from '@/components/AppHeader.vue'
-import AppSidebar from '@/components/AppSidebar.vue'
-
-export default {
-  name: 'DefaultLayout',
-  components: {
-    AppFooter,
-    AppHeader,
-    AppSidebar,
-    CContainer,
-  },
-}
-</script>
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 6fbabff0..4fbc8235 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -3,6 +3,7 @@
 
 // Import styles
 @import "@coreui/coreui/scss/coreui";
+@import "@coreui/chartjs/scss/coreui-chartjs";
 
 // Vendors
 @import "vendors/simplebar";
diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue
index addf3053..83edaaf1 100644
--- a/src/views/base/Accordion.vue
+++ b/src/views/base/Accordion.vue
@@ -1,3 +1,4 @@
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -176,19 +177,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Accordion',
-  setup() {
-    const activeKey = ref(1)
-    const flushActiveKey = ref(1)
-
-    return {
-      activeKey,
-      flushActiveKey,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 1052fca3..c23bb469 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -54,9 +54,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Breadcrumbs',
-}
-</script>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index cb071768..43cf10b9 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -1,3 +1,8 @@
+
+<script setup>
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -227,7 +232,7 @@
           </p>
           <DocsExample href="components/card.html/#header-and-footer">
             <CCard>
-              <CCardHeader component="h5">Header</CCardHeader>
+              <CCardHeader as="h5">Header</CCardHeader>
               <CCardBody>
                 <CCardTitle>Special title treatment</CCardTitle>
                 <CCardText>
@@ -967,16 +972,4 @@
       </CCard>
     </CCol>
   </CRow>
-</template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Cards',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 3433ec1c..0003404b 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,3 +1,9 @@
+<script setup>
+import AngularImg from '@/assets/images/angular.jpg'
+import ReactImg from '@/assets/images/react.jpg'
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -82,7 +88,7 @@
             <code>&lt;CCarouselCaption&gt;</code> element within any
             <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
             on smaller viewports, as shown below, with optional
-            <a href="https://coreui.io/4.0/utilities/display"
+            <a href="https://coreui.io/docs/utilities/display"
               >display utilities</a
             >. We hide them with <code>.d-none</code> and draw them back on
             medium-sized devices with <code>.d-md-block</code>.
@@ -175,19 +181,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import AngularImg from '@/assets/images/angular.jpg'
-import ReactImg from '@/assets/images/react.jpg'
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Carousels',
-  setup() {
-    return {
-      AngularImg,
-      ReactImg,
-      VueImg,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 34d00f96..296dd9f3 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,3 +1,12 @@
+<script setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+const visibleA = ref(false)
+const visibleB = ref(false)
+const visibleHorizontal = ref(false)
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -6,23 +15,16 @@
           <strong>Vue Collapse</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-body-secondary small">
-            You can use a link or a button component.
-          </p>
+          <p class="text-body-secondary small">You can use a link or a button component.</p>
           <DocsExample href="components/collapse.html#example">
-            <CButton color="primary" href="#" @click="visible = !visible"
-              >Link</CButton
-            >
-            <CButton color="primary" @click="visible = !visible"
-              >Button</CButton
-            >
+            <CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
+            <CButton color="primary" @click="visible = !visible">Button</CButton>
             <CCollapse :visible="visible">
               <CCard class="mt-3">
                 <CCardBody>
-                  Anim pariatur cliche reprehenderit, enim eiusmod high life
-                  accusamus terry richardson ad squid. Nihil anim keffiyeh
-                  helvetica, craft beer labore wes anderson cred nesciunt
-                  sapiente ea proident.
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                  richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                  cred nesciunt sapiente ea proident.
                 </CCardBody>
               </CCard>
             </CCollapse>
@@ -30,15 +32,12 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> Horizontal</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> Horizontal</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
             The collapse plugin also supports horizontal collapsing. Add the
-            <code>horizontal</code> property to transition the
-            <code>width</code> instead of <code>height</code> and set a
-            <code>width</code> on the immediate child element.
+            <code>horizontal</code> property to transition the <code>width</code> instead of
+            <code>height</code> and set a <code>width</code> on the immediate child element.
           </p>
           <DocsExample href="components/collapse.html#horizontal">
             <CButton
@@ -53,8 +52,8 @@
               <CCollapse horizontal :visible="visibleHorizontal">
                 <CCard style="width: 300px">
                   <CCardBody>
-                    This is some placeholder content for a horizontal collapse.
-                    It's hidden by default and shown when triggered.
+                    This is some placeholder content for a horizontal collapse. It's hidden by
+                    default and shown when triggered.
                   </CCardBody>
                 </CCard>
               </CCollapse>
@@ -63,21 +62,15 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> multi target</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> multi target</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
             A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
           </p>
           <h4 class="mt-4">Toggle multiple targets</h4>
           <DocsExample href="components/collapse.html#multiple-targets">
-            <CButton color="primary" @click="visibleA = !visibleA"
-              >Toggle first element</CButton
-            >
-            <CButton color="primary" @click="visibleB = !visibleB"
-              >Toggle second element</CButton
-            >
+            <CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
+            <CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
             <CButton
               color="primary"
               @click="
@@ -94,10 +87,9 @@
                 <CCollapse :visible="visibleA">
                   <CCard class="mt-3">
                     <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -106,10 +98,9 @@
                 <CCollapse :visible="visibleB">
                   <CCard class="mt-3">
                     <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -121,22 +112,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Collapse',
-  setup() {
-    const visible = ref(false)
-    const visibleA = ref(false)
-    const visibleB = ref(false)
-    const visibleHorizontal = ref(false)
-    return {
-      visible,
-      visibleA,
-      visibleB,
-      visibleHorizontal,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 1cf4cfbb..23093fc7 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -86,19 +86,19 @@
           </p>
           <DocsExample href="components/list-group.html#links-and-buttons">
             <CListGroup>
-              <CListGroupItem component="a" href="#" active>
+              <CListGroupItem as="a" href="#" active>
                 Cras justo odio
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Dapibus ac facilisis in
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Morbi leo risus
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Porta ac consectetur ac
               </CListGroupItem>
-              <CListGroupItem component="a" href="#" disabled>
+              <CListGroupItem as="a" href="#" disabled>
                 Vestibulum at eros
               </CListGroupItem>
             </CListGroup>
@@ -204,7 +204,7 @@
           </p>
           <DocsExample href="components/list-group.html#contextual-classes">
             <CListGroup>
-              <CListGroupItem component="a" href="#"
+              <CListGroupItem as="a" href="#"
                 >Dapibus ac facilisis in</CListGroupItem
               >
               <CListGroupItem
@@ -219,7 +219,7 @@
                   'dark',
                 ]"
                 :key="item"
-                component="a"
+                as="a"
                 href="#"
                 :color="item"
                 >A simple {{ item }} list group item</CListGroupItem
@@ -279,7 +279,7 @@
           </p>
           <DocsExample href="components/list-group.html#custom-content">
             <CListGroup>
-              <CListGroupItem component="a" href="#" active>
+              <CListGroupItem as="a" href="#" active>
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small>3 days ago</small>
@@ -290,7 +290,7 @@
                 </p>
                 <small>Donec id elit non mi porta.</small>
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small class="text-body-secondary">3 days ago</small>
@@ -303,7 +303,7 @@
                   >Donec id elit non mi porta.</small
                 >
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small class="text-body-secondary">3 days ago</small>
@@ -355,9 +355,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ListGroups',
-}
-</script>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 652afd87..ec73f2a8 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -38,7 +38,7 @@
             the extra markup.
           </p>
           <DocsExample href="components/nav.html#base-nav">
-            <CNav component="nav">
+            <CNav as="nav">
               <CNavLink href="#" active> Active </CNavLink>
               <CNavLink href="#">Link</CNavLink>
               <CNavLink href="#">Link</CNavLink>
@@ -265,7 +265,7 @@
           </p>
           <DocsExample href="components/nav.html#working-with-flex-utilities">
             <CNav
-              component="nav"
+              as="nav"
               variant="pills"
               class="flex-column flex-sm-row"
             >
@@ -344,9 +344,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Navs',
-}
-</script>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 14c4ecbc..060cdd02 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -173,9 +173,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Paginations',
-}
-</script>
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
index 723b68be..631375cd 100644
--- a/src/views/base/Placeholders.vue
+++ b/src/views/base/Placeholders.vue
@@ -1,3 +1,7 @@
+<script setup>
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -26,7 +30,7 @@
               </CCard>
               <CCard style="width: 18rem">
                 <CCardImage
-                  component="svg"
+                  as="svg"
                   orientation="top"
                   width="100%"
                   height="162"
@@ -160,11 +164,11 @@
             something being <em>actively</em> loaded.
           </p>
           <DocsExample href="components/placeholder.html#animation">
-            <CPlaceholder component="p" animation="glow">
+            <CPlaceholder as="p" animation="glow">
               <CPlaceholder :xs="12" />
             </CPlaceholder>
 
-            <CPlaceholder component="p" animation="wave">
+            <CPlaceholder as="p" animation="wave">
               <CPlaceholder :xs="12" />
             </CPlaceholder>
           </DocsExample>
@@ -173,15 +177,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Placeholders',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 1127cf3c..33d6d8a0 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -76,9 +76,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Popovers',
-}
-</script>
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index ff300e5a..8d7f810d 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -137,16 +137,32 @@
           </p>
           <DocsExample href="components/progress.html#striped">
             <CProgress class="mb-3">
-              <CProgressBar color="success" variant="striped" :value="25" />
+              <CProgressBar
+                color="success"
+                variant="striped"
+                :value="25"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="info" variant="striped" :value="50" />
+              <CProgressBar
+                color="info"
+                variant="striped"
+                :value="50"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="warning" variant="striped" :value="75" />
+              <CProgressBar
+                color="warning"
+                variant="striped"
+                :value="75"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="danger" variant="striped" :value="100" />
+              <CProgressBar
+                color="danger"
+                variant="striped"
+                :value="100"
+              />
             </CProgress>
           </DocsExample>
         </CCardBody>
@@ -203,10 +219,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Progress',
-}
-</script>
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 8c366349..54d5d44c 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -91,17 +91,17 @@
           </p>
           <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
+              <CSpinner as="span" size="sm" aria-hidden="true" />
             </CButton>
             <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
+              <CSpinner as="span" size="sm" aria-hidden="true" />
               Loading...
             </CButton>
           </DocsExample>
           <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
               <CSpinner
-                component="span"
+                as="span"
                 size="sm"
                 variant="grow"
                 aria-hidden="true"
@@ -109,7 +109,7 @@
             </CButton>
             <CButton disabled>
               <CSpinner
-                component="span"
+                as="span"
                 size="sm"
                 variant="grow"
                 aria-hidden="true"
@@ -122,9 +122,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Spinners',
-}
-</script>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 30dde23b..6dcc2a94 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -985,9 +985,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tables',
-}
-</script>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 31bc9841..cbf68c99 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -72,9 +72,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tooltips',
-}
-</script>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index d1b97bf5..479874a5 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -415,9 +415,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ButtonGroups',
-}
-</script>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 9d18dcb3..fc09f196 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -122,24 +122,24 @@
             meaning to assistive technologies such as screen readers.
           </p>
           <DocsExample href="components/button.html#button-components">
-            <CButton component="a" color="primary" href="#" role="button">
+            <CButton as="a" color="primary" href="#" role="button">
               Link
             </CButton>
             <CButton type="submit" color="primary"> Button </CButton>
             <CButton
-              component="input"
+              as="input"
               type="button"
               color="primary"
               value="Input"
             />
             <CButton
-              component="input"
+              as="input"
               type="submit"
               color="primary"
               value="Submit"
             />
             <CButton
-              component="input"
+              as="input"
               type="reset"
               color="primary"
               value="Reset"
@@ -359,11 +359,11 @@
             state of the component to assistive technologies.
           </p>
           <DocsExample href="components/button.html#disabled-state">
-            <CButton component="a" href="#" color="primary" size="lg" disabled>
+            <CButton as="a" href="#" color="primary" size="lg" disabled>
               Primary link
             </CButton>
             <CButton
-              component="a"
+              as="a"
               href="#"
               color="secondary"
               size="lg"
@@ -434,9 +434,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Buttons',
-}
-</script>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 8b0b93b6..4fbd90e3 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -225,7 +225,7 @@
                   class="collapse navbar-collapse"
                 >
                   <ul class="navbar-nav">
-                    <CDropdown dark component="li" variant="nav-item">
+                    <CDropdown dark as="li" variant="nav-item">
                       <CDropdownToggle>Dropdown</CDropdownToggle>
                       <CDropdownMenu>
                         <CDropdownItem href="#">Action</CDropdownItem>
@@ -353,9 +353,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Dropdowns',
-}
-</script>
diff --git a/src/views/charts/CChartBarExample.vue b/src/views/charts/CChartBarExample.vue
index 33e927f5..6f735afe 100644
--- a/src/views/charts/CChartBarExample.vue
+++ b/src/views/charts/CChartBarExample.vue
@@ -1,38 +1,31 @@
-<template>
-  <CChartBar :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartBar } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartBarExample',
-  components: { CChartBar },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'January',
-          'February',
-          'March',
-          'April',
-          'May',
-          'June',
-          'July',
-          'August',
-          'September',
-          'October',
-          'November',
-          'December',
-        ],
-        datasets: [
-          {
-            label: 'GitHub Commits',
-            backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
-          },
-        ],
-      }
+
+const data = {
+  labels: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartBar :data="data" />
+</template>
\ No newline at end of file
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
index 653c8c89..2a6e75b9 100644
--- a/src/views/charts/CChartDoughnutExample.vue
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -1,24 +1,17 @@
-<template>
-  <CChartDoughnut :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartDoughnut } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartDoughnutExample',
-  components: { CChartDoughnut },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
+  datasets: [
+    {
+      backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+      data: [40, 20, 80, 10],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartDoughnut :data="data" />
+</template>
diff --git a/src/views/charts/CChartLineExample.vue b/src/views/charts/CChartLineExample.vue
index f1a0cc6a..e1682d0b 100644
--- a/src/views/charts/CChartLineExample.vue
+++ b/src/views/charts/CChartLineExample.vue
@@ -1,30 +1,23 @@
-<template>
-  <CChartLine :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartLine } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartLineExample',
-  components: { CChartLine },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['months', 'a', 'b', 'c', 'd'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: 'rgb(228,102,81,0.9)',
-            data: [30, 39, 10, 50, 30, 70, 35],
-          },
-          {
-            label: 'Data Two',
-            backgroundColor: 'rgb(0,216,255,0.9)',
-            data: [39, 80, 40, 35, 40, 20, 45],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['months', 'a', 'b', 'c', 'd'],
+  datasets: [
+    {
+      label: 'Data One',
+      backgroundColor: 'rgb(228,102,81,0.9)',
+      data: [30, 39, 10, 50, 30, 70, 35],
     },
-  },
+    {
+      label: 'Data Two',
+      backgroundColor: 'rgb(0,216,255,0.9)',
+      data: [39, 80, 40, 35, 40, 20, 45],
+    },
+  ],
 }
 </script>
+
+<template>
+  <CChartLine :data="data" />
+</template>
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
index b4857377..8819dd43 100644
--- a/src/views/charts/CChartPieExample.vue
+++ b/src/views/charts/CChartPieExample.vue
@@ -1,24 +1,17 @@
-<template>
-  <CChartPie :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPie } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPieExample',
-  components: { CChartPie },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
+  datasets: [
+    {
+      backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+      data: [40, 20, 80, 10],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartPie :data="data" />
+</template>
diff --git a/src/views/charts/CChartPolarAreaExample.vue b/src/views/charts/CChartPolarAreaExample.vue
index 192b2e24..7311fae6 100644
--- a/src/views/charts/CChartPolarAreaExample.vue
+++ b/src/views/charts/CChartPolarAreaExample.vue
@@ -1,49 +1,34 @@
-<template>
-  <CChartPolarArea :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPolarArea } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPolarAreaExample',
-  components: { CChartPolarArea },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: 'My First dataset',
-            backgroundColor: 'rgba(179,181,198,0.5)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(179,181,198,1)',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: 'My Second dataset',
-            backgroundColor: 'rgba(255,99,132,0.5)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(255,99,132,1)',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: 'rgba(179,181,198,0.5)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
     },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'rgba(255,99,132,0.5)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
+    },
+  ],
+  options: {
+    aspectRatio: 1.5,
   },
 }
 </script>
+
+<template>
+  <CChartPolarArea :data="data" />
+</template>
diff --git a/src/views/charts/CChartRadarExample.vue b/src/views/charts/CChartRadarExample.vue
index c4513702..79e2e214 100644
--- a/src/views/charts/CChartRadarExample.vue
+++ b/src/views/charts/CChartRadarExample.vue
@@ -1,53 +1,38 @@
 <template>
-  <CChartRadar :data="defaultData" />
+  <CChartRadar :data="data" />
 </template>
 
-<script>
+<script setup>
 import { CChartRadar } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartRadarExample',
-  components: { CChartRadar },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: '2020',
-            backgroundColor: 'rgba(179,181,198,0.2)',
-            borderColor: 'rgba(179,181,198,1)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            tooltipLabelColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: '2021',
-            backgroundColor: 'rgba(255,99,132,0.2)',
-            borderColor: 'rgba(255,99,132,1)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            tooltipLabelColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: '2020',
+      backgroundColor: 'rgba(179,181,198,0.2)',
+      borderColor: 'rgba(179,181,198,1)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      tooltipLabelColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
+    },
+    {
+      label: '2021',
+      backgroundColor: 'rgba(255,99,132,0.2)',
+      borderColor: 'rgba(255,99,132,1)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      tooltipLabelColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
     },
+  ],
+  options: {
+    aspectRatio: 1.5,
   },
 }
 </script>
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
index eff0304f..9457ec80 100644
--- a/src/views/charts/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -1,3 +1,14 @@
+<script setup>
+import {
+  CChartLineExample,
+  CChartBarExample,
+  CChartDoughnutExample,
+  CChartRadarExample,
+  CChartPieExample,
+  CChartPolarAreaExample,
+} from './index.js'
+</script>
+
 <template>
   <CRow>
     <CCol :md="6" class="mb-4">
@@ -40,13 +51,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import * as Charts from './index.js'
-export default {
-  name: 'Charts',
-  components: {
-    ...Charts,
-  },
-}
-</script>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index fc95f213..644979b9 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,3 +1,130 @@
+<script setup>
+import avatar1 from '@/assets/images/avatars/1.jpg'
+import avatar2 from '@/assets/images/avatars/2.jpg'
+import avatar3 from '@/assets/images/avatars/3.jpg'
+import avatar4 from '@/assets/images/avatars/4.jpg'
+import avatar5 from '@/assets/images/avatars/5.jpg'
+import avatar6 from '@/assets/images/avatars/6.jpg'
+import MainChart from './MainChart.vue'
+import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
+
+const progressGroupExample1 = [
+  { title: 'Monday', value1: 34, value2: 78 },
+  { title: 'Tuesday', value1: 56, value2: 94 },
+  { title: 'Wednesday', value1: 12, value2: 67 },
+  { title: 'Thursday', value1: 43, value2: 91 },
+  { title: 'Friday', value1: 22, value2: 73 },
+  { title: 'Saturday', value1: 53, value2: 82 },
+  { title: 'Sunday', value1: 9, value2: 69 },
+]
+const progressGroupExample2 = [
+  { title: 'Male', icon: 'cil-user', value: 53 },
+  { title: 'Female', icon: 'cil-user-female', value: 43 },
+]
+const progressGroupExample3 = [
+  {
+    title: 'Organic Search',
+    icon: 'cib-google',
+    percent: 56,
+    value: '191,235',
+  },
+  { title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
+  { title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
+  { title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
+]
+const tableExample = [
+  {
+    avatar: { src: avatar1, status: 'success' },
+    user: {
+      name: 'Yiorgos Avraamu',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'USA', flag: 'cif-us' },
+    usage: {
+      value: 50,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'success',
+    },
+    payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
+    activity: '10 sec ago',
+  },
+  {
+    avatar: { src: avatar2, status: 'danger' },
+    user: {
+      name: 'Avram Tarasios',
+      new: false,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Brazil', flag: 'cif-br' },
+    usage: {
+      value: 22,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'info',
+    },
+    payment: { name: 'Visa', icon: 'cib-cc-visa' },
+    activity: '5 minutes ago',
+  },
+  {
+    avatar: { src: avatar3, status: 'warning' },
+    user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
+    country: { name: 'India', flag: 'cif-in' },
+    usage: {
+      value: 74,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'warning',
+    },
+    payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
+    activity: '1 hour ago',
+  },
+  {
+    avatar: { src: avatar4, status: 'secondary' },
+    user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
+    country: { name: 'France', flag: 'cif-fr' },
+    usage: {
+      value: 98,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'danger',
+    },
+    payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
+    activity: 'Last month',
+  },
+  {
+    avatar: { src: avatar5, status: 'success' },
+    user: {
+      name: 'Agapetus Tadeáš',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Spain', flag: 'cif-es' },
+    usage: {
+      value: 22,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'primary',
+    },
+    payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
+    activity: 'Last week',
+  },
+  {
+    avatar: { src: avatar6, status: 'danger' },
+    user: {
+      name: 'Friderik Dávid',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Poland', flag: 'cif-pl' },
+    usage: {
+      value: 43,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'success',
+    },
+    payment: { name: 'Amex', icon: 'cib-cc-amex' },
+    activity: 'Last week',
+  },
+]
+</script>
+
 <template>
   <div>
     <WidgetsStatsA class="mb-4" />
@@ -208,147 +335,3 @@
     </CRow>
   </div>
 </template>
-
-<script>
-import avatar1 from '@/assets/images/avatars/1.jpg'
-import avatar2 from '@/assets/images/avatars/2.jpg'
-import avatar3 from '@/assets/images/avatars/3.jpg'
-import avatar4 from '@/assets/images/avatars/4.jpg'
-import avatar5 from '@/assets/images/avatars/5.jpg'
-import avatar6 from '@/assets/images/avatars/6.jpg'
-import MainChart from './MainChart'
-import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
-
-export default {
-  name: 'Dashboard',
-  components: {
-    MainChart,
-    WidgetsStatsA,
-    WidgetsStatsD,
-  },
-  setup() {
-    const progressGroupExample1 = [
-      { title: 'Monday', value1: 34, value2: 78 },
-      { title: 'Tuesday', value1: 56, value2: 94 },
-      { title: 'Wednesday', value1: 12, value2: 67 },
-      { title: 'Thursday', value1: 43, value2: 91 },
-      { title: 'Friday', value1: 22, value2: 73 },
-      { title: 'Saturday', value1: 53, value2: 82 },
-      { title: 'Sunday', value1: 9, value2: 69 },
-    ]
-    const progressGroupExample2 = [
-      { title: 'Male', icon: 'cil-user', value: 53 },
-      { title: 'Female', icon: 'cil-user-female', value: 43 },
-    ]
-    const progressGroupExample3 = [
-      {
-        title: 'Organic Search',
-        icon: 'cib-google',
-        percent: 56,
-        value: '191,235',
-      },
-      { title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
-      { title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
-      { title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
-    ]
-    const tableExample = [
-      {
-        avatar: { src: avatar1, status: 'success' },
-        user: {
-          name: 'Yiorgos Avraamu',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'USA', flag: 'cif-us' },
-        usage: {
-          value: 50,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'success',
-        },
-        payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
-        activity: '10 sec ago',
-      },
-      {
-        avatar: { src: avatar2, status: 'danger' },
-        user: {
-          name: 'Avram Tarasios',
-          new: false,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Brazil', flag: 'cif-br' },
-        usage: {
-          value: 22,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'info',
-        },
-        payment: { name: 'Visa', icon: 'cib-cc-visa' },
-        activity: '5 minutes ago',
-      },
-      {
-        avatar: { src: avatar3, status: 'warning' },
-        user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
-        country: { name: 'India', flag: 'cif-in' },
-        usage: {
-          value: 74,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'warning',
-        },
-        payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
-        activity: '1 hour ago',
-      },
-      {
-        avatar: { src: avatar4, status: 'secondary' },
-        user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
-        country: { name: 'France', flag: 'cif-fr' },
-        usage: {
-          value: 98,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'danger',
-        },
-        payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
-        activity: 'Last month',
-      },
-      {
-        avatar: { src: avatar5, status: 'success' },
-        user: {
-          name: 'Agapetus Tadeáš',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Spain', flag: 'cif-es' },
-        usage: {
-          value: 22,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'primary',
-        },
-        payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
-        activity: 'Last week',
-      },
-      {
-        avatar: { src: avatar6, status: 'danger' },
-        user: {
-          name: 'Friderik Dávid',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Poland', flag: 'cif-pl' },
-        usage: {
-          value: 43,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'success',
-        },
-        payment: { name: 'Amex', icon: 'cib-cc-amex' },
-        activity: 'Last week',
-      },
-    ]
-
-    return {
-      tableExample,
-      progressGroupExample1,
-      progressGroupExample2,
-      progressGroupExample3,
-    }
-  },
-}
-</script>
diff --git a/src/views/dashboard/MainChart.vue b/src/views/dashboard/MainChart.vue
index 6df1c977..acadd733 100644
--- a/src/views/dashboard/MainChart.vue
+++ b/src/views/dashboard/MainChart.vue
@@ -1,148 +1,128 @@
-<template>
-  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
-</template>
-
-<script>
+<script setup>
 import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
 import { getStyle } from '@coreui/utils'
 
 const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
-export default {
-  name: 'MainChartExample',
-  components: {
-    CChart,
-  },
-  setup() {
-    const mainChartRef = ref()
-    const data = {
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
-          borderColor: getStyle('--cui-info'),
-          pointHoverBackgroundColor: getStyle('--cui-info'),
-          borderWidth: 2,
-          data: [
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-          ],
-          fill: true,
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'transparent',
-          borderColor: getStyle('--cui-success'),
-          pointHoverBackgroundColor: getStyle('--cui-success'),
-          borderWidth: 2,
-          data: [
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-          ],
-        },
-        {
-          label: 'My Third dataset',
-          backgroundColor: 'transparent',
-          borderColor: getStyle('--cui-danger'),
-          pointHoverBackgroundColor: getStyle('--cui-danger'),
-          borderWidth: 1,
-          borderDash: [8, 5],
-          data: [65, 65, 65, 65, 65, 65, 65],
-        },
+const mainChartRef = ref()
+const data = {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+      borderColor: getStyle('--cui-info'),
+      pointHoverBackgroundColor: getStyle('--cui-info'),
+      borderWidth: 2,
+      data: [
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
       ],
-    }
+      fill: true,
+    },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'transparent',
+      borderColor: getStyle('--cui-success'),
+      pointHoverBackgroundColor: getStyle('--cui-success'),
+      borderWidth: 2,
+      data: [
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+      ],
+    },
+    {
+      label: 'My Third dataset',
+      backgroundColor: 'transparent',
+      borderColor: getStyle('--cui-danger'),
+      pointHoverBackgroundColor: getStyle('--cui-danger'),
+      borderWidth: 1,
+      borderDash: [8, 5],
+      data: [65, 65, 65, 65, 65, 65, 65],
+    },
+  ],
+}
 
-    const options = {
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
+const options = {
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      grid: {
+        color: getStyle('--cui-border-color-translucent'),
+        drawOnChartArea: false,
       },
-      scales: {
-        x: {
-          grid: {
-            color: getStyle('--cui-border-color-translucent'),
-            drawOnChartArea: false,
-          },
-          ticks: {
-            color: getStyle('--cui-body-color'),
-          },
-        },
-        y: {
-          beginAtZero: true,
-          border: {
-            color: getStyle('--cui-border-color-translucent'),
-          },
-          grid: {
-            color: getStyle('--cui-border-color-translucent'),
-          },
-          max: 250,
-          ticks: {
-            color: getStyle('--cui-body-color'),
-            maxTicksLimit: 5,
-            stepSize: Math.ceil(250 / 5),
-          },
-        },
+      ticks: {
+        color: getStyle('--cui-body-color'),
       },
-      elements: {
-        line: {
-          tension: 0.4,
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3,
-        },
+    },
+    y: {
+      beginAtZero: true,
+      border: {
+        color: getStyle('--cui-border-color-translucent'),
       },
-    }
-
-    onMounted(() => {
-      document.documentElement.addEventListener('ColorSchemeChange', () => {
-        if (mainChartRef.value) {
-          mainChartRef.value.chart,
-            (options.scales.x.grid.borderColor = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.x.grid.color = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.x.ticks.color = getStyle('--cui-body-color'))
-          mainChartRef.value.chart,
-            (options.scales.y.grid.borderColor = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.y.grid.color = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.y.ticks.color = getStyle('--cui-body-color'))
-          mainChartRef.value.chart.update()
-        }
-      })
-    })
-
-    return {
-      data,
-      mainChartRef,
-      options,
-    }
+      grid: {
+        color: getStyle('--cui-border-color-translucent'),
+      },
+      max: 250,
+      ticks: {
+        color: getStyle('--cui-body-color'),
+        maxTicksLimit: 5,
+        stepSize: Math.ceil(250 / 5),
+      },
+    },
+  },
+  elements: {
+    line: {
+      tension: 0.4,
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 4,
+      hoverBorderWidth: 3,
+    },
   },
 }
+
+onMounted(() => {
+  document.documentElement.addEventListener('ColorSchemeChange', () => {
+    if (mainChartRef.value) {
+      mainChartRef.value.chart.options.scales.x.grid.borderColor = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.x.grid.color = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.x.ticks.color = getStyle('--cui-body-color')
+      mainChartRef.value.chart.options.scales.y.grid.borderColor = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.y.grid.color = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.y.ticks.color = getStyle('--cui-body-color')
+      mainChartRef.value.chart.update()
+    }
+  })
+})
 </script>
+
+<template>
+  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
+</template>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index b41d44ca..932013b9 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -396,9 +396,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ChecksRadios',
-}
-</script>
diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue
index 0ecc2ae9..e171d190 100644
--- a/src/views/forms/FloatingLabels.vue
+++ b/src/views/forms/FloatingLabels.vue
@@ -170,9 +170,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FloatingLabels',
-}
-</script>
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index c36e6d00..fc307643 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -242,9 +242,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FormControl',
-}
-</script>
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 7322fc69..9c1fa052 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -400,7 +400,7 @@
         <CCardBody>
           <DocsExample href="forms/input-group.html#custom-select">
             <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupSelect01">
+              <CInputGroupText as="label" for="inputGroupSelect01">
                 Options
               </CInputGroupText>
               <CFormSelect id="inputGroupSelect01">
@@ -417,7 +417,7 @@
                 <option value="2">Two</option>
                 <option value="3">Three</option>
               </CFormSelect>
-              <CInputGroupText component="label" for="inputGroupSelect02">
+              <CInputGroupText as="label" for="inputGroupSelect02">
                 Options
               </CInputGroupText>
             </CInputGroup>
@@ -461,14 +461,14 @@
         <CCardBody>
           <DocsExample href="forms/input-group.html#custom-file-input">
             <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupFile01">
+              <CInputGroupText as="label" for="inputGroupFile01">
                 Upload
               </CInputGroupText>
               <CFormInput id="inputGroupFile01" type="file" />
             </CInputGroup>
             <CInputGroup class="mb-3">
               <CFormInput id="inputGroupFile02" type="file" />
-              <CInputGroupText component="label" for="inputGroupFile02">
+              <CInputGroupText as="label" for="inputGroupFile02">
                 Upload
               </CInputGroupText>
             </CInputGroup>
@@ -510,9 +510,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'InputGroup',
-}
-</script>
diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue
index aae8cc4f..711043f1 100644
--- a/src/views/forms/Layout.vue
+++ b/src/views/forms/Layout.vue
@@ -450,9 +450,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Layout',
-}
-</script>
diff --git a/src/views/forms/Range.vue b/src/views/forms/Range.vue
index 58d6b90b..3a92d645 100644
--- a/src/views/forms/Range.vue
+++ b/src/views/forms/Range.vue
@@ -47,7 +47,7 @@
           </p>
           <DocsExample href="forms/range.html#min-and-max">
             <CFormLabel for="customRange2">Example range</CFormLabel>
-            <CFormRange id="customRange2" :min="0" :max="5" value="3" />
+            <CFormRange id="customRange2" :min="0" :max="5" :value="3" />
           </DocsExample>
         </CCardBody>
       </CCard>
@@ -71,7 +71,7 @@
               :min="0"
               :max="5"
               :step="0.5"
-              value="3"
+              :value="3"
             />
           </DocsExample>
         </CCardBody>
@@ -79,9 +79,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Range',
-}
-</script>
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index 96a75f78..61649e8f 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -105,10 +105,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Select',
-}
-</script>
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index 905325ed..edacace9 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -1,25 +1,58 @@
+<script setup>
+import { ref } from 'vue'
+const validatedCustom01 = ref(false)
+const validatedDefault01 = ref(false)
+const validatedTooltip01 = ref(false)
+
+const handleSubmitCustom01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  validatedCustom01.value = true
+}
+
+const handleSubmitDefault01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  validatedDefault01.value = true
+}
+
+const handleSubmitTooltip01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+  
+  validatedTooltip01.value = true
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Custom styles</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            For custom CoreUI form validation messages, you&#39;ll need to add
-            the
-            <code>novalidate</code> boolean property to your
-            <code>&lt;CForm&gt;</code>. This disables the browser default
-            feedback tooltips, but still provides access to the form validation
-            APIs in JavaScript. Try to submit the form below; our JavaScript
-            will intercept the submit button and relay feedback to you. When
-            attempting to submit, you&#39;ll see the <code>:invalid</code> and
-            <code>:valid</code> styles applied to your form controls.
+            For custom CoreUI form validation messages, you&#39;ll need to add the
+            <code>novalidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
+            disables the browser default feedback tooltips, but still provides access to the form
+            validation APIs in JavaScript. Try to submit the form below; our JavaScript will
+            intercept the submit button and relay feedback to you. When attempting to submit,
+            you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
+            form controls.
           </p>
           <p class="text-body-secondary small">
-            Custom feedback styles apply custom colors, borders, focus styles,
-            and background icons to better communicate feedback.
+            Custom feedback styles apply custom colors, borders, focus styles, and background icons
+            to better communicate feedback.
           </p>
           <DocsExample href="forms/validation.html">
             <CForm
@@ -48,17 +81,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationCustom03">City</CFormLabel>
                 <CFormInput id="validationCustom03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom04">City</CFormLabel>
@@ -66,16 +95,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom05">City</CFormLabel>
                 <CFormInput id="validationCustom05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -84,9 +109,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -98,20 +121,17 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Browser defaults</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Browser defaults</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Not interested in custom validation feedback messages or writing
-            JavaScript to change form behaviors? All good, you can use the
-            browser defaults. Try submitting the form below. Depending on your
-            browser and OS, you&#39;ll see a slightly different style of
+            Not interested in custom validation feedback messages or writing JavaScript to change
+            form behaviors? All good, you can use the browser defaults. Try submitting the form
+            below. Depending on your browser and OS, you&#39;ll see a slightly different style of
             feedback.
           </p>
           <p class="text-body-secondary small">
-            While these feedback styles cannot be styled with CSS, you can still
-            customize the feedback text through JavaScript.
+            While these feedback styles cannot be styled with CSS, you can still customize the
+            feedback text through JavaScript.
           </p>
           <DocsExample href="forms/validation.html#browser-defaults">
             <CForm
@@ -130,9 +150,7 @@
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
-                <CFormLabel for="validationDefaultUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationDefaultUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
                   <CFormInput
@@ -141,17 +159,13 @@
                     aria-describedby="inputGroupPrepend02"
                     required
                   />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationDefault03">City</CFormLabel>
                 <CFormInput id="validationDefault03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault04">City</CFormLabel>
@@ -159,16 +173,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault05">City</CFormLabel>
                 <CFormInput id="validationDefault05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -177,9 +187,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -191,48 +199,33 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Server side</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Server side</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            We recommend using client-side validation, but in case you require
-            server-side validation, you can indicate invalid and valid form
-            fields with <code>invalid</code> and <code>valid</code> boolean
-            properties.
+            We recommend using client-side validation, but in case you require server-side
+            validation, you can indicate invalid and valid form fields with <code>invalid</code> and
+            <code>valid</code> boolean properties.
           </p>
           <p class="text-body-secondary small">
-            For invalid fields, ensure that the invalid feedback/error message
-            is associated with the relevant form field using
-            <code>aria-describedby</code> (noting that this attribute allows
-            more than one <code>id</code> to be referenced, in case the field
-            already points to additional form text).
+            For invalid fields, ensure that the invalid feedback/error message is associated with
+            the relevant form field using
+            <code>aria-describedby</code> (noting that this attribute allows more than one
+            <code>id</code> to be referenced, in case the field already points to additional form
+            text).
           </p>
           <DocsExample href="forms/validation.html#server-side">
             <CForm class="row g-3 needs-validation">
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServer01">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer01"
-                  type="text"
-                  value="Mark"
-                  valid
-                  required
-                />
+                <CFormInput id="validationServer01" type="text" value="Mark" valid required />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServer02">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer02"
-                  type="text"
-                  value="Otto"
-                  valid
-                  required
-                />
+                <CFormInput id="validationServer02" type="text" value="Otto" valid required />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServerUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
@@ -244,22 +237,13 @@
                     invalid
                     required
                   />
-                  <CFormFeedback invalid
-                    >Please choose a username.</CFormFeedback
-                  >
+                  <CFormFeedback invalid>Please choose a username.</CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationServer03">City</CFormLabel>
-                <CFormInput
-                  id="validationServer03"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
+                <CFormInput id="validationServer03" type="text" invalid required />
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer04">City</CFormLabel>
@@ -267,21 +251,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer05">City</CFormLabel>
-                <CFormInput
-                  id="validationServer05"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid zip.</CFormFeedback
-                >
+                <CFormInput id="validationServer05" type="text" invalid required />
+                <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -291,9 +266,7 @@
                   invalid
                   required
                 />
-                <CFormFeedback invalid
-                  >You must agree before submitting.</CFormFeedback
-                >
+                <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit"> Submit form </CButton>
@@ -305,13 +278,10 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Supported elements</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Supported elements</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Validation styles are available for the following form controls and
-            components:
+            Validation styles are available for the following form controls and components:
           </p>
           <ul>
             <li><code>&lt;CFormInput&gt;</code>s</li>
@@ -321,18 +291,14 @@
           <DocsExample href="forms/validation.html#supported-elements">
             <CForm :validated="true">
               <div class="mb-3">
-                <CFormLabel for="validationTextarea" class="form-label"
-                  >Textarea</CFormLabel
-                >
+                <CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
                 <CFormTextarea
                   id="validationTextarea"
                   placeholder="Required example textarea"
                   invalid
                   required
                 ></CFormTextarea>
-                <CFormFeedback invalid>
-                  Please enter a message in the textarea.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please enter a message in the textarea. </CFormFeedback>
               </div>
               <CFormCheck
                 id="validationFormCheck1"
@@ -340,9 +306,7 @@
                 label="Check this checkbox"
                 required
               />
-              <CFormFeedback invalid
-                >Example invalid feedback text</CFormFeedback
-              >
+              <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
               <CFormCheck
                 id="validationFormCheck2"
                 type="radio"
@@ -358,9 +322,7 @@
                 label="Or toggle this other radio"
                 required
               />
-              <CFormFeedback invalid
-                >More example invalid feedback text</CFormFeedback
-              >
+              <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
               <div class="mb-3">
                 <CFormSelect required aria-label="select example">
                   <option>Open this select menu</option>
@@ -368,9 +330,7 @@
                   <option value="2">Two</option>
                   <option value="3">Three</option>
                 </CFormSelect>
-                <CFormFeedback invalid
-                  >Example invalid select feedback</CFormFeedback
-                >
+                <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
               </div>
               <div class="mb-3">
                 <CFormInput
@@ -379,14 +339,10 @@
                   aria-label="file example"
                   required
                 />
-                <CFormFeedback invalid
-                  >Example invalid form file feedback</CFormFeedback
-                >
+                <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
               </div>
               <div class="mb-3">
-                <CButton type="submit" color="primary" disabled
-                  >Submit form</CButton
-                >
+                <CButton type="submit" color="primary" disabled>Submit form</CButton>
               </div>
             </CForm>
           </DocsExample>
@@ -395,17 +351,13 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Tooltips</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Tooltips</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            If your form layout allows it, you can swap the text for the tooltip
-            to display validation feedback in a styled tooltip. Be sure to have
-            a parent with
-            <code>position: relative</code> on it for tooltip positioning. In
-            the example below, our column classes have this already, but your
-            project may require an alternative setup.
+            If your form layout allows it, you can swap the text for the tooltip to display
+            validation feedback in a styled tooltip. Be sure to have a parent with
+            <code>position: relative</code> on it for tooltip positioning. In the example below, our
+            column classes have this already, but your project may require an alternative setup.
           </p>
           <DocsExample href="forms/validation.html#tooltips">
             <CForm
@@ -425,9 +377,7 @@
                 <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4" class="position-relative">
-                <CFormLabel for="validationTooltipUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationTooltipUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
                   <CFormInput
@@ -436,17 +386,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback tooltip invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback tooltip invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6" class="position-relative">
                 <CFormLabel for="validationTooltip03">City</CFormLabel>
                 <CFormInput id="validationTooltip03" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3" class="position-relative">
                 <CFormLabel for="validationTooltip04">City</CFormLabel>
@@ -454,16 +400,12 @@
                   <option disabled value="">Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3" class="position-relative">
                 <CFormLabel for="validationTooltip05">City</CFormLabel>
                 <CFormInput id="validationTooltip05" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12" class="position-relative">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -475,42 +417,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Validation',
-  data: () => {
-    return {
-      validatedCustom01: null,
-      validatedDefault01: null,
-      validatedTooltip01: null,
-    }
-  },
-  methods: {
-    handleSubmitCustom01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedCustom01 = true
-    },
-    handleSubmitDefault01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedDefault01 = true
-    },
-    handleSubmitTooltip01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedTooltip01 = true
-    },
-  },
-}
-</script>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index df35ed2a..6e1d1f12 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { brandSet } from '@coreui/icons'
+
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = brandSet
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -17,20 +24,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { brandSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = brandSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index db217630..290a052e 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { freeSet } from '@coreui/icons'
+
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = freeSet
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -17,20 +24,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { freeSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = freeSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index eff0320f..cd23c088 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { flagSet } from '@coreui/icons'
+
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = flagSet
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -17,20 +24,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { flagSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = flagSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index e6d12929..a85699b0 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,3 +1,9 @@
+<script setup>
+const alert = () => {
+  console.log('👋 Well, hi there! Thanks for dismissing me.')
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -133,7 +139,7 @@
             <code>dismissible</code> prop.
           </p>
           <DocsExample href="components/alert.html#dismissing">
-            <CAlert color="warning" dismissible @dismiss="alert">
+            <CAlert color="warning" dismissible @close="alert()">
               <strong>Go right ahead</strong> and click that dimiss over there
               on the right.
             </CAlert>
@@ -143,14 +149,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Alerts',
-  methods: {
-    alert: function () {
-      alert('👋 Well, hi there! Thanks for dismissing me.')
-    },
-  },
-}
-</script>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index d50b4e65..0ec745bc 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -54,11 +54,11 @@
             the presentation of a badge.
           </p>
           <DocsExample href="components/badge.html#contextual-variations">
-            <CBadge color="primary">primary</CBadge>
-            <CBadge color="success">success</CBadge>
-            <CBadge color="danger">danger</CBadge>
-            <CBadge color="warning">warning</CBadge>
-            <CBadge color="info">info</CBadge>
+            <CBadge color="primary-gradient">primary</CBadge>
+            <CBadge color="success-gradient">success</CBadge>
+            <CBadge color="danger-gradient">danger</CBadge>
+            <CBadge color="warning-gradient">warning</CBadge>
+            <CBadge color="info-gradient">info</CBadge>
             <CBadge color="light">light</CBadge>
             <CBadge color="dark">dark</CBadge>
           </DocsExample>
@@ -74,11 +74,19 @@
             badges rounded.
           </p>
           <DocsExample href="components/badge.html#pill-badges">
-            <CBadge color="primary" shape="rounded-pill"> primary </CBadge>
-            <CBadge color="success" shape="rounded-pill"> success </CBadge>
-            <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
-            <CBadge color="warning" shape="rounded-pill"> warning </CBadge>
-            <CBadge color="info" shape="rounded-pill"> info </CBadge>
+            <CBadge color="primary-gradient" shape="rounded-pill">
+              primary
+            </CBadge>
+            <CBadge color="success-gradient" shape="rounded-pill">
+              success
+            </CBadge>
+            <CBadge color="danger-gradient" shape="rounded-pill">
+              danger
+            </CBadge>
+            <CBadge color="warning-gradient" shape="rounded-pill">
+              warning
+            </CBadge>
+            <CBadge color="info-gradient" shape="rounded-pill"> info </CBadge>
             <CBadge color="light" shape="rounded-pill"> light </CBadge>
             <CBadge color="dark" shape="rounded-pill"> dark </CBadge>
           </DocsExample>
@@ -87,9 +95,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Badges',
-}
-</script>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index acc0e57f..1bd7272d 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,3 +1,24 @@
+<script setup>
+import { ref } from 'vue'
+
+const visibleLiveDemo = ref(false)
+const visibleStaticBackdropDemo = ref(false)
+const visibleScrollingLongContentDemo = ref(false)
+const visibleScrollableDemo = ref(false)
+const visibleVerticallyCenteredDemo = ref(false)
+const visibleVerticallyCenteredScrollableDemo = ref(false)
+const tooltipsAndPopoversDemo= ref(false)
+const xlDemo = ref(false)
+const lgDemo = ref(false)
+const smDemo = ref(false)
+const fullscreenDemo = ref(false)
+const fullscreenSmDemo = ref(false)
+const fullscreenMdDemo = ref(false)
+const fullscreenLgDemo = ref(false)
+const fullscreenXlDemo = ref(false)
+const fullscreenXxlDemo = ref(false)
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -8,11 +29,10 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Below is a static modal example (meaning its
-            <code>position</code> and <code>display</code> have been
-            overridden). Included are the modal header, modal body (required for
-            <code>padding</code>), and modal footer (optional). We ask that you
-            include modal headers with dismiss actions whenever possible, or
-            provide another explicit dismiss action.
+            <code>position</code> and <code>display</code> have been overridden). Included are the
+            modal header, modal body (required for <code>padding</code>), and modal footer
+            (optional). We ask that you include modal headers with dismiss actions whenever
+            possible, or provide another explicit dismiss action.
           </p>
           <DocsExample href="components/modal.html#modal-components">
             <CModal
@@ -36,13 +56,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Live demo</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Live demo</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Toggle a working modal demo by clicking the button below. It will
-            slide down and fade in from the top of the page.
+            Toggle a working modal demo by clicking the button below. It will slide down and fade in
+            from the top of the page.
           </p>
           <DocsExample href="components/modal.html#live-demo">
             <CButton
@@ -72,9 +90,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
-                >Woohoo, you're reading this text in a modal!</CModalBody
-              >
+              <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
               <CModalFooter>
                 <CButton
                   color="secondary"
@@ -95,15 +111,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Static backdrop</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Static backdrop</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            If you set <code>backdrop</code> property to <code>static</code>,
-            your modal will behave as though the backdrop is static, meaning it
-            will not close when clicking outside it. Click the button below to
-            try it.
+            If you set <code>backdrop</code> property to <code>static</code>, your modal will behave
+            as though the backdrop is static, meaning it will not close when clicking outside it.
+            Click the button below to try it.
           </p>
           <DocsExample href="components/modal.html#static-backdrop">
             <CButton
@@ -134,9 +147,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
-                >Woohoo, you're reading this text in a modal!</CModalBody
-              >
+              <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
               <CModalFooter>
                 <CButton
                   color="secondary"
@@ -162,9 +173,8 @@
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            When modals become too long for the user's viewport or device, they
-            scroll independent of the page itself. Try the demo below to see
-            what we mean.
+            When modals become too long for the user's viewport or device, they scroll independent
+            of the page itself. Try the demo below to see what we mean.
           </p>
           <DocsExample href="components/modal.html#scrolling-long-content">
             <CButton
@@ -196,107 +206,94 @@
               </CModalHeader>
               <CModalBody>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
               </CModalBody>
             </CModal>
           </DocsExample>
           <p class="text-body-secondary small">
-            You can also create a scrollable modal that allows scroll the modal
-            body by adding
+            You can also create a scrollable modal that allows scroll the modal body by adding
             <code>scrollable</code> prop.
           </p>
           <DocsExample href="components/modal.html#scrolling-long-content">
@@ -330,100 +327,88 @@
               </CModalHeader>
               <CModalBody>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
               </CModalBody>
             </CModal>
@@ -433,13 +418,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Vertically centered</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Vertically centered</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Add <code>alignment=&#34;center&#34;</code> to
-            <code>&lt;CModal&gt;</code> to vertically center the modal.
+            Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to vertically
+            center the modal.
           </p>
           <DocsExample href="components/modal.html#vertically-centered">
             <CButton
@@ -471,9 +454,9 @@
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                risus, porta ac consectetur ac, vestibulum at eros.
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -522,9 +505,9 @@
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                risus, porta ac consectetur ac, vestibulum at eros.
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -546,15 +529,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Tooltips and popovers</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Tooltips and popovers</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            <code>&lt;CTooltips&gt;</code> and
-            <code>&lt;CPopovers&gt;</code> can be placed within modals as
-            needed. When modals are closed, any tooltips and popovers within are
-            also automatically dismissed.
+            <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
+            modals as needed. When modals are closed, any tooltips and popovers within are also
+            automatically dismissed.
           </p>
           <DocsExample href="components/modal.html#tooltips-and-popovers">
             <CButton
@@ -601,8 +581,7 @@
                 <h5>Tooltips in a modal</h5>
                 <p>
                   <CLink v-c-tooltip="'Tooltip'">This link</CLink> and
-                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips
-                  on hover.
+                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
                 </p>
               </CModalBody>
               <CModalFooter>
@@ -625,15 +604,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Optional sizes</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Optional sizes</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Modals have three optional sizes, available via modifier classes to
-            be placed on a
-            <code>&lt;CModal&gt;</code>. These sizes kick in at certain
-            breakpoints to avoid horizontal scrollbars on narrower viewports.
+            Modals have three optional sizes, available via modifier classes to be placed on a
+            <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
+            horizontal scrollbars on narrower viewports.
           </p>
           <table class="table">
             <thead>
@@ -777,13 +753,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Fullscreen Modal</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Fullscreen Modal</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Another override is the option to pop up a modal that covers the
-            user viewport, available via property <code>fullscrean</code>.
+            Another override is the option to pop up a modal that covers the user viewport,
+            available via property <code>fullscrean</code>.
           </p>
           <table class="table">
             <thead>
@@ -1018,45 +992,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Modals',
-  setup() {
-    const visibleLiveDemo = ref(false)
-    const visibleStaticBackdropDemo = ref(false)
-    const visibleScrollingLongContentDemo = ref(false)
-    const visibleScrollableDemo = ref(false)
-    const visibleVerticallyCenteredDemo = ref(false)
-    const visibleVerticallyCenteredScrollableDemo = ref(false)
-    const xlDemo = ref(false)
-    const lgDemo = ref(false)
-    const smDemo = ref(false)
-    const fullscreenDemo = ref(false)
-    const fullscreenSmDemo = ref(false)
-    const fullscreenMdDemo = ref(false)
-    const fullscreenLgDemo = ref(false)
-    const fullscreenXlDemo = ref(false)
-    const fullscreenXxlDemo = ref(false)
-
-    return {
-      visibleLiveDemo,
-      visibleStaticBackdropDemo,
-      visibleScrollingLongContentDemo,
-      visibleScrollableDemo,
-      visibleVerticallyCenteredDemo,
-      visibleVerticallyCenteredScrollableDemo,
-      xlDemo,
-      lgDemo,
-      smDemo,
-      fullscreenDemo,
-      fullscreenSmDemo,
-      fullscreenMdDemo,
-      fullscreenLgDemo,
-      fullscreenXlDemo,
-      fullscreenXxlDemo,
-    }
-  },
-}
-</script>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 6ecfa627..51300319 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -1,3 +1,14 @@
+<script setup>
+const toasts = []
+
+const createToast = () => {
+  toasts.push({
+    title: 'new toast',
+    content: 'Lorem ipsum dolor cet emit',
+  })
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -32,7 +43,7 @@
           <DocsExample href="components/toast.html">
             <CButton color="primary" @click="createToast">Send a toast</CButton>
             <CToaster placement="top-end">
-              <CToast v-for="(toast, index) in toasts" visible :key="index">
+              <CToast v-for="(toast, index) in toasts" :visible="true" :key="index">
                 <CToastHeader closeButton>
                   <span class="me-auto fw-bold">{{ toast.title }}</span>
                   <small>7 min ago</small>
@@ -157,7 +168,7 @@
                 Hello, world! This is a toast message.
                 <div class="mt-2 pt-2 border-top">
                   <CButton type="button" color="primary" size="sm"> Take action </CButton>
-                  <CToastClose component="CButton" color="secondary" size="sm" class="ms-1"
+                  <CToastClose as="CButton" color="secondary" size="sm" class="ms-1"
                     >Close</CToastClose
                   >
                 </div>
@@ -174,8 +185,8 @@
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
             <a href="https://coreui.io/docs/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs/utilities/background">background</a> utilities.
-            Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
+            <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
+            we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default
             border with <code>.border-0</code>.
@@ -198,22 +209,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      toasts: [],
-    }
-  },
-
-  methods: {
-    createToast() {
-      this.toasts.push({
-        title: 'new toast',
-        content: 'Lorem ipsum dolor cet emit',
-      })
-    },
-  },
-}
-</script>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 11075f06..43386210 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="8">
@@ -62,9 +62,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Login',
-}
-</script>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index d07771a1..95e550a5 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
@@ -22,9 +22,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Page404',
-}
-</script>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index 63dd18c6..2dd7881e 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
@@ -22,9 +22,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Page500',
-}
-</script>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index d76232f1..284e3cc1 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="bwrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="9" :lg="7" :xl="6">
@@ -49,9 +49,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Register',
-}
-</script>
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index 3f57d21e..ae404b81 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -1,21 +1,15 @@
+<script setup>
+const props = defineProps({
+  color: String
+})
+</script>
+
 <template>
   <CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
     <div
-      :class="['theme-color w-75 rounded mb-3', color]"
+      :class="['theme-color w-75 rounded mb-3', props.color]"
       style="padding-top: 75%"
     ></div>
     <slot></slot>
   </CCol>
 </template>
-
-<script>
-export default {
-  name: 'ColorTheme',
-  props: {
-    color: {
-      type: String,
-      default: undefined,
-    },
-  },
-}
-</script>
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index 87291bbd..acb34ce7 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -1,3 +1,7 @@
+<script setup>
+import ColorTheme from './ColorTheme.vue'
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -8,18 +12,10 @@
             <ColorTheme color="bg-primary">
               <h6>Brand Primary Color</h6>
             </ColorTheme>
-            <ColorTheme color="bg-secondary"
-              ><h6>Brand Secondary Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-success"
-              ><h6>Brand Success Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-danger"
-              ><h6>Brand Danger Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-warning"
-              ><h6>Brand Warning Color</h6></ColorTheme
-            >
+            <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+            <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+            <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+            <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
             <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
             <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
             <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
@@ -29,11 +25,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import ColorTheme from './ColorTheme'
-export default {
-  name: 'Colors',
-  components: { ColorTheme },
-}
-</script>
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
index c4cd5d96..306e403b 100644
--- a/src/views/theme/Typography.vue
+++ b/src/views/theme/Typography.vue
@@ -243,9 +243,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Typography',
-}
-</script>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index b8d40c4e..906c0712 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,3 +1,55 @@
+<script setup>
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/vue-chartjs'
+
+import WidgetsStatsA from './WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './WidgetsStatsTypeD.vue'
+
+const widgetStatsE = {
+  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
+  optionsBar: {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  },
+  optionsLine: {
+    maintainAspectRatio: false,
+    elements: {
+      line: {
+        tension: 0.4,
+      },
+      point: {
+        radius: 0,
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  },
+}
+</script>
+
 <template>
   <CCard class="mb-4">
     <CCardHeader>
@@ -514,75 +566,3 @@
     </CCardBody>
   </CCard>
 </template>
-
-<script>
-import { getStyle } from '@coreui/utils'
-import { CChart } from '@coreui/vue-chartjs'
-import WidgetsStatsA from './WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './WidgetsStatsTypeD.vue'
-export default {
-  name: 'Widgets',
-  components: {
-    CChart,
-    WidgetsStatsA,
-    WidgetsStatsD,
-  },
-  setup() {
-    const widgetStatsE = {
-      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-      optionsBar: {
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-          },
-          y: {
-            display: false,
-          },
-        },
-      },
-      optionsLine: {
-        maintainAspectRatio: false,
-        elements: {
-          line: {
-            tension: 0.4,
-          },
-          point: {
-            radius: 0,
-          },
-        },
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-          },
-          y: {
-            display: false,
-          },
-        },
-      },
-    }
-
-    return {
-      getStyle,
-      widgetStatsE,
-      widgetProgressIconItems: [
-        { color: 'primary', icon: 'cil-puzzle' },
-        { color: 'success', icon: 'cil-speedometer' },
-        { color: 'danger', icon: 'cil-cursor' },
-        { color: 'info', icon: 'cil-drop' },
-        { color: 'secondary', icon: 'cil-pencil' },
-      ],
-    }
-  },
-}
-</script>
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 30677ff7..e914b7f2 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,21 +1,38 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { CChart } from '@coreui/vue-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const widgetChartRef1 = ref()
+const widgetChartRef2 = ref()
+
+onMounted(() => {
+  document.documentElement.addEventListener('ColorSchemeChange', () => {
+    if (widgetChartRef1.value) {
+      widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
+      widgetChartRef1.value.chart.update()
+    }
+
+    if (widgetChartRef2.value) {
+      widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
+      widgetChartRef2.value.chart.update()
+    }
+  })
+})
+</script>
+
 <template>
   <CRow :xs="{ gutter: 4 }">
     <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsA color="primary">
         <template #value
           >26K
-          <span class="fs-6 fw-normal">
-            (-12.4% <CIcon icon="cil-arrow-bottom" />)
-          </span>
+          <span class="fs-6 fw-normal"> (-12.4% <CIcon icon="cil-arrow-bottom" />) </span>
         </template>
         <template #title>Users</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -32,15 +49,7 @@
             style="height: 70px"
             ref="widgetChartRef1"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -102,18 +111,12 @@
       <CWidgetStatsA color="info">
         <template #value
           >$6.200
-          <span class="fs-6 fw-normal">
-            (40.9% <CIcon icon="cil-arrow-top" />)
-          </span>
+          <span class="fs-6 fw-normal"> (40.9% <CIcon icon="cil-arrow-top" />) </span>
         </template>
         <template #title>Income</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -130,15 +133,7 @@
             style="height: 70px"
             ref="widgetChartRef2"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -199,18 +194,12 @@
       <CWidgetStatsA color="warning">
         <template #value
           >2.49%
-          <span class="fs-6 fw-normal">
-            (84.7% <CIcon icon="cil-arrow-top" />)
-          </span>
+          <span class="fs-6 fw-normal"> (84.7% <CIcon icon="cil-arrow-top" />) </span>
         </template>
         <template #title>Conversion Rate</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -226,15 +215,7 @@
             class="mt-3"
             style="height: 70px"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -283,18 +264,12 @@
       <CWidgetStatsA color="danger">
         <template #value
           >44K
-          <span class="fs-6 fw-normal">
-            (-23.6% <CIcon icon="cil-arrow-bottom" />)
-          </span>
+          <span class="fs-6 fw-normal"> (-23.6% <CIcon icon="cil-arrow-bottom" />) </span>
         </template>
         <template #title>Sessions</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -333,10 +308,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'rgba(255,255,255,.2)',
                   borderColor: 'rgba(255,255,255,.55)',
-                  data: [
-                    78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,
-                    82,
-                  ],
+                  data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
                   barPercentage: 0.6,
                 },
               ],
@@ -378,38 +350,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { CChart } from '@coreui/vue-chartjs'
-import { getStyle } from '@coreui/utils'
-
-export default {
-  name: 'WidgetsStatsA',
-  components: {
-    CChart,
-  },
-  setup() {
-    const widgetChartRef1 = ref()
-    const widgetChartRef2 = ref()
-
-    onMounted(() => {
-      document.documentElement.addEventListener('ColorSchemeChange', () => {
-        if (widgetChartRef1.value) {
-          widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
-            getStyle('--cui-primary')
-          widgetChartRef1.value.chart.update()
-        }
-
-        if (widgetChartRef2.value) {
-          widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
-            getStyle('--cui-info')
-          widgetChartRef2.value.chart.update()
-        }
-      })
-    })
-
-    return { getStyle, widgetChartRef1, widgetChartRef2 }
-  },
-}
-</script>
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index 7b0cbaac..d6c756d1 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,3 +1,35 @@
+<script setup>
+import { CChart } from '@coreui/vue-chartjs'
+
+const options = {
+  elements: {
+    line: {
+      tension: 0.4,
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 4,
+      hoverBorderWidth: 3,
+    },
+  },
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      display: false,
+    },
+    y: {
+      display: false,
+    },
+  },
+}
+</script>
+
 <template>
   <CRow :xs="{ gutter: 4 }">
     <CCol :sm="6" :xl="4" :xxl="3">
@@ -126,46 +158,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { CChart } from '@coreui/vue-chartjs'
-export default {
-  name: 'WidgetsStatsD',
-  components: {
-    CChart,
-  },
-  setup() {
-    const options = {
-      elements: {
-        line: {
-          tension: 0.4,
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3,
-        },
-      },
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          display: false,
-        },
-        y: {
-          display: false,
-        },
-      },
-    }
-
-    return {
-      options,
-    }
-  },
-}
-</script>

From 7c5d59c402d24b3ff41abf19815fa092479fe3c5 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 1 May 2024 15:01:19 +0200
Subject: [PATCH 02/11] refactor: migrate from Vuex to Pinia

---
 package.json                  |  4 ++--
 src/App.vue                   | 11 +++++++----
 src/components/AppHeader.vue  |  9 ++++++---
 src/components/AppSidebar.vue | 27 +++++++++------------------
 src/main.js                   |  5 +++--
 src/store/index.js            | 22 ----------------------
 src/stores/sidebar.js         | 17 +++++++++++++++++
 src/stores/theme.js           | 12 ++++++++++++
 8 files changed, 56 insertions(+), 51 deletions(-)
 delete mode 100644 src/store/index.js
 create mode 100644 src/stores/sidebar.js
 create mode 100644 src/stores/theme.js

diff --git a/package.json b/package.json
index 2fe17aea..3b5b531a 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,10 @@
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.2",
+    "pinia": "^2.1.7",
     "simplebar-vue": "^2.3.3",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/src/App.vue b/src/App.vue
index 9a8eaeca..b06f287b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { onBeforeMount } from 'vue'
-import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-const store = useStore()
+import { useThemeStore } from '@/stores/theme.js'
+
+const { isColorModeSet, setColorMode } = useColorModes(
+  'coreui-free-vue-admin-template-theme',
+)
+const currentTheme = useThemeStore()
 
 onBeforeMount(() => {
   const urlParams = new URLSearchParams(window.location.href.split('?')[1])
@@ -23,7 +26,7 @@ onBeforeMount(() => {
     return
   }
 
-  setColorMode(store.state.theme)
+  setColorMode(currentTheme.theme)
 })
 </script>
 
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 46e2b842..fda96a89 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
+import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue'
+import { useSidebarStore } from '@/stores/sidebar.js'
 
 const headerClassNames = ref('mb-4 p-0')
 const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const sidebar = useSidebarStore()
 
 onMounted(() => {
   document.addEventListener('scroll', () => {
@@ -21,7 +24,7 @@ onMounted(() => {
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
-      <CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
+      <CHeaderToggler @click="sidebar.toggleVisible()" style="margin-inline-start: -14px">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
       <CHeaderNav class="d-none d-md-flex">
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index bfc3b075..d3ab2f33 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,15 +1,12 @@
-
 <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'
+import { AppSidebarNav } from '@/components/AppSidebarNav.js'
+import { useSidebarStore } from '@/stores/sidebar.js'
 
-const store = useStore()
-const sidebarUnfoldable =  computed(() => store.state.sidebarUnfoldable)
-const sidebarVisible = computed(() => store.state.sidebarVisible)
+const sidebar = useSidebarStore()
 </script>
 
 <template>
@@ -17,15 +14,9 @@ const sidebarVisible = computed(() => store.state.sidebarVisible)
     class="border-end"
     colorScheme="dark"
     position="fixed"
-    :unfoldable="sidebarUnfoldable"
-    :visible="sidebarVisible"
-    @visible-change="
-      (event) =>
-        $store.commit({
-          type: 'updateSidebarVisible',
-          value: event,
-        })
-    "
+    :unfoldable="sidebar.unfoldable"
+    :visible="sidebar.visible"
+    @visible-change="(value) => sidebar.toggleVisible(value)"
   >
     <CSidebarHeader class="border-bottom">
       <RouterLink custom to="/" v-slot="{ href, navigate }">
@@ -34,11 +25,11 @@ const sidebarVisible = computed(() => store.state.sidebarVisible)
           <CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
         </CSidebarBrand>
       </RouterLink>
-      <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
+      <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top d-none d-lg-flex">
-      <CSidebarToggler @click="$store.commit('toggleUnfoldable')" />
+      <CSidebarToggler @click="sidebar.toggleUnfoldable()" />
     </CSidebarFooter>
   </CSidebar>
 </template>
diff --git a/src/main.js b/src/main.js
index 5afc2d2d..bf8b8e5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import App from './App.vue'
 import router from './router'
-import store from './store'
 
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
@@ -9,7 +10,7 @@ import { iconsSet as icons } from '@/assets/icons'
 import DocsExample from '@/components/DocsExample'
 
 const app = createApp(App)
-app.use(store)
+app.use(createPinia())
 app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 1ca85549..00000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createStore } from 'vuex'
-
-export default createStore({
-  state: {
-    sidebarVisible: '',
-    sidebarUnfoldable: false,
-    theme: 'light',
-  },
-  mutations: {
-    toggleSidebar(state) {
-      state.sidebarVisible = !state.sidebarVisible
-    },
-    toggleUnfoldable(state) {
-      state.sidebarUnfoldable = !state.sidebarUnfoldable
-    },
-    updateSidebarVisible(state, payload) {
-      state.sidebarVisible = payload.value
-    },
-  },
-  actions: {},
-  modules: {},
-})
diff --git a/src/stores/sidebar.js b/src/stores/sidebar.js
new file mode 100644
index 00000000..28c9a044
--- /dev/null
+++ b/src/stores/sidebar.js
@@ -0,0 +1,17 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSidebarStore = defineStore('sidebar', () => {
+  const visible = ref(undefined)
+  const unfoldable = ref(false)
+
+  const toggleVisible = (value) => {
+    visible.value = value !== undefined ? value : !visible.value
+  }
+
+  const toggleUnfoldable = () => {
+    unfoldable.value = !unfoldable.value
+  }
+
+  return { visible, unfoldable, toggleVisible, toggleUnfoldable }
+})
diff --git a/src/stores/theme.js b/src/stores/theme.js
new file mode 100644
index 00000000..7b1a0fbc
--- /dev/null
+++ b/src/stores/theme.js
@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref('light')
+
+  const toggleTheme = (_theme) => {
+    theme.value = _theme
+  }
+
+  return { theme, toggleTheme }
+})

From 9e4a7f80f736ae0a32a5359ad06d5670c8e84bf2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 1 May 2024 15:52:05 +0200
Subject: [PATCH 03/11] docs: update README

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 0307d814..9a4e2123 100644
--- a/README.md
+++ b/README.md
@@ -56,9 +56,9 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 | --- | --- |
 | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
 
-| Default Theme v3 | Light Theme v3 |
+| Modern Theme | Bright Theme |
 | --- | --- |
-| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default-v3) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
+| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=modern) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=bright)|
 
 ## Quick Start
 
@@ -122,7 +122,7 @@ coreui-free-vue-admin-template
 │   ├── layouts/     # layout containers
 │   ├── scss/        # scss styles
 │   ├── router       # routes config
-│   ├── store        # template state example 
+│   ├── stores/      # template state example 
 │   ├── views/       # application views
 │   ├── _nav.js      # sidebar navigation config
 │   ├── App.vue
@@ -130,7 +130,7 @@ coreui-free-vue-admin-template
 │   └── main.js
 ├── index.html   # html template
 ├── package.json
-└── vite.config.js
+└── vite.config.mjs
 ```
 
 ## Documentation

From 2371c1c092b993004d12f7642ad5500fc234eee0 Mon Sep 17 00:00:00 2001
From: Nicolas Martinez <17040442+nicomt@users.noreply.github.com>
Date: Thu, 6 Jun 2024 16:02:16 -0400
Subject: [PATCH 04/11] Filter environmet variables to prevent unintended
 leakage of environment variables.

---
 vite.config.mjs | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index f5cdf664..573cc8fa 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -5,8 +5,15 @@ import autoprefixer from 'autoprefixer'
 
 export default defineConfig(({ mode }) => {
   // Load .env
-  const env = loadEnv(mode, process.cwd(), '')
-  process.env = { ...process.env, ...env }
+  const viteEnv = loadEnv(mode, process.cwd(), '')
+  const env = {}
+
+  // Filter env to variables starting with VITE_APP or VUE_APP
+  Object.keys({...process.env, ...viteEnv}).forEach(key => {
+    if (key.startsWith('VITE_APP') || key.startsWith('VUE_APP')) {
+      env[key] = viteEnv[key]
+    }
+  })
 
   return {
     plugins: [vue()],
@@ -53,7 +60,7 @@ export default defineConfig(({ mode }) => {
     },
     define: {
       // vitejs does not support process.env so we have to redefine it
-      'process.env': process.env,
+      'process.env': env,
     },
   }
 })

From 6b9c7c6ca8a88dda26469338988b217575c4fdcb Mon Sep 17 00:00:00 2001
From: Nicolas Martinez <17040442+nicomt@users.noreply.github.com>
Date: Thu, 6 Jun 2024 16:12:25 -0400
Subject: [PATCH 05/11] Fix for loading data from both viteEnv and process.env

---
 vite.config.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index 573cc8fa..81ec0d8e 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -9,9 +9,9 @@ export default defineConfig(({ mode }) => {
   const env = {}
 
   // Filter env to variables starting with VITE_APP or VUE_APP
-  Object.keys({...process.env, ...viteEnv}).forEach(key => {
+  Object.entries({...process.env, ...viteEnv}).forEach(([key, value]) => {
     if (key.startsWith('VITE_APP') || key.startsWith('VUE_APP')) {
-      env[key] = viteEnv[key]
+      env[key] = value
     }
   })
 

From 9bbf7509e15c02488232c3b268e0b08e0b9e740a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 7 Jun 2024 10:41:36 +0200
Subject: [PATCH 06/11] docs: update links to PRO versions

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9a4e2123..f711b518 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 
 * 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
 * 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
+* 💪  [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
 * 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
 * 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
 

From dfa4381ce13433a7b48056ecfe7b204755665581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 13:10:02 +0200
Subject: [PATCH 07/11] Update vite.config.mjs

---
 vite.config.mjs | 34 +++++-----------------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index 81ec0d8e..7195c8b7 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -1,29 +1,18 @@
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'node:path'
 import autoprefixer from 'autoprefixer'
 
-export default defineConfig(({ mode }) => {
-  // Load .env
-  const viteEnv = loadEnv(mode, process.cwd(), '')
-  const env = {}
-
-  // Filter env to variables starting with VITE_APP or VUE_APP
-  Object.entries({...process.env, ...viteEnv}).forEach(([key, value]) => {
-    if (key.startsWith('VITE_APP') || key.startsWith('VUE_APP')) {
-      env[key] = value
-    }
-  })
-
+export default defineConfig(() => {
   return {
     plugins: [vue()],
     base: './',
     css: {
       postcss: {
         plugins: [
-          autoprefixer({}) // add options if needed
+          autoprefixer({}), // add options if needed
         ],
-      }
+      },
     },
     resolve: {
       alias: [
@@ -41,16 +30,7 @@ export default defineConfig(({ mode }) => {
           replacement: path.resolve(__dirname, '/src'),
         },
       ],
-      extensions: [
-        '.mjs',
-        '.js',
-        '.ts',
-        '.jsx',
-        '.tsx',
-        '.json',
-        '.vue',
-        '.scss',
-      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
     },
     server: {
       port: 3000,
@@ -58,9 +38,5 @@ export default defineConfig(({ mode }) => {
         // https://vitejs.dev/config/server-options.html
       },
     },
-    define: {
-      // vitejs does not support process.env so we have to redefine it
-      'process.env': env,
-    },
   }
 })

From 625122693588c564b734165381b758bfab1bc0d4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 13:17:48 +0200
Subject: [PATCH 08/11] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui       ^5.0.0  →   ^5.0.2
@coreui/vue          ^5.0.0  →   ^5.1.0
@vitejs/plugin-vue   ^5.0.4  →   ^5.0.5
chart.js             ^4.4.2  →   ^4.4.3
eslint-plugin-vue   ^9.24.0  →  ^9.26.0
sass                ^1.72.0  →  ^1.77.5
simplebar-vue        ^2.3.3  →   ^2.3.5
vite                 ^5.2.6  →   ^5.3.1
vue                 ^3.4.21  →  ^3.4.28
vue-router           ^4.3.0  →   ^4.3.3
---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 3b5b531a..cc0d6867 100644
--- a/package.json
+++ b/package.json
@@ -19,26 +19,26 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0",
+    "@coreui/vue": "^5.1.0",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.2",
+    "chart.js": "^4.4.3",
     "pinia": "^2.1.7",
-    "simplebar-vue": "^2.3.3",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "simplebar-vue": "^2.3.5",
+    "vue": "^3.4.28",
+    "vue-router": "^4.3.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.24.0",
+    "eslint-plugin-vue": "^9.26.0",
     "postcss": "^8.4.38",
-    "sass": "^1.72.0",
-    "vite": "^5.2.6"
+    "sass": "^1.77.5",
+    "vite": "^5.3.1"
   }
 }

From 85c9e1705626e79defb761f9560c8ae6d4bb9ad9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 13:18:42 +0200
Subject: [PATCH 09/11] fix: security problem with process.env

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index f70246f6..948de201 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -303,7 +303,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(process.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
   scrollBehavior() {
     // always scroll to top

From 953c231f28a1848ba192b87b5214bf8418e3dc16 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 16:09:10 +0200
Subject: [PATCH 10/11] feat: add new tabs component

---
 src/_nav.js             |   5 ++
 src/router/index.js     |   5 ++
 src/views/base/Tabs.vue | 162 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 172 insertions(+)
 create mode 100644 src/views/base/Tabs.vue

diff --git a/src/_nav.js b/src/_nav.js
index 3433bdaf..4ac304af 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -100,6 +100,11 @@ export default [
         name: 'Tables',
         to: '/base/tables',
       },
+      {
+        component: 'CNavItem',
+        name: 'Tabs',
+        to: '/base/tabs',
+      },
       {
         component: 'CNavItem',
         name: 'Tooltips',
diff --git a/src/router/index.js b/src/router/index.js
index 948de201..add55d6f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,11 @@ const routes = [
             name: 'Tables',
             component: () => import('@/views/base/Tables.vue'),
           },
+          {
+            path: '/base/tabs',
+            name: 'Tabs',
+            component: () => import('@/views/base/Tabs.vue'),
+          },
           {
             path: '/base/tooltips',
             name: 'Tooltips',
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
new file mode 100644
index 00000000..0460be0f
--- /dev/null
+++ b/src/views/base/Tabs.vue
@@ -0,0 +1,162 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Tabs</strong>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            The basic Vue tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
+            generate a tabbed interface.
+          </p>
+          <DocsExample href="components/tabs.html#example">
+            <CTabs activeItemKey="profile">
+              <CTabList variant="tabs">
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Unstyled</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            If you don’t provide the <code>variant</code> prop, the component will default to a
+            basic style.
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs activeItemKey="profile">
+              <CTabList>
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Pills</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="pills">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline border</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline-border">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>

From ee8cab33d9ce117d7289a9ec46eb77203bc203ac Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 16:15:41 +0200
Subject: [PATCH 11/11] release: v5.1.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1c4aae12..5cb553c6 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.0.0
+* @version v5.1.0
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index cc0d6867..de0bf194 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"