mandando llamar en Home

src/components/Header.vue

@@ -25,8 +25,6 @@
                 </div>
             
             </div>
-            <MainMenu></MainMenu>
-
             
         </header>
 
@@ -34,14 +32,18 @@
 </template>
 
 <script>
-import MainMenu from './MainMenu'
 
 export default {
-components: {
+    data() {
-        MainMenu,
+        return {
+            
+        }
+    },
+    methods: {
        
     }
 }
+
 </script>
 <style scoped>
 

src/components/MainMenu.vue

@@ -12,26 +12,24 @@
                         :backdrop-variant="variant"
                         backdrop
                         shadow
-                        bg-variant="white" text-variant="primary"
                         >
-                            <div class="px-3 mt-3 pt-2 d-flex align-items-center profi-main-text-sty">
+                            <div class="px-3 mt-3 py-2 d-flex align-items-center profi-main-text-sty">
                                 <font-awesome-icon icon="user" class="mr-2" />        
                                 <a href="#" class="text-decoration-none">
                                     <h5 class="my-auto">Iniciar sesión</h5>
                                 </a>
                             </div>
-                        <hr class="mx-3 mb-3">
                             
-                            <h6 class="px-3 pt-4">MAIN LOREM IPSUM</h6>
+                            <h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>
-                            <hr class="mx-3 mb-2">
+
                             <ul class="px-3">
                                 <li v-for="item in items" :key="item.mensaje">
                                     <a href="#"> {{ item.mensaje }} </a>
                                 </li>
                             </ul>
 
-                            <h6 class="px-3 mt-5">CONFIGURACIÓN</h6>
+                            <h6 class="px-3 my-4">CONFIGURACIÓN</h6>
-                            <hr class="mx-3 mb-2">
+
                             <ul class="px-3">
                                 <li v-for="item in configuracion" :key="item.mensaje">
                                     <a href="#"> {{ item.mensaje }} </a>
@@ -91,14 +89,11 @@ export default {
     color: rgba(255, 255, 255, 0.7)!important;
 }
 .profi-main-text-sty, .profi-main-text-sty a {
-    color: #212529!important;
+    color: black!important;
 }
 .profi-main-text-sty a:hover{
     color:gray!important;
     transition: 0.2s;
-}
-.b-sidebar-header-custom {
-    
 }
 ul li {
     list-style: none;
@@ -106,7 +101,7 @@ ul li {
 }
 ul li a {
     text-decoration: none;
-    color: #212529!important;
+    color: black!important;
 }
 ul li a:hover {
     color: rgba(0, 0, 0, 0.6)!important;

src/view/Home.vue

@@ -1,9 +1,9 @@
 <template>
 <div>
 <Header></Header>
-<div class="container my-5">
+
-  <h1 class="text-center">Home</h1>
+<Cart></Cart>
-</div>
+
 <Footer></Footer>
 </div>
 </template>
@@ -11,13 +11,14 @@
 <script>
 
 import Header from '../components/Header'
+import Cart from '../components/Cart'
 import Footer from '../components/Footer'
         
 export default {
 components: {
         Header,
-        Footer,
+        Cart,
-
+        Footer
     }
 }
 </script>