refactor: update shared components

src/components/AppFooter.vue

@@ -2,9 +2,11 @@
   <CFooter>
     <div>
       <a href="https://coreui.io" target="_blank">CoreUI</a>
-      <span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
+      <span class="ms-1"
+        >&copy; {{ new Date().getFullYear() }} creativeLabs.</span
+      >
     </div>
-    <div class="mfs-auto">
+    <div class="ms-auto">
       <span class="me-1" target="_blank">Powered by</span>
       <a href="https://coreui.io/vue">CoreUI for Vue</a>
     </div>
@@ -13,6 +15,6 @@
 
 <script>
 export default {
-  name: "AppFooter",
+  name: 'AppFooter',
-};
+}
 </script>

src/components/DocsCallout.vue

@@ -1,7 +1,8 @@
 <template>
   <CCallout color="info" class="bg-white">
-    A Vue {{name}} component {{plural ? 'have' : 'has'}} been created as a native
+    A Vue {{ name }} component {{ plural ? 'have' : 'has' }} been created as a
-    Vue.js version of Bootstrap {{name}}. {{name}} {{plural ? 'are' : 'is'}}
+    native Vue.js version of Bootstrap {{ name }}. {{ name }}
+    {{ plural ? 'are' : 'is' }}
     delivered with some new features, variants, and unique design that matches
     CoreUI Design System requirements.
     <br />
@@ -29,7 +30,7 @@ export default {
       default: undefined,
       required: false,
     },
-    plural: Boolean
+    plural: Boolean,
   },
   setup(props) {
     const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`

src/components/DocsExample.vue

@@ -22,9 +22,9 @@
 </template>
 
 <script>
-import packageJson from "../../package.json";
+import pkg from '../../package.json'
 export default {
-  name: "DocsExample",
+  name: 'DocsExample',
   props: {
     href: {
       type: String,
@@ -33,11 +33,11 @@ export default {
     },
   },
   setup(props) {
-    const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`;
+    const href = `https://coreui.io/vue/docs/${pkg.config.coreui_library_short_version}/${props.href}`
 
     return {
       href,
-    };
+    }
   },
-};
+}
 </script>