2

Hace tiempo comence a trabajar con laravel y llego el momento de utilizar e implementar Vue el framework de TypeScript que utiliza, El problema es que no he podido hacer uso de los Componentes de Vue, he intentado de muchas formas y no logro hacer que el Componente se muestre en Pantalla.

A continuación el código que implemento en en mi proyecto(Menciono que no muestra ninguno error o bug, si no que solo no se muestra el componente a la hora de isntanciarlo.)

Versiones package.json

    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "argon-design-system-free": "^1.0.1"
    }

En mi registro de componentes app.json

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('spinner', require('./components/Spinner.vue'));
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */


const app = new Vue({
    el: '#app',
      components: {
        example,
  }
});

Componente(Cualquiera)

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Welcome.blade.php

<div id="app"><ExampleComponent></ExampleComponent></div>

CÓDIGO COMPLETO DE MI VISTA

@extends('layouts.app', ['class' => 'bg-default'])

@section('content')
<style media="screen">

        .carousel-control-next-icon {
          background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
          color: black;
        }
        .carousel-control-prev{
          color:back;
        }
        .carousel-control-next{
  
        }
        .pointer {cursor: pointer;}
  
        .carousel-fade {
      .carousel-inner {
          .item {
              transition-property: opacity;
          }
  
          .item,
          .active.left,
          .active.right {
              opacity: 0;
          }
  
          .active,
          .next.left,
          .prev.right {
              opacity: 1;
          }
  
          .next,
          .prev,
          .active.left,
          .active.right {
              left: 0;
              transform: translate3d(0, 0, 0);
          }
      }
  
      .carousel-control {
          z-index: 2;
      }
  }
  
  
  
  html,
  body,
  .carousel,
  .carousel-inner,
  .carousel-inner .item {
      height: 100%;
  }
  
  .item:nth-child(1) {
      background: #74C390;
  }
  
  .item:nth-child(2) {
      background: #51BCE8;
  }
  
  .item:nth-child(3) {
      background: #E46653;
  }
      </style>

<h2 class="display-3 text-primary mb-6">Bienvenido</h2>

<div id="app"><example></example></div>


<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="4500">
        <h3 class="heading text-info mb-0">Productos recomendados</h3>
        <hr>
        <div class="carousel-inner row w-100 mx-auto slide carousel-fade" role="listbox">
            <div class="carousel-item active">
                  <div class="row">
                    <div class="col">
                      <div class="card pointer mb-2" data-toggle="tooltip" title="Hooray!">
                        <br>
                        <img src="https://res.cloudinary.com/walmart-labs/image/upload/w_960,dpr_1,f_auto,q_auto:eco/mg/images/product-images/img_large/00085369936013-2l.jpg" class="d-block img-fluid" alt="...">
                        <div class="card-body mb-1">
                          <h5 class="card-title text-default mb-1">Card title 1</h5>
                          <p class="card-text text-success mb-1">$50.00 </p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card pointer mb-2" data-toggle="tooltip" title="Hooray!">
                        <br>
                        <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                        <div class="card-body text-default mb-1">
                          <h5 class="card-title mb-1">Card title 2</h5>
                          <p class="card-text text-success mb-1">$50.00 </p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                        <br>
                        <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                        <div class="card-body mb-1">
                          <h5 class="card-title text-default mb-1">Card title 3 </h5>
                          <p class="card-text text-success mb-1">$50.00 </p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                        <br>
                        <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                        <div class="card-body mb-1">
                          <h5 class="card-title text-default mb-1">Card title 4</h5>
                          <p class="card-text text-success mb-1">$50.00 </p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                        <br>
                        <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                        <div class="card-body mb-1">
                          <h5 class="card-title text-default mb-1">Card title 5</h5>
                          <p class="card-text text-success mb-1">$50.00 </p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                        <br>
                        <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                        <div class="card-body text-default mb-1">
                          <h5 class="card-title mb-1">Card title 6</h5>
                          <p class="card-text text-success mb-1">$50.00 </p>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="carousel-item">
                <div class="row">
                  <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                      <br>
                      <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                      <div class="card-body mb-1">
                        <h5 class="card-title text-default mb-1">Card title 7</h5>
                        <p class="card-text text-success mb-1">$50.00 </p>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                      <br>
                      <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                      <div class="card-body mb-1">
                        <h5 class="card-title text-default mb-1">Card title 8</h5>
                        <p class="card-text text-success mb-1">$50.00 </p>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                      <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                      <br>
                      <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                      <div class="card-body mb-1">
                        <h5 class="card-title text-default mb-1">Card title 9</h5>
                        <p class="card-text text-success mb-1">$50.00 </p>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                      <br>
                      <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                      <div class="card-body mb-1">
                        <h5 class="card-title text-default mb-1">Card title 10</h5>
                        <p class="card-text text-success mb-1">$50.00 </p>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                      <br>
                      <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                      <div class="card-body mb-1">
                        <h5 class="card-title text-default mb-1">Card title 11</h5>
                        <p class="card-text text-success mb-1">$50.00 </p>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="card pointer" data-toggle="tooltip" title="Hooray!">
                      <br>
                      <img src="https://d2pa5gi5n2e1an.cloudfront.net/global/images/product/mobilephones/Xiaomi_Redmi_6A/Xiaomi_Redmi_6A_L_1.jpg" class="img-fluid mx-auto d-block" alt="...">
                      <div class="card-body mb-1">
                        <h5 class="card-title text-default mb-1">Card title 12</h5>
                        <p class="card-text text-success mb-1">$50.00 </p>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
    </div>


    <script type="text/javascript">
        $(function(){
             $('.carousel').carousel();
       });
      </script>



<script src="{{ asset('') }}/js/app.js"></script>
@endsection

El tema es que con ningun componente puedo ver los cambios incluso aun que ejecute: npm run development -- --watch no se muestra el componente a implementar

Ojala alguien pueda decirme que es lo que sucede

Saludos a todos!

6
  • y en la vista donde tratas de mostrar los componentes, incluiste el llamado al archivo app.js?
    – BetaM
    el 20 jun. 2019 a las 4:12
  • aparte a tu registro del segundo componente le falta el acceso al método default checa aquí: laravel-mix.com/docs/4.0/upgrade
    – BetaM
    el 20 jun. 2019 a las 4:21
  • como puedo importar el archivo app.js?? el 22 jun. 2019 a las 19:29
  • agrega el código completo de tu vista para así poder revisar si agregaste el llamado a app.js o no
    – BetaM
    el 23 jun. 2019 a las 13:17
  • Listo ojala puedas revisarlo saludos! el 25 jun. 2019 a las 3:11

3 respuestas 3

0

En welcome.blade estás llamando al componente como ExampleComponent. El nombre con el que se registra en app.js es example-component. Además, debes añadir:

<link href="{{asset('css/app.css')}}" rel="stylesheet">

Y:

<script src="{{asset('js/app.js')}}"></script>

Si tu aplicación extiende de app.blade.php, entonces deberás colocarlo allí.

0

Me acaba de pasar, casí que no doy con el chiste, cada vez que realicemos una modificación en Vue se debe ejecutar el comando

npm run dev

En consola, es como para refrescar y se tomen los cambios.

0

es por que tienes que usar una etiqueta de HTML y colocar el id="app" de esta manera te mostrara el componente de Vue que estas llamando.

Ejemplo

<div id="app"> <example-component></example-component> </div>
1
  • 1
    ejmplo <div id="app"> <example-component></example-component> </div> el 14 dic. 2020 a las 6:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.