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!
default
checa aquí: laravel-mix.com/docs/4.0/upgradeapp.js
o no