refactor: update examples

src/_nav.js

@@ -32,7 +32,7 @@ export default [
   {
     _name: "CNavGroup",
     name: "Base",
-    route: "/base",
+    to: "/base",
     icon: "cil-puzzle",
     children: [
       {
@@ -122,7 +122,7 @@ export default [
   {
     _name: "CNavGroup",
     name: "Buttons",
-    route: "/buttons",
+    to: "/buttons",
     icon: "cil-cursor",
     children: [
       {
@@ -130,27 +130,22 @@ export default [
         name: "Buttons",
         to: "/buttons/standard-buttons",
       },
-      {
-        _name: "CNavItem",
-        name: "Button Dropdowns",
-        to: "/buttons/dropdowns",
-      },
       {
         _name: "CNavItem",
         name: "Button Groups",
         to: "/buttons/button-groups",
       },
-      //      {
+      {
-      //        _name: 'CNavItem',
+        _name: "CNavItem",
-      //        name: 'Brand Buttons',
+        name: "Dropdowns",
-      //       to: '/buttons/brand-buttons'
+        to: "/buttons/dropdowns",
-      //      }
+      },
     ],
   },
   {
     _name: "CNavGroup",
     name: "Forms",
-    route: "/forms",
+    to: "/forms",
     icon: "cil-star",
     children: [
       {
@@ -204,7 +199,7 @@ export default [
   {
     _name: "CNavGroup",
     name: "Icons",
-    route: "/icons",
+    to: "/icons",
     icon: "cil-star",
     children: [
       {
@@ -231,7 +226,7 @@ export default [
   {
     _name: "CNavGroup",
     name: "Notifications",
-    route: "/notifications",
+    to: "/notifications",
     icon: "cil-bell",
     children: [
       {
@@ -273,7 +268,7 @@ export default [
   // {
   //   _name: 'CNavGroup',
   //   name: 'Pages',
-  //   route: '/pages',
+  //   to: '/pages',
   //   icon: 'cil-star',
   //   children: [
   //     {

src/assets/icons/icons.js

@@ -18,9 +18,9 @@ import {
   cibVimeo,
   cibCcMastercard,
   cibCcVisa,
-  cibStripe,
+  cibCcStripe,
-  cibPaypal,
+  cibCcPaypal,
-  cibGooglePay,
+  cibCcApplePay,
   cibCcAmex
 } from "@coreui/icons";
 import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons";
@@ -161,9 +161,9 @@ export const iconsSet = Object.assign(
     cibVimeo,
     cibCcMastercard,
     cibCcVisa,
-    cibStripe,
+    cibCcStripe,
-    cibPaypal,
+    cibCcPaypal,
-    cibGooglePay,
+    cibCcApplePay,
     cibCcAmex
   }
 );

src/components/AppHeaderDropdownAccnt.vue

@@ -24,7 +24,7 @@
         <CBadge color="warning" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
       <CDropdownHeader component="h6" class="bg-light fw-semibold py-2">
-        <strong>Settings</strong>
+        Settings
       </CDropdownHeader>
       <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
       <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>

src/components/DocsCallout.vue

@@ -29,6 +29,7 @@ export default {
       default: undefined,
       required: false,
     },
+    plural: Boolean
   },
   setup(props) {
     const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`

src/main.js

@@ -6,7 +6,8 @@ import store from "./store";
 import CoreuiVue from "@coreui/vue";
 import { CIcon } from "@coreui/icons-vue";
 import { iconsSet as icons } from "@/assets/icons/icons.js";
-import Example from "@/components/Example";
+import DocsCallout from "@/components/DocsCallout";
+import DocsExample from "@/components/DocsExample";
 
 
 const app = createApp(App);
@@ -15,6 +16,7 @@ app.use(router);
 app.use(CoreuiVue);
 app.provide('icons', icons);
 app.component("CIcon", CIcon);
-app.component("Example", Example);
+app.component("DocsCallout", DocsCallout);
+app.component("DocsExample", DocsExample);
 
 app.mount("#app");

src/router/index.js

@@ -4,17 +4,15 @@ import { createRouter, createWebHistory } from "vue-router";
 
 import DefaultLayout from "@/layouts/DefaultLayout";
 
-// Views - Components
-// const Breadcrumbs = () => import("@/views/base/Breadcrumbs");
-
 const routes = [
   {
     path: "/",
     name: "Home",
     component: DefaultLayout,
+    redirect: "/dashboard",
     children: [
       {
-        path: "dashboard",
+        path: "/dashboard",
         name: "Dashboard",
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
@@ -78,11 +76,6 @@ const routes = [
             name: "Collapses",
             component: () => import("@/views/base/Collapses.vue"),
           },
-          {
-            path: "/base/forms",
-            name: "Forms",
-            component: () => import("@/views/base/Forms.vue"),
-          },
           /*
           {
             path: "/base/jumbotrons",
@@ -130,11 +123,6 @@ 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",

src/views/base/Accordion.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Breadcrumb" href="components/breadcrumb" />
+      <DocsCallout name="Accordion" href="components/accordion" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">

src/views/base/Carousels.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Carousel" href="components/breadcrumb" />
+      <DocsCallout name="Carousel" href="components/carousel.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">

src/views/base/Collapses.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Collapse" href="components/breadcrumb" />
+      <DocsCallout name="Collapse" href="components/collapse.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">

src/views/base/ListGroups.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="List Group" href="components/list-group" />
+      <DocsCallout name="List Group" href="components/list-group.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -14,7 +14,7 @@
             proper CSS classes. Build upon it with the options that follow, or
             with your CSS as required.
           </p>
-          <DocsExample href="components/list-group">
+          <DocsExample href="components/list-group.html">
             <CListGroup>
               <CListGroupItem>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -37,7 +37,7 @@
             <code>&lt;CListGroupItem&gt;</code> to show the current active
             selection.
           </p>
-          <DocsExample href="components/list-group/#active-items">
+          <DocsExample href="components/list-group.html#active-items">
             <CListGroup>
               <CListGroupItem active>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -59,7 +59,7 @@
             Add <code>disabled</code> boolean property to a
             <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
           </p>
-          <DocsExample href="components/list-group/#disabled-items">
+          <DocsExample href="components/list-group.html#disabled-items">
             <CListGroup>
               <CListGroupItem disabled>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -87,7 +87,7 @@
             <code>&lt;div&gt;</code>
             s) don&#39;tprovide a click or tap affordance.
           </p>
-          <DocsExample href="components/list-group/#links-and-buttons">
+          <DocsExample href="components/list-group.html#links-and-buttons">
             <CListGroup>
               <CListGroupItem component="a" href="#" active>
                 Cras justo odio
@@ -120,7 +120,7 @@
             rounded corners to render list group items edge-to-edge in a parent
             container (e.g., cards).
           </p>
-          <DocsExample href="components/list-group/#flush">
+          <DocsExample href="components/list-group.html#flush">
             <CListGroup flush>
               <CListGroupItem>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -153,7 +153,7 @@
               groups.</strong
             >
           </p>
-          <DocsExample href="components/list-group/#flush">
+          <DocsExample href="components/list-group.html#flush">
             <template
               v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
               :key="item"
@@ -178,7 +178,7 @@
             Use contextual classes to style list items with a stateful
             background and color.
           </p>
-          <DocsExample href="components/list-group/#contextual-classes">
+          <DocsExample href="components/list-group.html#contextual-classes">
             <CListGroup>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
               <CListGroupItem
@@ -205,7 +205,7 @@
             <code>active</code> state; apply it to indicate an active selection
             on a contextual list group item.
           </p>
-          <DocsExample href="components/list-group/#contextual-classes">
+          <DocsExample href="components/list-group.html#contextual-classes">
             <CListGroup>
               <CListGroupItem component="a" href="#"
                 >Dapibus ac facilisis in</CListGroupItem
@@ -242,7 +242,7 @@
             Add badges to any list group item to show unread counts, activity,
             and more.
           </p>
-          <DocsExample href="components/list-group/#with-badges">
+          <DocsExample href="components/list-group.html#with-badges">
             <CListGroup>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
@@ -280,7 +280,7 @@
               >flexbox utilities</a
             >.
           </p>
-          <DocsExample href="components/list-group/#custom-content">
+          <DocsExample href="components/list-group.html#custom-content">
             <CListGroup>
               <CListGroupItem component="a" href="#" active>
                 <div class="d-flex w-100 justify-content-between">
@@ -334,7 +334,7 @@
             Place CoreUI&#39;s checkboxes and radios within list group items and
             customize as needed.
           </p>
-          <DocsExample href="components/list-group/#checkboxes-and-radios">
+          <DocsExample href="components/list-group.html#checkboxes-and-radios">
             <CListGroup>
               <CListGroupItem>
                 <CFormCheck label="Cras justo odio" />

src/views/base/Navs.vue

@@ -1,7 +1,7 @@
 <template>
       <CRow>
       <CCol :xs="12">
-        <DocsCallout name="Nav" href="components/nav" />
+        <DocsCallout name="Nav" href="components/nav.html" />
       </CCol>
       <CCol :xs="12">
         <CCard class="mb-4">
@@ -15,7 +15,7 @@
               overrides (for working with lists), some link padding for larger hit areas, and basic
               disabled styling.
             </p>
-            <DocsExample href="components/nav#base-nav">
+            <DocsExample href="components/nav.html#base-nav">
               <CNav>
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -42,7 +42,7 @@
               the .nav uses display: flex, the nav links behave the same as nav items would, but
               without the extra markup.
             </p>
-            <DocsExample href="components/nav#base-nav">
+            <DocsExample href="components/nav.html#base-nav">
               <CNav component="nav">
                 <CNavLink href="#" active>
                   Active
@@ -74,7 +74,7 @@
             <p class="text-medium-emphasis small">
               Centered with <code>.justify-content-center</code>:
             </p>
-            <DocsExample href="components/nav#horizontal-alignment">
+            <DocsExample href="components/nav.html#horizontal-alignment">
               <CNav class="justify-content-center">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -97,7 +97,7 @@
             <p class="text-medium-emphasis small">
               Right-aligned with <code>.justify-content-end</code>:
             </p>
-            <DocsExample href="components/nav#base-nav">
+            <DocsExample href="components/nav.html#base-nav">
               <CNav class="justify-content-end">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -131,7 +131,7 @@
               <code>.flex-column</code> utility. Need to stack them on some viewports but not
               others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
             </p>
-            <DocsExample href="components/nav#vertical">
+            <DocsExample href="components/nav.html#vertical">
               <CNav class="flex-column">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -164,7 +164,7 @@
               Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
               to generate a tabbed interface
             </p>
-            <DocsExample href="components/nav#tabs">
+            <DocsExample href="components/nav.html#tabs">
               <CNav variant="tabs">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -196,7 +196,7 @@
             <p class="text-medium-emphasis small">
               Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
             </p>
-            <DocsExample href="components/nav#pills">
+            <DocsExample href="components/nav.html#pills">
               <CNav variant="pills">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -231,7 +231,7 @@
               <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
               horizontal space is occupied, but not every nav item has the same width.
             </p>
-            <DocsExample href="components/nav#fill-and-justify">
+            <DocsExample href="components/nav.html#fill-and-justify">
               <CNav variant="pills" layout="fill">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -256,7 +256,7 @@
               space will be occupied by nav links, but unlike the .nav-fill above, every nav item
               will be the same width.
             </p>
-            <DocsExample href="components/nav#fill-and-justify">
+            <DocsExample href="components/nav.html#fill-and-justify">
               <CNav variant="pills" layout="justified">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -292,7 +292,7 @@
               the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
               horizontal layout that fills the available width starting from the small breakpoint.
             </p>
-            <DocsExample href="components/nav#working-with-flex-utilities">
+            <DocsExample href="components/nav.html#working-with-flex-utilities">
               <CNav component="nav" variant="pills" class="flex-column flex-sm-row">
                 <CNavLink href="#" active>
                   Active
@@ -313,7 +313,7 @@
             <strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="components/nav#tabs-with-dropdowns">
+            <DocsExample href="components/nav.html#tabs-with-dropdowns">
               <CNav>
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -347,7 +347,7 @@
             <strong>Vue Navs</strong> <small>Pills with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="components/nav#pills-with-dropdowns">
+            <DocsExample href="components/nav.html#pills-with-dropdowns">
               <CNav variant="pills">
                 <CNavItem>
                   <CNavLink href="#" active>

src/views/base/Paginations.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Pagination" href="components/pagination" />
+      <DocsCallout name="Pagination" href="components/pagination.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -25,7 +25,7 @@
             navigate between a set of search results, an appropriate label could
             be <code>aria-label=&#34;Search results pages&#34;</code>.
           </p>
-          <DocsExample href="components/pagination">
+          <DocsExample href="components/pagination.html">
             <CPagination aria-label="Page navigation example">
               <CPaginationItem>Previous</CPaginationItem>
               <CPaginationItem>1</CPaginationItem>
@@ -48,7 +48,7 @@
             pagination links? Be sure to provide proper screen reader support
             with <code>aria</code> attributes.
           </p>
-          <DocsExample href="components/pagination#working-with-icons">
+          <DocsExample href="components/pagination.html#working-with-icons">
             <CPagination aria-label="Page navigation example">
               <CPaginationItem aria-label="Previous">
                 <span aria-hidden="true">&laquo;</span>
@@ -84,7 +84,7 @@
             disabled links and use custom JavaScript to fully disable their
             functionality.
           </p>
-          <DocsExample href="components/pagination#disabled-and-active-states">
+          <DocsExample href="components/pagination.html#disabled-and-active-states">
             <CPagination aria-label="Page navigation example">
               <CPaginationItem aria-label="Previous" disabled>
                 <span aria-hidden="true">&laquo;</span>
@@ -111,7 +111,7 @@
             <code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
             additional sizes.
           </p>
-          <DocsExample href="components/pagination#sizing">
+          <DocsExample href="components/pagination.html#sizing">
             <CPagination size="lg" aria-label="Page navigation example">
               <CPaginationItem>Previous</CPaginationItem>
               <CPaginationItem>1</CPaginationItem>
@@ -120,7 +120,7 @@
               <CPaginationItem>Next</CPaginationItem>
             </CPagination>
           </DocsExample>
-          <DocsExample href="components/pagination#sizing">
+          <DocsExample href="components/pagination.html#sizing">
             <CPagination size="sm" aria-label="Page navigation example">
               <CPaginationItem>Previous</CPaginationItem>
               <CPaginationItem>1</CPaginationItem>
@@ -144,7 +144,7 @@
               >flexbox utilities</a
             >.
           </p>
-          <DocsExample href="components/pagination#aligment">
+          <DocsExample href="components/pagination.html#aligment">
             <CPagination
               class="justify-content-center"
               aria-label="Page navigation example"
@@ -156,7 +156,7 @@
               <CPaginationItem>Next</CPaginationItem>
             </CPagination>
           </DocsExample>
-          <DocsExample href="components/pagination#aligment">
+          <DocsExample href="components/pagination.html#aligment">
             <CPagination
               class="justify-content-end"
               aria-label="Page navigation example"

src/views/base/Popovers.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Popover" href="components/breadcrumb" />
+      <DocsCallout name="Popover" href="components/popover.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -9,7 +9,7 @@
           <strong>Vue Popovers</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="directives/popover.html#example">
+          <DocsExample href="components/popover.html#example">
             <CButton
               color="danger"
               size="lg"
@@ -36,7 +36,7 @@
             Four options are available: top, right, bottom, and left aligned.
             Directions are mirrored when using CoreUI for Vue in RTL.
           </p>
-          <DocsExample href="directives/popover.html#four-directions">
+          <DocsExample href="components/popover.html#four-directions">
             <CButton
               color="secondary"
               v-c-popover="{

src/views/base/Progress.vue

@@ -1,9 +1,9 @@
 <template>
   <CRow>
-    <CCol xs="12">
+    <CCol :xs="12">
-      <DocsCallout name="Progress" href="components/progress" />
+      <DocsCallout name="Progress" href="components/progress.html" />
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Basic example</small>
@@ -20,7 +20,7 @@
             , ensuring you can stack progress bars, animate them, and place text
             labels over them.
           </p>
-          <DocsExample href="components/progress">
+          <DocsExample href="components/progress.html">
             <CProgress class="mb-3">
               <CProgressBar :value="0" />
             </CProgress>
@@ -40,7 +40,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Labels</small>
@@ -50,7 +50,7 @@
             Add labels to your progress bars by placing text within the
             <code>&lt;CProgressBar&gt;</code>.
           </p>
-          <DocsExample href="components/progress#labels">
+          <DocsExample href="components/progress.html#labels">
             <CProgress class="mb-3">
               <CProgressBar :value="25">25%</CProgressBar>
             </CProgress>
@@ -58,7 +58,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Height</small>
@@ -70,7 +70,7 @@
             inner <code>&lt;CProgressBar&gt;</code> will automatically resize
             accordingly.
           </p>
-          <DocsExample href="components/progress#height">
+          <DocsExample href="components/progress.html#height">
             <CProgress :height="1" class="mb-3">
               <CProgressBar :value="25"></CProgressBar>
             </CProgress>
@@ -81,7 +81,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Backgrounds</small>
@@ -91,7 +91,7 @@
             Use <code>color</code> prop to change the appearance of individual
             progress bars.
           </p>
-          <DocsExample href="components/progress#backgrounds">
+          <DocsExample href="components/progress.html#backgrounds">
             <CProgress class="mb-3">
               <CProgressBar color="success" :value="25" />
             </CProgress>
@@ -108,7 +108,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Multiple bars</small>
@@ -117,7 +117,7 @@
           <p class="text-medium-emphasis small">
             Include multiple progress bars in a progress component if you need.
           </p>
-          <DocsExample href="components/progress#multiple-bars">
+          <DocsExample href="components/progress.html#multiple-bars">
             <CProgress class="mb-3">
               <CProgressBar :value="15" />
               <CProgressBar color="success" :value="30" />
@@ -127,7 +127,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Striped</small>
@@ -138,7 +138,7 @@
             <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
             over the progress bar&#39;s background color.
           </p>
-          <DocsExample href="components/progress#striped">
+          <DocsExample href="components/progress.html#striped">
             <CProgress class="mb-3">
               <CProgressBar color="success" variant="striped" :value="25" />
             </CProgress>
@@ -155,7 +155,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Animated stripes</small>
@@ -167,7 +167,7 @@
             <code>&lt;CProgressBar&gt;</code> to animate the stripes right to
             left via CSS3 animations.
           </p>
-          <DocsExample href="components/progress#animated-stripes">
+          <DocsExample href="components/progress.html#animated-stripes">
             <CProgress class="mb-3">
               <CProgressBar
                 color="success"

src/views/base/Spinners.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Spinner" href="components/spinner" />
+      <DocsCallout name="Spinner" href="components/spinner.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -12,7 +12,7 @@
           <p class="text-medium-emphasis small">
             Use the border spinners for a lightweight loading indicator.
           </p>
-          <DocsExample href="components/spinner">
+          <DocsExample href="components/spinner.html">
             <CSpinner />
           </DocsExample>
           <p class="text-medium-emphasis small">
@@ -20,7 +20,7 @@
             <code>border-color</code>. You can use any of our text color
             utilities on the standard spinner.
           </p>
-          <DocsExample href="components/spinner#colors">
+          <DocsExample href="components/spinner.html#colors">
             <CSpinner color="primary" />
             <CSpinner color="secondary" />
             <CSpinner color="success" />
@@ -43,7 +43,7 @@
             If you don&#39;tfancy a border spinner, switch to the grow spinner.
             While it doesn&#39;t technically spin, it does repeatedly grow!
           </p>
-          <DocsExample href="components/spinner#growing-spinner">
+          <DocsExample href="components/spinner.html#growing-spinner">
             <CSpinner variant="grow" />
           </DocsExample>
           <p class="text-medium-emphasis small">
@@ -51,7 +51,7 @@
             you can easily change its appearance. Here it is in blue, along with
             the supported variants.
           </p>
-          <DocsExample href="components/spinner#growing-spinner">
+          <DocsExample href="components/spinner.html#growing-spinner">
             <CSpinner color="primary" variant="grow" />
             <CSpinner color="secondary" variant="grow" />
             <CSpinner color="success" variant="grow" />
@@ -74,7 +74,7 @@
             Add <code>size=&#34;sm&#34;</code> property to make a smaller
             spinner that can quickly be used within other components.
           </p>
-          <DocsExample href="components/spinner#size">
+          <DocsExample href="components/spinner.html#size">
             <CSpinner size="sm" />
             <CSpinner size="sm" variant="grow" />
           </DocsExample>
@@ -92,7 +92,7 @@
             processing or taking place. You may also swap the text out of the
             spinner element and utilize button text as needed.
           </p>
-          <DocsExample href="components/spinner#buttons">
+          <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
               <CSpinner component="span" size="sm" aria-hidden="true" />
             </CButton>
@@ -101,7 +101,7 @@
               Loading...
             </CButton>
           </DocsExample>
-          <DocsExample href="components/spinner#buttons">
+          <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
               <CSpinner
                 component="span"

src/views/base/Switches.vue

@@ -1,41 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Switches</strong>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/checks-radios.html#switches">
-            <CRow>
-                <CCol md="4">
-                    <CFormSwitch label="Default switch checkbox input" />
-                    <CFormSwitch label="Checked switch checkbox input" defaultChecked />
-                    <CFormSwitch label="Disabled switch checkbox input" disabled />
-                    <CFormSwitch label="Disabled checked switch checkbox input" defaultChecked disabled />
-                </CCol>
-                <CCol md="4">
-                    <CFormSwitch label="Large switch"  size="lg"/>
-                    <CFormSwitch label="Large switch" defaultChecked  size="lg"/>
-                    <CFormSwitch label="Large switch" disabled  size="lg"/>
-                    <CFormSwitch label="Large switch" defaultChecked disabled  size="lg"/>
-                </CCol>
-                <CCol md="4">
-                    <CFormSwitch label="Extra-large switch"  size="xl"/>
-                    <CFormSwitch label="Extra-large switch" defaultChecked  size="xl"/>
-                    <CFormSwitch label="Extra-large switch" disabled  size="xl"/>
-                    <CFormSwitch label="Extra-large switch" defaultChecked disabled  size="xl"/>
-                </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: "Switches",
-};
-</script>

src/views/base/Tables.vue

@@ -1,9 +1,9 @@
 <template>
   <CRow>
-    <CCol xs="12">
+    <CCol :xs="12">
-      <DocsCallout name="Table" href="components/table" />
+      <DocsCallout name="Table" href="components/table.html" />
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Basic example</small>
@@ -13,7 +13,7 @@
             Using the most basic table CoreUI, here&#39;s how
             <code>&lt;CTable&gt;</code>-based tables look in CoreUI.
           </p>
-          <DocsExample href="components/table">
+          <DocsExample href="components/table.html">
             <CTable>
               <CTableHead>
                 <CTableRow>
@@ -47,7 +47,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Variants</small>
@@ -57,7 +57,7 @@
             Use contextual classes to color tables, table rows or individual
             cells.
           </p>
-          <DocsExample href="components/table#variants">
+          <DocsExample href="components/table.html#variants">
             <CTable>
               <CTableHead>
                 <CTableRow>
@@ -118,7 +118,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Striped rows</small>
@@ -128,7 +128,7 @@
             Use <code>striped</code> property to add zebra-striping to any table
             row within the <code>&lt;CTableBody&gt;</code>.
           </p>
-          <DocsExample href="components/table#striped-rows">
+          <DocsExample href="components/table.html#striped-rows">
             <CTable striped>
               <CTableHead>
                 <CTableRow>
@@ -162,7 +162,7 @@
           <p class="text-medium-emphasis small">
             These classes can also be added to table variants:
           </p>
-          <DocsExample href="components/table#striped-rows">
+          <DocsExample href="components/table.html#striped-rows">
             <CTable color="dark" striped>
               <CTableHead>
                 <CTableRow>
@@ -193,7 +193,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <DocsExample href="components/table#striped-rows">
+          <DocsExample href="components/table.html#striped-rows">
             <CTable color="success" striped>
               <CTableHead>
                 <CTableRow>
@@ -227,7 +227,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Hoverable rows</small>
@@ -237,7 +237,7 @@
             Use <code>hover</code> property to enable a hover state on table
             rows within a <code>&lt;CTableBody&gt;</code>.
           </p>
-          <DocsExample href="components/table#hoverable-rows">
+          <DocsExample href="components/table.html#hoverable-rows">
             <CTable hover>
               <CTableHead>
                 <CTableRow>
@@ -268,7 +268,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <DocsExample href="components/table#hoverable-rows">
+          <DocsExample href="components/table.html#hoverable-rows">
             <CTable color="dark" hover>
               <CTableHead>
                 <CTableRow>
@@ -299,7 +299,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <DocsExample href="components/table#hoverable-rows">
+          <DocsExample href="components/table.html#hoverable-rows">
             <CTable striped hover>
               <CTableHead>
                 <CTableRow>
@@ -333,13 +333,13 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Active tables</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="components/table#active-tables">
+          <DocsExample href="components/table.html#active-tables">
             <CTable>
               <CTableHead>
                 <CTableRow>
@@ -372,7 +372,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <DocsExample href="components/table#active-tables">
+          <DocsExample href="components/table.html#active-tables">
             <CTable color="dark">
               <CTableHead>
                 <CTableRow>
@@ -408,7 +408,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Bordered tables</small>
@@ -418,7 +418,7 @@
             Add <code>bordered</code> property for borders on all sides of the
             table and cells.
           </p>
-          <DocsExample href="components/table#bordered-tables">
+          <DocsExample href="components/table.html#bordered-tables">
             <CTable bordered>
               <CTableHead>
                 <CTableRow>
@@ -454,7 +454,7 @@
               Border color utilities </a
             > can be added to change colors:
           </p>
-          <DocsExample href="components/table#bordered-tables">
+          <DocsExample href="components/table.html#bordered-tables">
             <CTable bordered borderColor="primary">
               <CTableHead>
                 <CTableRow>
@@ -488,7 +488,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Tables without borders</small>
@@ -497,7 +497,7 @@
           <p class="text-medium-emphasis small">
             Add <code>borderless</code> property for a table without borders.
           </p>
-          <DocsExample href="components/table#tables-without-borders">
+          <DocsExample href="components/table.html#tables-without-borders">
             <CTable borderless>
               <CTableHead>
                 <CTableRow>
@@ -528,7 +528,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <DocsExample href="components/table#tables-without-borders">
+          <DocsExample href="components/table.html#tables-without-borders">
             <CTable color="dark" borderless>
               <CTableHead>
                 <CTableRow>
@@ -562,7 +562,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Small tables</small>
@@ -573,7 +573,7 @@
             <code>&lt;CTable&gt;</code> more compact by cutting all cell
             <code>padding</code> in half.
           </p>
-          <DocsExample href="components/table#small-tables">
+          <DocsExample href="components/table.html#small-tables">
             <CTable small>
               <CTableHead>
                 <CTableRow>
@@ -607,7 +607,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Vertical alignment</small>
@@ -620,7 +620,7 @@
             <code>&lt;CTable&gt;</code> and are aligned to the the top by
             default. Use the align property to re-align where needed.
           </p>
-          <DocsExample href="components/table#vertical-alignment">
+          <DocsExample href="components/table.html#vertical-alignment">
             <CTable align="middle" responsive>
               <CTableHead>
                 <CTableRow>
@@ -701,7 +701,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Nesting</small>
@@ -711,7 +711,7 @@
             Border styles, active styles, and table variants are not inherited
             by nested tables.
           </p>
-          <DocsExample href="components/table#nesting">
+          <DocsExample href="components/table.html#nesting">
             <CTable striped>
               <CTableHead>
                 <CTableRow>
@@ -775,7 +775,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Table head</small>
@@ -787,7 +787,7 @@
             <code>color=&#34;dark&#34;</code> to make
             <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
           </p>
-          <DocsExample href="components/table#table-head">
+          <DocsExample href="components/table.html#table-head">
             <CTable>
               <CTableHead color="light">
                 <CTableRow>
@@ -819,7 +819,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <DocsExample href="components/table#table-head">
+          <DocsExample href="components/table.html#table-head">
             <CTable>
               <CTableHead color="dark">
                 <CTableRow>
@@ -853,13 +853,13 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Table foot</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="components/table#table-foot">
+          <DocsExample href="components/table.html#table-foot">
             <CTable>
               <CTableHead color="light">
                 <CTableRow>
@@ -901,7 +901,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Captions</small>
@@ -912,7 +912,7 @@
             table. It helps users with screen readers to find a table and
             understand what it&#39;s about and decide if they want to read it.
           </p>
-          <DocsExample href="components/table#captions">
+          <DocsExample href="components/table.html#captions">
             <CTable>
               <CTableCaption>List of users</CTableCaption>
               <CTableHead>
@@ -949,7 +949,7 @@
             You can also put the <code>&lt;CTableCaption&gt;</code> on the top
             of the table with <code>caption=&#34;top&#34;</code>.
           </p>
-          <DocsExample href="components/table#captions">
+          <DocsExample href="components/table.html#captions">
             <CTable caption="top">
               <CTableCaption>List of users</CTableCaption>
               <CTableHead>

src/views/base/Tabs.vue

@@ -1,73 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Tabs</strong>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/tabs.html">
-            <CNav variant="tabs">
-              <CNavItem>
-                <CNavLink href="#" @click="activeTabA=1">
-                  Active
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" @click="activeTabA=2">
-                  Link
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" @click="activeTabA=3">
-                  Link
-                </CNavLink>
-              </CNavItem>
-            </CNav>
-            <CTabContent>
-              <CTabPane :visible="activeTabA == 1">
-                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-                aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-                helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-                banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-                Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-              </CTabPane>
-              <CTabPane :visible="activeTabA == 2">
-                Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-                Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-                artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-                enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-                organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-                yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-                anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-                biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-                accusamus tattooed echo park.
-              </CTabPane>
-              <CTabPane :visible="activeTabA == 3">
-                Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-                organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-                pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-                hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-                pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-                etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-                craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-              </CTabPane>
-            </CTabContent>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: "Tabs",
-  data: function(){
-    return {
-      activeTabA: 1,
-      activeTabB: 1
-    }
-  }
-};
-</script>

src/views/base/Tooltips.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Tooltip" href="components/breadcrumb" />
+      <DocsCallout name="Tooltip" href="components/tooltip.html" />
     </CCol>
     <CCol :xs="12">
       <CCard>
@@ -12,7 +12,7 @@
           <p class="text-medium-emphasis small">
             Hover over the links below to see tooltips:
           </p>
-          <DocsExample href="directives/tooltip.html">
+          <DocsExample href="components/tooltip.html">
             <p class="text-medium-emphasis">
               Tight pants next level keffiyeh
               <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
@@ -32,7 +32,7 @@
           <p class="text-medium-emphasis small">
             Hover over the links below to see tooltips:
           </p>
-          <DocsExample href="directives/tooltip.html">
+          <DocsExample href="components/tooltip.html">
             <CButton
               color="secondary"
               v-c-tooltip="{

src/views/buttons/ButtonGroups.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Button Group" href="components/button-group" />
+      <DocsCallout name="Button Group" href="components/button-group.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -13,7 +13,7 @@
             Wrap a series of <code>&lt;CButton&gt;</code> components in
             <code>&lt;CButtonGroup&gt;</code>.
           </p>
-          <DocsExample href="components/button-group">
+          <DocsExample href="components/button-group.html">
             <CButtonGroup role="group" aria-label="Basic example">
               <CButton color="primary">Left</CButton>
               <CButton color="primary">Middle</CButton>
@@ -25,7 +25,7 @@
             alternative to the
             <code>&lt;CNav&gt;</code> components.
           </p>
-          <DocsExample href="components/button-group">
+          <DocsExample href="components/button-group.html">
             <CButtonGroup>
               <CButton href="#" color="primary" active> Active link </CButton>
               <CButton href="#" color="primary"> Link </CButton>
@@ -41,7 +41,7 @@
           <strong>Vue Button Group</strong> <span>Mixed styles</span>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="components/button-group#mixed-styles">
+          <DocsExample href="components/button-group.html#mixed-styles">
             <CButtonGroup role="group" aria-label="Basic mixed styles example">
               <CButton color="danger">Left</CButton>
               <CButton color="warning">Middle</CButton>
@@ -57,7 +57,7 @@
           <strong>Vue Button Group</strong> <span>Outlined styles</span>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="components/button-group#outlined-styles">
+          <DocsExample href="components/button-group.html#outlined-styles">
             <CButtonGroup role="group" aria-label="Basic outlined example">
               <CButton color="primary" variant="outline"> Left </CButton>
               <CButton color="primary" variant="outline"> Middle </CButton>
@@ -78,7 +78,7 @@
             seamless looking button group.
           </p>
           <DocsExample
-            href="components/button-group#checkbox-and-radio-button-groups"
+            href="components/button-group.html#checkbox-and-radio-button-groups"
           >
             <CButtonGroup
               role="group"
@@ -93,7 +93,7 @@
             </CButtonGroup>
           </DocsExample>
           <DocsExample
-            href="components/button-group#checkbox-and-radio-button-groups"
+            href="components/button-group.html#checkbox-and-radio-button-groups"
           >
             <CButtonGroup
               role="group"
@@ -122,7 +122,7 @@
             components. Use utility classes as needed to space out groups,
             buttons, and more.
           </p>
-          <DocsExample href="components/button-group#button-toolbar">
+          <DocsExample href="components/button-group.html#button-toolbar">
             <CButtonToolbar
               role="group"
               aria-label="Toolbar with button groups"
@@ -160,7 +160,7 @@
             toolbars. Similar to the example above, you’ll likely need some
             utilities through to space items correctly.
           </p>
-          <DocsExample href="components/button-group#button-toolbar">
+          <DocsExample href="components/button-group.html#button-toolbar">
             <CButtonToolbar
               class="mb-3"
               role="group"
@@ -226,7 +226,7 @@
             <code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
             nesting multiple groups.
           </p>
-          <DocsExample href="components/button-group#sizing">
+          <DocsExample href="components/button-group.html#sizing">
             <CButtonGroup
               size="lg"
               role="group"
@@ -267,7 +267,7 @@
             <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
             combined with a series of buttons.
           </p>
-          <DocsExample href="components/button-group#nesting">
+          <DocsExample href="components/button-group.html#nesting">
             <CButtonGroup
               role="group"
               aria-label="Button group with nested dropdown"
@@ -300,7 +300,7 @@
             horizontally.
             <strong>Split button dropdowns are not supported here.</strong>
           </p>
-          <DocsExample href="components/button-group/#vertical-variation">
+          <DocsExample href="components/button-group.html/#vertical-variation">
             <CButtonGroup
               vertical
               role="group"
@@ -315,7 +315,7 @@
               <CButton color="dark">Button</CButton>
             </CButtonGroup>
           </DocsExample>
-          <DocsExample href="components/button-group/#vertical-variation">
+          <DocsExample href="components/button-group.html/#vertical-variation">
             <CButtonGroup
               vertical
               role="group"
@@ -367,7 +367,7 @@
               </CDropdown>
             </CButtonGroup>
           </DocsExample>
-          <DocsExample href="components/button-group/#vertical-variation">
+          <DocsExample href="components/button-group.html/#vertical-variation">
             <CButtonGroup
               vertical
               role="group"

src/views/buttons/Buttons.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Button" href="components/buttons" />
+      <DocsCallout name="Button" href="components/button.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -16,7 +16,7 @@
             to initialize operations, both in the background or foreground of an
             experience.
           </p>
-          <DocsExample href="components/buttons">
+          <DocsExample href="components/button.html">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -64,7 +64,7 @@
             You can combine button with our
             <a href="https://icons.coreui.io/">CoreUI Icons</a>.
           </p>
-          <DocsExample href="components/buttons">
+          <DocsExample href="components/button.html">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -124,7 +124,7 @@
             <code>role=&#34;button&#34;</code> to adequately communicate their
             meaning to assistive technologies such as screen readers.
           </p>
-          <DocsExample href="components/buttons#button-components">
+          <DocsExample href="components/button.html#button-components">
             <CButton component="a" color="primary" href="#" role="button">
               Link
             </CButton>
@@ -162,7 +162,7 @@
             <code>variant=&#34;outline&#34;</code> prop to remove all background
             colors.
           </p>
-          <DocsExample href="components/buttons#outline-buttons">
+          <DocsExample href="components/button.html#outline-buttons">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -213,7 +213,7 @@
             <code>variant=&#34;ghost&#34;</code> prop to remove all background
             colors.
           </p>
-          <DocsExample href="components/buttons#ghost-buttons">
+          <DocsExample href="components/button.html#ghost-buttons">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -263,11 +263,11 @@
             Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
             <code>size=&#34;sm&#34;</code> for additional sizes.
           </p>
-          <DocsExample href="components/buttons#sizes">
+          <DocsExample href="components/button.html#sizes">
             <CButton color="primary" size="lg"> Large button </CButton>
             <CButton color="secondary" size="lg"> Large button </CButton>
           </DocsExample>
-          <DocsExample href="components/buttons#sizes">
+          <DocsExample href="components/button.html#sizes">
             <CButton color="primary" size="sm"> Small button </CButton>
             <CButton color="secondary" size="sm"> Small button </CButton>
           </DocsExample>
@@ -280,7 +280,7 @@
           <strong>Vue Button</strong> <small>Pill</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="components/buttons#pill-buttons">
+          <DocsExample href="components/button.html#pill-buttons">
             <template
               v-for="color in [
                 'primary',
@@ -313,7 +313,7 @@
           <strong>Vue Button</strong> <small>Square</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="components/buttons#square">
+          <DocsExample href="components/button.html#square">
             <template
               v-for="color in [
                 'primary',
@@ -353,7 +353,7 @@
             <code>pointer-events: none</code> applied to, disabling hover and
             active states from triggering.
           </p>
-          <DocsExample href="components/buttons#disabled-state">
+          <DocsExample href="components/button.html#disabled-state">
             <CButton color="primary" size="lg" disabled>
               Primary button
             </CButton>
@@ -371,7 +371,7 @@
             <code>aria-disabled=&#34;true&#34;</code> attribute to show the
             state of the component to assistive technologies.
           </p>
-          <DocsExample href="components/buttons#disabled-state">
+          <DocsExample href="components/button.html#disabled-state">
             <CButton component="a" href="#" color="primary" size="lg" disabled>
               Primary link
             </CButton>
@@ -398,7 +398,7 @@
             Create buttons that span the full width of a parent—by using
             utilities.
           </p>
-          <DocsExample href="components/buttons#block-buttons">
+          <DocsExample href="components/button.html#block-buttons">
             <div class="d-grid gap-2">
               <CButton color="primary">Button</CButton>
               <CButton color="primary">Button</CButton>
@@ -411,7 +411,7 @@
             thus nullifying the <code>gap-2</code> utility. Resize your browser
             to see them change.
           </p>
-          <DocsExample href="components/buttons#block-buttons">
+          <DocsExample href="components/button.html#block-buttons">
             <div class="d-grid gap-2 d-md-block">
               <CButton color="primary">Button</CButton>
               <CButton color="primary">Button</CButton>
@@ -423,7 +423,7 @@
             use <code>.col-6</code>. Center it horizontally with
             <code>.mx-auto</code>, too.
           </p>
-          <DocsExample href="components/buttons#block-buttons">
+          <DocsExample href="components/button.html#block-buttons">
             <div class="d-grid gap-2 col-6 mx-auto">
               <CButton color="primary">Button</CButton>
               <CButton color="primary">Button</CButton>
@@ -436,7 +436,7 @@
             button to right align the buttons when they&#39;re no longer
             stacked.
           </p>
-          <DocsExample href="components/buttons#block-buttons">
+          <DocsExample href="components/button.html#block-buttons">
             <div class="d-grid gap-2 d-md-flex justify-content-md-end">
               <CButton color="primary" class="me-md-2"> Button </CButton>
               <CButton color="primary">Button</CButton>

src/views/buttons/Dropdowns.vue

@@ -1,12 +1,12 @@
 <template>
   <CRow>
-    <CCol xs="12">
+    <CCol :xs="12">
-      <DocsCallout name="Dropdown" href="components/dropdown" />
+      <DocsCallout name="Dropdown" href="components/dropdown.html" />
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Single button</small>
+          <strong>Vue Dropdown</strong> <small>Single button</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -14,7 +14,7 @@
             <code>&lt;button&gt;</code>
             elements:
           </p>
-          <DocsExample href="components/dropdown#single-button">
+          <DocsExample href="components/dropdown.html#single-button">
             <CDropdown>
               <CDropdownToggle color="secondary"
                 >Dropdown button</CDropdownToggle
@@ -29,7 +29,7 @@
           <p class="text-medium-emphasis small">
             The best part is you can do this with any button variant, too:
           </p>
-          <DocsExample href="components/dropdown#single-button">
+          <DocsExample href="components/dropdown.html#single-button">
             <template
               v-for="color in [
                 'primary',
@@ -58,10 +58,10 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Split button</small>
+          <strong>Vue Dropdown</strong> <small>Split button</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -78,7 +78,7 @@
             split button and implement a more properly sized hit area next to
             the main button.
           </p>
-          <DocsExample href="components/dropdown#split-button">
+          <DocsExample href="components/dropdown.html#split-button">
             <template
               v-for="color in [
                 'primary',
@@ -110,17 +110,17 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Sizing</small>
+          <strong>Vue Dropdown</strong> <small>Sizing</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
             Button dropdowns work with buttons of all sizes, including default
             and split dropdown buttons.
           </p>
-          <DocsExample href="components/dropdown#sizing">
+          <DocsExample href="components/dropdown.html#sizing">
             <CDropdown variant="btn-group">
               <CDropdownToggle color="secondary" size="lg">
                 Large button
@@ -147,7 +147,7 @@
               </CDropdownMenu>
             </CDropdown>
           </DocsExample>
-          <DocsExample href="components/dropdown#sizing">
+          <DocsExample href="components/dropdown.html#sizing">
             <CDropdown variant="btn-group">
               <CDropdownToggle color="secondary" size="sm">
                 Small button
@@ -177,10 +177,10 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Single button</small>
+          <strong>Vue Dropdown</strong> <small>Single button</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -189,7 +189,7 @@
             <code>dark</code> property. No changes are required to the dropdown
             items.
           </p>
-          <DocsExample href="components/dropdown#dark-dropdowns">
+          <DocsExample href="components/dropdown.html#dark-dropdowns">
             <CDropdown dark>
               <CDropdownToggle color="secondary"
                 >Dropdown button</CDropdownToggle
@@ -206,10 +206,10 @@
           <p class="text-medium-emphasis small">
             And putting it to use in a navbar:
           </p>
-          <DocsExample href="components/dropdown#dark-dropdowns">
+          <DocsExample href="components/dropdown.html#dark-dropdowns">
             <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
               <div class="container-fluid">
-                <a class="navbar-brand" href="https://coreui.io/react/">
+                <a class="navbar-brand" href="https://coreui.io/vue/">
                   Navbar
                 </a>
                 <button
@@ -248,10 +248,10 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Dropup</small>
+          <strong>Vue Dropdown</strong> <small>Dropup</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -260,7 +260,7 @@
             <code>&lt;CDropdown&gt;</code>
             component.
           </p>
-          <DocsExample href="components/dropdown#dropup">
+          <DocsExample href="components/dropdown.html#dropup">
             <CDropdown variant="btn-group" direction="dropup">
               <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
               <CDropdownMenu>
@@ -286,10 +286,10 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Dropright</small>
+          <strong>Vue Dropdown</strong> <small>Dropright</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -298,7 +298,7 @@
             <code>&lt;CDropdown&gt;</code>
             component.
           </p>
-          <DocsExample href="components/dropdown#dropright">
+          <DocsExample href="components/dropdown.html#dropright">
             <CDropdown variant="btn-group" direction="dropend">
               <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
               <CDropdownMenu>
@@ -324,10 +324,10 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
-          <strong>React Dropdown</strong> <small>Dropleft</small>
+          <strong>Vue Dropdown</strong> <small>Dropleft</small>
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
@@ -336,7 +336,7 @@
             <code>&lt;CDropdown&gt;</code>
             component.
           </p>
-          <DocsExample href="components/dropdown#dropleft">
+          <DocsExample href="components/dropdown.html#dropleft">
             <CButtonGroup>
               <CDropdown variant="btn-group" direction="dropstart">
                 <CDropdownToggle color="secondary" split />

src/views/charts/CChartBarExample.vue

@@ -1,7 +1,5 @@
 <template>
-  <CChartBar
+  <CChartBar :data="defaultData" />
-    :data="defaultData"
-  />
 </template>
 
 <script>
@@ -10,18 +8,31 @@ export default {
   name: 'CChartBarExample',
   components: { CChartBar },
   computed: {
-    defaultData () {
+    defaultData() {
       return {
-        labels: ['months'],
+        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]
+            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
-          }
+          },
-        ]
+        ],
       }
-    }
+    },
-  }
+  },
 }
 </script>

src/views/charts/CChartBarSimple.vue

@@ -1,65 +0,0 @@
-<template>
-  <CChartBar
-    :data="computedData"
-  />
-</template>
-
-<script>
-import { CChartBar } from '@coreui/vue-chartjs'
-import { getColor, deepObjectsMerge } from '@coreui/utils/src'
-export default {
-  name: 'CChartBarSimple',
-  components: { CChartBar },
-  props: {
-    ...CChartBar.props,
-    backgroundColor: {
-      type: String,
-      default: '#f87979'
-    },
-    pointHoverBackgroundColor: String,
-    dataPoints: {
-      type: Array,
-      default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    label: {
-      type: String,
-      default: 'Sales'
-    },
-    pointed: Boolean
-  },
-  computed: {
-    defaultOptions () {
-      return {
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false
-          }],
-          yAxes: [{
-            display: false
-          }]
-        }
-      }
-    },
-    computedData () {
-      return {
-        labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
-        datasets: [
-          {
-            data: this.dataPoints,
-            backgroundColor: getColor(this.backgroundColor),
-            pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
-            label: this.label,
-            barPercentage: 0.5,
-            categoryPercentage: 1
-          }
-        ],
-        options: this.defaultOptions
-      }     
-    },
-  }
-}
-</script>

src/views/charts/CChartLineSimple.vue

@@ -1,83 +0,0 @@
-<template>
-  <CChartLine
-    :data="computedData"
-  />
-</template>
-
-<script>
-import { CChartLine } from '@coreui/vue-chartjs'
-import { getColor, deepObjectsMerge } from '@coreui/utils/src'
-export default {
-  name: 'CChartLineSimple',
-  components: { CChartLine },
-  props: {
-    ...CChartLine.props,
-    borderColor: {
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
-    },
-    dataPoints: {
-      type: Array,
-      default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    label: {
-      type: String,
-      default: 'Sales'
-    },
-    pointed: {
-      type: Boolean,
-      default: true
-    },
-    pointHoverBackgroundColor: String
-  },
-  computed: {
-    pointHoverColor () {
-      if (this.pointHoverBackgroundColor) {
-        return this.pointHoverBackgroundColor
-      } else if (this.backgroundColor !== 'transparent') {
-        return this.backgroundColor
-      }
-      return this.borderColor
-    },
-    computedData () {
-      return {
-        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-        datasets: [
-          {
-            data: this.dataPoints,
-            borderColor: getColor(this.borderColor),
-            backgroundColor: getColor(this.backgroundColor),
-            pointBackgroundColor: getColor(this.pointHoverColor),
-            pointHoverBackgroundColor: getColor(this.pointHoverColor),
-            label: this.label
-          }
-        ],
-        options: {
-          scales: {
-            xAxes: [{
-              display: false
-            }],
-            yAxes: [{
-              display: false
-            }]
-          },
-          elements: {
-            line: {
-              borderWidth: 2
-            },
-            point: {
-              radius: 0,
-              hitRadius: 10,
-              hoverRadius: 4
-            }
-          }
-        }
-      }
-    },
-  }
-}
-</script>

src/views/charts/CChartLineSimplePointed.vue

@@ -1,100 +0,0 @@
-<template>
-  <CChartLine
-    :data="computedData"
-  />
-</template>
-
-<script>
-import { CChartLine } from '@coreui/vue-chartjs'
-import { getColor, deepObjectsMerge } from '@coreui/utils/src'
-export default {
-  name: 'CChartLineSimplePointed',
-  components: { CChartLine },
-  props: {
-    ...CChartLine.props,
-    borderColor: {
-      type: String,
-      default: 'rgba(255,255,255,.55)'
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
-    },
-    dataPoints: {
-      type: Array,
-      default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    label: {
-      type: String,
-      default: 'Sales'
-    },
-    pointed: {
-      type: Boolean,
-      default: true
-    },
-    pointHoverBackgroundColor: String
-  },
-  computed: {
-    pointHoverColor () {
-      if (this.pointHoverBackgroundColor) {
-        return this.pointHoverBackgroundColor
-      } else if (this.backgroundColor !== 'transparent') {
-        return this.backgroundColor
-      }
-      return this.borderColor
-    },
-    computedData () {
-      return {
-        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-        datasets: [
-          {
-            data: this.dataPoints,
-            borderColor: getColor(this.borderColor),
-            backgroundColor: getColor(this.backgroundColor),
-            pointBackgroundColor: getColor(this.pointHoverColor),
-            pointHoverBackgroundColor: getColor(this.pointHoverColor),
-            label: this.label
-          }
-        ],
-        options: {
-          scales: {
-            xAxes: [
-              {
-                offset: true,
-                gridLines: {
-                  color: 'transparent',
-                  zeroLineColor: 'transparent'
-                },
-                ticks: {
-                  fontSize: 2,
-                  fontColor: 'transparent'
-                }
-              }
-            ],
-            yAxes: [
-              {
-                display: false,
-                ticks: {
-                  display: false,
-                  min: Math.min.apply(Math, this.dataPoints) - 5,
-                  max: Math.max.apply(Math, this.dataPoints) + 5
-                }
-              }
-            ]
-          },
-          elements: {
-            line: {
-              borderWidth: 1
-            },
-            point: {
-              radius: 4,
-              hitRadius: 10,
-              hoverRadius: 4
-            }
-          }
-        }
-      }
-    },
-  }
-}
-</script>

src/views/charts/Charts.vue

@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol md="6" class="mt-4">
+    <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader>
           Line Chart
@@ -10,58 +10,36 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol md="6" class="mt-4">
+    <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader>Bar Chart</CCardHeader>
         <CCardBody><CChartBarExample/></CCardBody>
       </CCard>
     </CCol>
-    <CCol md="6" class="mt-4">
+    <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader>Doughnut Chart</CCardHeader>
         <CCardBody><CChartDoughnutExample/></CCardBody>
       </CCard>
     </CCol>
-    <CCol md="6" class="mt-4">
+    <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader>Radar Chart</CCardHeader>
         <CCardBody><CChartRadarExample/></CCardBody>
       </CCard>
     </CCol>
-    <CCol md="6" class="mt-4">
+    <CCol :md="6" class="mb-4">
       <CCard>
          <CCardHeader>Pie Chart</CCardHeader>
         <CCardBody><CChartPieExample/></CCardBody>
       </CCard>
     </CCol>
-    <CCol md="6" class="mt-4">
+    <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader>Polar Area Chart</CCardHeader>
         <CCardBody><CChartPolarAreaExample/></CCardBody>
       </CCard>
     </CCol>
-    <CCol md="6" class="mt-4">
-      <CCard>
-        <CCardHeader>Simple line chart</CCardHeader>
-        <CCardBody>
-          <CChartLineSimple border-color="success" labels="months"/>
-        </CCardBody>        
-      </CCard>
-    </CCol>
-    <!--
-    <CCol md="6" class="mt-4">
-      <CCard>
-        <CCardHeader>Simple pointed chart</CCardHeader>
-        <CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
-      </CCard>
-    </CCol>
-    -->
-    <CCol md="6" class="mt-4">
-      <CCard>
-        <CCardHeader>Simple bar chart</CCardHeader>
-        <CCardBody><CChartBarSimple background-color="danger"/></CCardBody>        
-      </CCard>
-    </CCol>
   </CRow>
 </template>
 
@@ -73,4 +51,4 @@ export default {
     ...Charts
   }
 }
-</script>
+</script>

src/views/charts/index.js

@@ -1,6 +1,3 @@
-import CChartLineSimple from './CChartLineSimple'
-import CChartLineSimplePointed from './CChartLineSimplePointed'
-import CChartBarSimple from './CChartBarSimple'
 import CChartLineExample from './CChartLineExample'
 import CChartBarExample from './CChartBarExample'
 import CChartDoughnutExample from './CChartDoughnutExample'
@@ -9,13 +6,10 @@ import CChartPieExample from './CChartPieExample'
 import CChartPolarAreaExample from './CChartPolarAreaExample'
 
 export {
-  CChartLineSimple,
-  CChartLineSimplePointed,
-  CChartBarSimple,
   CChartLineExample,
   CChartBarExample,
   CChartDoughnutExample,
   CChartRadarExample,
   CChartPieExample,
   CChartPolarAreaExample
-}
+}

src/views/forms/ChecksRadios.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Check and Radios" href="forms/checks-radios" />
+      <DocsCallout name="Check and Radios" href="forms/checks-radios.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -9,7 +9,7 @@
           <strong>Vue Checkbox</strong>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/checks-radios">
+          <DocsExample href="forms/checks-radios.html">
             <CFormCheck id="flexCheckDefault" label="Default checkbox" />
             <CFormCheck
               id="flexCheckChecked"
@@ -31,7 +31,7 @@
             <code>&lt;label&gt;</code>s are automatically styled to match with a
             lighter color to help indicate the input&#39;s state.
           </p>
-          <DocsExample href="forms/checks-radios#disabled">
+          <DocsExample href="forms/checks-radios.html#disabled">
             <CFormCheck label="Disabled checkbox" disabled />
             <CFormCheck
               label="Disabled checked checkbox"
@@ -53,7 +53,7 @@
             <code>&lt;label&gt;</code>s are automatically styled to match with a
             lighter color to help indicate the input&#39;s state.
           </p>
-          <DocsExample href="forms/checks-radios#radios">
+          <DocsExample href="forms/checks-radios.html#radios">
             <CFormCheck
               type="radio"
               name="flexRadioDefault"
@@ -77,7 +77,7 @@
           <strong>Vue Radio</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/checks-radios#disabled-1">
+          <DocsExample href="forms/checks-radios.html#disabled-1">
             <CFormCheck
               type="radio"
               name="flexRadioDisabled"
@@ -108,7 +108,7 @@
             <code>switch</code> boolean properly to render a toggle switch.
             Switches also support the <code>disabled</code> attribute.
           </p>
-          <DocsExample href="forms/checks-radios#switches">
+          <DocsExample href="forms/checks-radios.html#switches">
             <CFormSwitch
               label="Default switch checkbox input"
               id="formSwitchCheckDefault"
@@ -139,7 +139,7 @@
           <strong>Vue Switches</strong> <small>Sizes</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/checks-radios#sizes">
+          <DocsExample href="forms/checks-radios.html#sizes">
             <CFormSwitch
               label="Default switch checkbox input"
               id="formSwitchCheckDefault"
@@ -169,11 +169,11 @@
             By default, any number of checkboxes and radios that are immediate
             sibling will be vertically stacked and appropriately spaced.
           </p>
-          <DocsExample href="forms/checks-radios#default-stacked">
+          <DocsExample href="forms/checks-radios.html#default-stacked">
             <CFormCheck id="defaultCheck1" label="Default checkbox" />
             <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
           </DocsExample>
-          <DocsExample href="forms/checks-radios#default-stacked">
+          <DocsExample href="forms/checks-radios.html#default-stacked">
             <CFormCheck
               type="radio"
               name="exampleRadios"
@@ -212,7 +212,7 @@
             <code>inline</code>  boolean property to any
             <code>&lt;CFormCheck&gt;</code>.
           </p>
-          <DocsExample href="forms/checks-radios#inline">
+          <DocsExample href="forms/checks-radios.html#inline">
             <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
             <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
             <CFormCheck
@@ -223,7 +223,7 @@
               disabled
             />
           </DocsExample>
-          <DocsExample href="forms/checks-radios#inline">
+          <DocsExample href="forms/checks-radios.html#inline">
             <CFormCheck
               inline
               type="radio"
@@ -263,7 +263,7 @@
             Remember to still provide some form of accessible name for assistive
             technologies (for instance, using <code>aria-label</code>).
           </p>
-          <DocsExample href="forms/checks-radios#without-labels">
+          <DocsExample href="forms/checks-radios.html#without-labels">
             <div>
               <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
             </div>
@@ -292,7 +292,7 @@
             <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
             further be grouped in a button group if needed.
           </p>
-          <DocsExample href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
               :button="{ color: 'primary' }"
               id="btn-check"
@@ -300,7 +300,7 @@
               label="Single toggle"
             />
           </DocsExample>
-          <DocsExample href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
               :button="{ color: 'primary' }"
               id="btn-check-2"
@@ -309,7 +309,7 @@
               defaultChecked
             />
           </DocsExample>
-          <DocsExample href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
               :button="{ color: 'primary' }"
               id="btn-check-3"
@@ -319,7 +319,7 @@
             />
           </DocsExample>
           <h3>Radio toggle buttons</h3>
-          <DocsExample href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
               :button="{ color: 'secondary' }"
               type="radio"
@@ -360,7 +360,7 @@
             Different variants of button, such at the various outlined styles,
             are supported.
           </p>
-          <DocsExample href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <div>
               <CFormCheck
                 :button="{ color: 'primary', variant: 'outline' }"

src/views/forms/FloatingLabels.vue

@@ -1,9 +1,9 @@
 <template>
 <CRow>
-      <CCol xs="12">
+      <CCol :xs="12">
-        <DocsCallout name="Floating Label" href="forms/floating-label" />
+        <DocsCallout name="Floating Label" href="forms/floating-labels.html" />
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong>
@@ -17,7 +17,7 @@
               pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
               we can utilize a sibling selector (e.g., <code>~</code>).
             </p>
-            <DocsExample href="forms/floating-labels">
+            <DocsExample href="forms/floating-labels.html">
               <CFormFloating class="mb-3">
                 <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
                 <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -31,7 +31,7 @@
               When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
               s will automatically adjust to their floated position.
             </p>
-            <DocsExample href="forms/floating-labels">
+            <DocsExample href="forms/floating-labels.html">
               <CFormFloating>
                 <CFormInput
                   type="email"
@@ -45,7 +45,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong> <small>Textareas</small>
@@ -55,7 +55,7 @@
               By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
               <code>&lt;CFormInput&gt;</code>s.
             </p>
-            <DocsExample href="forms/floating-labels#textareas">
+            <DocsExample href="forms/floating-labels.html#textareas">
               <CFormFloating>
                 <CFormTextarea
                   id="floatingTextarea"
@@ -69,7 +69,7 @@
               <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
               inline or via custom CSS).
             </p>
-            <DocsExample href="forms/floating-labels#textareas">
+            <DocsExample href="forms/floating-labels.html#textareas">
               <CFormFloating>
                 <CFormTextarea
                   placeholder="Leave a comment here"
@@ -82,7 +82,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong> <small>Selects</small>
@@ -97,7 +97,7 @@
                 Selects with <code>size</code> and <code>multiple</code> are not supported.
               </strong>
             </p>
-            <DocsExample href="forms/floating-labels#selects">
+            <DocsExample href="forms/floating-labels.html#selects">
               <CFormFloating>
                 <CFormSelect id="floatingSelect" aria-label="Floating label select example">
                   <option>Open this select menu</option>
@@ -111,7 +111,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong> <small>Layout</small>
@@ -121,7 +121,7 @@
               When working with the CoreUI for Bootstrap grid system, be sure to place form elements
               within column classes.
             </p>
-            <DocsExample href="forms/floating-labels#layout">
+            <DocsExample href="forms/floating-labels.html#layout">
               <CRow :xs="{ gutter: 2 }">
                 <CCol md>
                   <CFormFloating>

src/views/forms/FormControl.vue

@@ -1,15 +1,15 @@
 <template>
   <CRow>
-    <CCol xs="12">
+    <CCol :xs="12">
-      <DocsCallout name="Form Control" href="forms/form-control" />
+      <DocsCallout name="Form Control" href="forms/form-control.html" />
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/form-control">
+          <DocsExample href="forms/form-control.html">
             <CForm>
               <div class="mb-3">
                 <CFormLabel for="exampleFormControlInput1"
@@ -35,7 +35,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong> <small>Sizing</small>
@@ -45,7 +45,7 @@
             Set heights using <code>size</code> property like
             <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
           </p>
-          <DocsExample href="forms/form-control#sizing">
+          <DocsExample href="forms/form-control.html#sizing">
             <CFormInput
               type="text"
               size="lg"
@@ -69,7 +69,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong> <small>Disabled</small>
@@ -79,7 +79,7 @@
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <DocsExample href="forms/form-control#disabled">
+          <DocsExample href="forms/form-control.html#disabled">
             <CFormInput
               type="text"
               placeholder="Disabled input"
@@ -99,7 +99,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong> <small>Readonly</small>
@@ -111,7 +111,7 @@
             appear lighter (just like disabled inputs), but retain the standard
             cursor.
           </p>
-          <DocsExample href="forms/form-control#readonly">
+          <DocsExample href="forms/form-control.html#readonly">
             <CFormInput
               type="text"
               placeholder="Readonly input here..."
@@ -122,7 +122,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong> <small>Readonly plain text</small>
@@ -190,13 +190,13 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong> <small>File input</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/form-control#file-input">
+          <DocsExample href="forms/form-control.html#file-input">
             <div class="mb-3">
               <CFormLabel for="formFile">Default file input example</CFormLabel>
               <CFormInput type="file" id="formFile" />
@@ -225,13 +225,13 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong> <small>Color</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/form-control#color">
+          <DocsExample href="forms/form-control.html#color">
             <CFormLabel for="exampleColorInput">Color picker</CFormLabel>
             <CFormInput
               type="color"

src/views/forms/InputGroup.vue

@@ -1,7 +1,7 @@
 <template>
 <CRow>
       <CCol xs=12>
-        <DocsCallout name="Input Group" href="forms/input-group" />
+        <DocsCallout name="Input Group" href="forms/input-group.html" />
       </CCol>
       <CCol xs=12>
         <CCard class="mb-4">
@@ -14,7 +14,7 @@
               sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
               input group.
             </p>
-            <DocsExample href="forms/input-group">
+            <DocsExample href="forms/input-group.html">
               <CInputGroup class="mb-3">
                 <CInputGroupText id="basic-addon1">@</CInputGroupText>
                 <CFormInput
@@ -65,7 +65,7 @@
               custom form field validation within an input group. You may disable this with
               <code>.flex-nowrap</code>.
             </p>
-            <DocsExample href="forms/input-group#wrapping">
+            <DocsExample href="forms/input-group.html#wrapping">
               <CInputGroup class="flex-nowrap">
                 <CInputGroupText id="addon-wrapping">@</CInputGroupText>
                 <CFormInput
@@ -92,7 +92,7 @@
             <p class="text-medium-emphasis small">
               <strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
             </p>
-            <DocsExample href="forms/input-group#sizing">
+            <DocsExample href="forms/input-group.html#sizing">
               <CInputGroup size="sm" class="mb-3">
                 <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
                 <CFormInput
@@ -127,7 +127,7 @@
             <p class="text-medium-emphasis small">
               Place any checkbox or radio option within an input group&#39;s addon instead of text.
             </p>
-            <DocsExample href="forms/input-group#checkboxes-and-radios">
+            <DocsExample href="forms/input-group.html#checkboxes-and-radios">
               <CInputGroup class="mb-3">
                 <CInputGroupText>
                   <CFormCheck
@@ -163,7 +163,7 @@
               styles are only available for input groups with a single
               <code>&lt;CFormInput&gt;</code>.
             </p>
-            <DocsExample href="forms/input-group#multiple-inputs">
+            <DocsExample href="forms/input-group.html#multiple-inputs">
               <CInputGroup>
                 <CInputGroupText>First and last name</CInputGroupText>
                 <CFormInput aria-label="First name" />
@@ -183,7 +183,7 @@
               Multiple add-ons are supported and can be mixed with checkbox and radio input
               versions..
             </p>
-            <DocsExample href="forms/input-group#multiple-addons">
+            <DocsExample href="forms/input-group.html#multiple-addons">
               <CInputGroup class="mb-3">
                 <CInputGroupText>$</CInputGroupText>
                 <CInputGroupText>0.00</CInputGroupText>
@@ -208,7 +208,7 @@
               Multiple add-ons are supported and can be mixed with checkbox and radio input
               versions..
             </p>
-            <DocsExample href="forms/input-group#button-addons">
+            <DocsExample href="forms/input-group.html#button-addons">
               <CInputGroup class="mb-3">
                 <CButton type="button" color="secondary" variant="outline" id="button-addon1">
                   Button
@@ -260,7 +260,7 @@
             <strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="forms/input-group#buttons-with-dropdowns">
+            <DocsExample href="forms/input-group.html#buttons-with-dropdowns">
               <CInputGroup class="mb-3">
                 <CDropdown variant="input-group">
                   <CDropdownToggle color="secondary" variant="outline">
@@ -328,7 +328,7 @@
             <strong>Vue Input group</strong> <small>Segmented buttons</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="forms/input-group#segmented-buttons">
+            <DocsExample href="forms/input-group.html#segmented-buttons">
               <CInputGroup class="mb-3">
                 <CDropdown variant="input-group">
                   <CButton type="button" color="secondary" variant="outline">
@@ -371,7 +371,7 @@
             <strong>Vue Input group</strong> <small>Custom select</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="forms/input-group#custom-select">
+            <DocsExample href="forms/input-group.html#custom-select">
               <CInputGroup class="mb-3">
                 <CInputGroupText component="label" for="inputGroupSelect01">
                   Options
@@ -426,7 +426,7 @@
             <strong>Vue Input group</strong> <small>Custom file input</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="forms/input-group#custom-file-input">
+            <DocsExample href="forms/input-group.html#custom-file-input">
               <CInputGroup class="mb-3">
                 <CInputGroupText component="label" for="inputGroupFile01">
                   Upload

src/views/forms/Layout.vue

@@ -11,7 +11,7 @@
             for form layouts that require multiple columns, varied widths, and
             additional alignment options.
           </p>
-          <DocsExample href="forms/layout#form-grid">
+          <DocsExample href="forms/layout.html#form-grid">
             <CRow>
               <CCol xs>
                 <CFormInput placeholder="First name" aria-label="First name" />
@@ -38,7 +38,7 @@
             , you can have control over the gutter width in as well the inline
             as block direction.
           </p>
-          <DocsExample href="forms/layout#gutters">
+          <DocsExample href="forms/layout.html#gutters">
             <CRow class="g-3">
               <CCol xs>
                 <CFormInput placeholder="First name" aria-label="First name" />
@@ -51,7 +51,7 @@
           <p class="text-medium-emphasis small">
             More complex layouts can also be created with the grid system.
           </p>
-          <DocsExample href="forms/layout#gutters">
+          <DocsExample href="forms/layout.html#gutters">
             <CForm class="row g-3">
               <CCol :md="6">
                 <CFormLabel for="inputEmail4">Email</CFormLabel>
@@ -122,13 +122,10 @@
             removed the <code>padding-top</code> on our stacked radio inputs
             label to better align the text baseline.
           </p>
-          <DocsExample href="forms/layout#horizontal-form">
+          <DocsExample href="forms/layout.html#horizontal-form">
             <CForm>
               <CRow class="mb-3">
-                <CFormLabel
+                <CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">
-                  for="inputEmail3"
-                  class="col-sm-2 col-form-label"
-                >
                   Email
                 </CFormLabel>
                 <CCol :sm="10">
@@ -202,7 +199,7 @@
             correctly follow the size of <code>.form-control-lg</code> and
             <code>.form-control-sm</code>.
           </p>
-          <DocsExample href="forms/layout#horizontal-form-label-sizing">
+          <DocsExample href="forms/layout.html#horizontal-form-label-sizing">
             <CRow class="mb-3">
               <CFormLabel
                 for="colFormLabelSm"
@@ -220,10 +217,7 @@
               </CCol>
             </CRow>
             <CRow class="mb-3">
-              <CFormLabel
+              <CFormLabel for="colFormLabel" class="col-sm-2 col-form-label">
-                for="colFormLabel"
-                class="col-sm-2 col-form-label"
-              >
                 Email
               </CFormLabel>
               <CCol :sm="10">
@@ -270,7 +264,7 @@
             rest, with specific column classes like
             <code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
           </p>
-          <DocsExample href="forms/layout#column-sizing">
+          <DocsExample href="forms/layout.html#column-sizing">
             <CRow class="g-3">
               <CCol sm="{7}">
                 <CFormInput placeholder="City" aria-label="City" />
@@ -300,22 +294,16 @@
             only take up as much space as needed. Put another way, the column
             sizes itself based on the contents.
           </p>
-          <DocsExample href="forms/layout#auto-sizing">
+          <DocsExample href="forms/layout.html#auto-sizing">
             <CForm class="row gy-2 gx-3 align-items-center">
               <CCol xs="auto">
-                <CFormLabel
+                <CFormLabel class="visually-hidden" for="autoSizingInput">
-                  class="visually-hidden"
-                  for="autoSizingInput"
-                >
                   Name
                 </CFormLabel>
                 <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
               </CCol>
               <CCol xs="auto">
-                <CFormLabel
+                <CFormLabel class="visually-hidden" for="autoSizingInputGroup">
-                  class="visually-hidden"
-                  for="autoSizingInputGroup"
-                >
                   Username
                 </CFormLabel>
                 <CInputGroup>
@@ -327,10 +315,7 @@
                 </CInputGroup>
               </CCol>
               <CCol xs="auto">
-                <CFormLabel
+                <CFormLabel class="visually-hidden" for="autoSizingSelect">
-                  class="visually-hidden"
-                  for="autoSizingSelect"
-                >
                   Preference
                 </CFormLabel>
                 <CFormSelect id="autoSizingSelect">
@@ -356,13 +341,10 @@
             You can then remix that once again with size-specific column
             classes.
           </p>
-          <DocsExample href="forms/layout#auto-sizing">
+          <DocsExample href="forms/layout.html#auto-sizing">
             <CForm class="row gx-3 gy-2 align-items-center">
               <CCol :sm="3">
-                <CFormLabel
+                <CFormLabel class="visually-hidden" for="specificSizeInputName">
-                  class="visually-hidden"
-                  for="specificSizeInputName"
-                >
                   Name
                 </CFormLabel>
                 <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
@@ -383,10 +365,7 @@
                 </CInputGroup>
               </CCol>
               <CCol :sm="3">
-                <CFormLabel
+                <CFormLabel class="visually-hidden" for="specificSizeSelect">
-                  class="visually-hidden"
-                  for="specificSizeSelect"
-                >
                   Preference
                 </CFormLabel>
                 <CFormSelect id="specificSizeSelect">
@@ -426,7 +405,7 @@
             <code>.align-items-center</code> aligns the form elements to the
             middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
           </p>
-          <DocsExample href="forms/layout#inline-forms">
+          <DocsExample href="forms/layout.html#inline-forms">
             <CForm class="row row-cols-lg-auto g-3 align-items-center">
               <CCol :xs="12">
                 <CFormLabel
@@ -444,10 +423,7 @@
                 </CInputGroup>
               </CCol>
               <CCol :xs="12">
-                <CFormLabel
+                <CFormLabel class="visually-hidden" for="inlineFormSelectPref">
-                  class="visually-hidden"
-                  for="inlineFormSelectPref"
-                >
                   Preference
                 </CFormLabel>
                 <CFormSelect id="inlineFormSelectPref">
@@ -477,6 +453,6 @@
 
 <script>
 export default {
-  name: "Layout",
+  name: 'Layout',
-};
+}
 </script>

src/views/forms/Range.vue

@@ -1,9 +1,9 @@
 <template>
   <CRow>
-    <CCol xs="12">
+    <CCol :xs="12">
-      <DocsCallout name="Range" href="forms/range" />
+      <DocsCallout name="Range" href="forms/range.html" />
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Range</strong> <small></small>
@@ -14,14 +14,14 @@
             <code>&lt;input type=&#34;range&#34;&gt;</code> controls with
             <code>&lt;CFormRange&gt;</code>.
           </p>
-          <DocsExample href="forms/range">
+          <DocsExample href="forms/range.html">
             <CFormLabel for="customRange1">Example range</CFormLabel>
             <CFormRange id="customRange1" />
           </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Range</strong> <small>Disabled</small>
@@ -31,14 +31,14 @@
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <DocsExample href="forms/range#disabled">
+          <DocsExample href="forms/range.html#disabled">
             <CFormLabel for="disabledRange">Disabled range</CFormLabel>
             <CFormRange id="disabledRange" disabled />
           </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Range</strong> <small>Min and max</small>
@@ -50,14 +50,14 @@
             You may specify new values for those using the <code>min</code> and
             <code>max</code> attributes.
           </p>
-          <DocsExample href="forms/range#min-and-max">
+          <DocsExample href="forms/range.html#min-and-max">
             <CFormLabel for="customRange2">Example range</CFormLabel>
             <CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
           </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Range</strong> <small>Steps</small>
@@ -69,7 +69,7 @@
             below, we double the number of steps by using
             <code>step=&#34;0.5&#34;</code>.
           </p>
-          <DocsExample href="forms/range#steps">
+          <DocsExample href="forms/range.html#steps">
             <CFormLabel for="customRange3">Example range</CFormLabel>
             <CFormRange
               :min="0"

src/views/forms/Select.vue

@@ -1,15 +1,15 @@
 <template>
   <CRow>
-    <CCol xs="12">
+    <CCol :xs="12">
-      <DocsCallout name="Form Select" href="forms/select" />
+      <DocsCallout name="Form Select" href="forms/select.html" />
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Default</small>
         </CCardHeader>
         <CCardBody>
-          <DocsExample href="forms/select">
+          <DocsExample href="forms/select.html">
             <CFormSelect aria-label="Default select example">
               <option>Open this select menu</option>
               <option value="1">One</option>
@@ -20,7 +20,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Sizing</small>
@@ -30,7 +30,7 @@
             You may also choose from small and large custom selects to match our
             similarly sized text inputs.
           </p>
-          <DocsExample href="forms/select#sizing">
+          <DocsExample href="forms/select.html#sizing">
             <CFormSelect
               size="lg"
               class="mb-3"
@@ -55,7 +55,7 @@
           <p class="text-medium-emphasis small">
             The <code>multiple</code> attribute is also supported:
           </p>
-          <DocsExample href="forms/select#sizing">
+          <DocsExample href="forms/select.html#sizing">
             <CFormSelect
               size="lg"
               multiple
@@ -70,7 +70,7 @@
           <p class="text-medium-emphasis small">
             As is the <code>htmlSize</code> property:
           </p>
-          <DocsExample href="forms/select#sizing">
+          <DocsExample href="forms/select.html#sizing">
             <CFormSelect
               size="lg"
               multiple
@@ -85,7 +85,7 @@
         </CCardBody>
       </CCard>
     </CCol>
-    <CCol xs="12">
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Disabled</small>
@@ -95,7 +95,7 @@
             Add the <code>disabled</code> boolean attribute on a select to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <DocsExample href="forms/select#disabled">
+          <DocsExample href="forms/select.html#disabled">
             <CFormSelect aria-label="Disabled select example" disabled>
               <option>Open this select menu</option>
               <option value="1">One</option>

src/views/forms/Validation.vue

@@ -1,8 +1,5 @@
 <template>
   <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Validation" href="forms/validation" />
-    </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
@@ -24,7 +21,7 @@
             Custom feedback styles apply custom colors, borders, focus styles,
             and background icons to better communicate feedback.
           </p>
-          <DocsExample href="forms/validation">
+          <DocsExample href="forms/validation.html">
             <CForm
               class="row g-3 needs-validation"
               noValidate
@@ -88,7 +85,7 @@
                   Please provide a valid zip.
                 </CFormFeedback>
               </CCol>
-              <CCol xs="12">
+              <CCol :xs="12">
                 <CFormCheck
                   type="checkbox"
                   id="invalidCheck"
@@ -99,7 +96,7 @@
                   You must agree before submitting.
                 </CFormFeedback>
               </CCol>
-              <CCol xs="12">
+              <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
               </CCol>
             </CForm>
@@ -124,7 +121,7 @@
             While these feedback styles cannot be styled with CSS, you can still
             customize the feedback text through JavaScript.
           </p>
-          <DocsExample href="forms/validation#browser-defaults">
+          <DocsExample href="forms/validation.html#browser-defaults">
             <CForm
               class="row g-3 needs-validation"
               :validated="validatedDefault01"
@@ -189,7 +186,7 @@
                   Please provide a valid zip.
                 </CFormFeedback>
               </CCol>
-              <CCol xs="12">
+              <CCol :xs="12">
                 <CFormCheck
                   type="checkbox"
                   id="invalidCheck"
@@ -200,7 +197,7 @@
                   You must agree before submitting.
                 </CFormFeedback>
               </CCol>
-              <CCol xs="12">
+              <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
               </CCol>
             </CForm>
@@ -227,7 +224,7 @@
             more than one <code>id</code> to be referenced, in case the field
             already points to additional form text).
           </p>
-          <DocsExample href="forms/validation#server-side">
+          <DocsExample href="forms/validation.html#server-side">
             <CForm class="row g-3 needs-validation">
               <CCol :md="4">
                 <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@@ -339,7 +336,7 @@
             <li><code>&lt;CFormSelect&gt;</code>s</li>
             <li><code>&lt;CFormCheck&gt;</code>s</li>
           </ul>
-          <DocsExample href="forms/validation#supported-elements">
+          <DocsExample href="forms/validation.html#supported-elements">
             <CForm :validated="true">
               <div class="mb-3">
                 <CFormLabel for="validationTextarea" class="form-label"
@@ -428,7 +425,7 @@
             the example below, our column classes have this already, but your
             project may require an alternative setup.
           </p>
-          <DocsExample href="forms/validation#tooltips">
+          <DocsExample href="forms/validation.html#tooltips">
             <CForm
               class="row g-3 needs-validation"
               noValidate
@@ -494,7 +491,7 @@
                   Please provide a valid zip.
                 </CFormFeedback>
               </CCol>
-              <CCol xs="12" class="position-relative">
+              <CCol :xs="12" class="position-relative">
                 <CButton color="primary" type="submit">Submit form</CButton>
               </CCol>
             </CForm>

src/views/notifications/Alerts.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Alert" href="components/alert" />
+      <DocsCallout name="Alert" href="components/alert.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
@@ -15,13 +15,13 @@
             <strong>required</strong> contextual <code>color</code> props
             (e.g., <code>primary</code>). For inline dismissal, use the
             <a
-              href="https://coreui.io/react/docs/4.0/components/alert#dismissing"
+              href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
             >
               dismissing prop
             </a>
             .
           </p>
-          <DocsExample href="components/alert">
+          <DocsExample href="components/alert.html">
             <CAlert color="primary"
               >A simple primary alert—check it out!</CAlert
             >
@@ -52,7 +52,7 @@
             Use the <code>&lt;CAlertLink&gt;</code> component to immediately
             give matching colored links inside any alert.
           </p>
-          <DocsExample href="components/alert#link-color">
+          <DocsExample href="components/alert.html#link-color">
             <CAlert color="primary">
               A simple primary alert with
               <CAlertLink href="#">an example link</CAlertLink>. Give it a click
@@ -107,7 +107,7 @@
             Alert can also incorporate supplementary components &amp; elements
             like heading, paragraph, and divider.
           </p>
-          <DocsExample href="components/alert#additional-content">
+          <DocsExample href="components/alert.html#additional-content">
             <CAlert color="success">
               <CAlertHeading tag="h4">Well done!</CAlertHeading>
               <p>
@@ -135,7 +135,7 @@
             Alerts can also be easily dismissed. Just add the
             <code>dismissible</code> prop.
           </p>
-          <DocsExample href="components/alert#dismissing">
+          <DocsExample href="components/alert.html#dismissing">
             <CAlert color="warning" dismissible @dismiss="alert">
               <strong>Go right ahead</strong> and click that dimiss over there
               on the right.

src/views/notifications/Badges.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Badges" href="components/badge" />
+      <DocsCallout name="Badges" href="components/badge.html" />
     </CCol>
     <CCol :lg="6">
       <CCard class="mb-4">
@@ -13,7 +13,7 @@
             Bootstrap badge scale to suit the size of the parent element by
             using relative font sizing and <code>em</code> units.
           </p>
-          <DocsExample href="components/badge">
+          <DocsExample href="components/badge.html">
             <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
             <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
             <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
@@ -24,7 +24,7 @@
           <p class="text-medium-emphasis small">
             Badges can be used as part of links or buttons to provide a counter.
           </p>
-          <DocsExample href="components/badge">
+          <DocsExample href="components/badge.html">
             <CButton color="primary">
               Notifications <CBadge color="secondary">4</CBadge>
             </CButton>
@@ -37,7 +37,7 @@
             Unless the context is clear, consider including additional context
             with a visually hidden piece of additional text.
           </p>
-          <DocsExample href="components/badge">
+          <DocsExample href="components/badge.html">
             <CButton color="primary">
               Profile <CBadge color="secondary">9</CBadge>
               <span class="visually-hidden">unread messages</span>
@@ -56,7 +56,7 @@
             Add any of the below-mentioned <code>color</code> props to modify
             the presentation of a badge.
           </p>
-          <DocsExample href="components/badge#contextual-variations">
+          <DocsExample href="components/badge.html#contextual-variations">
             <CBadge color="primary">primary</CBadge>
             <CBadge color="success">success</CBadge>
             <CBadge color="danger">danger</CBadge>
@@ -76,7 +76,7 @@
             Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
             badges rounded.
           </p>
-          <DocsExample href="components/badge#pill-badges">
+          <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>

src/views/notifications/Modals.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
-      <DocsCallout name="Modal" href="components/spinner" />
+      <DocsCallout name="Modal" href="components/modal.html" />
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">

src/views/theme/ColorTheme.vue

@@ -1,5 +1,5 @@
 <template>
-  <CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
+  <CCol xl="2" md="4" sm="6" :xs="12" class="mb-4">
     <div
       :class="['theme-color w-75 rounded mb-3', color]"
       style="padding-top:75%;"
@@ -18,4 +18,4 @@ export default {
     color: String,
   }
 }
-</script>
+</script>