Como hemos hablado en nuestro artículo primeros pasos en Vue.js, al que invito que echéis un vistazo si os interesa este framework, Vuejs es un framework fronted progesivo y que ya viene incluido en las últimas versiones Laravel. Su curva de aprendizaje es realmente rápida, hace nuestras vistas mucho más dinámica y el uso de ajax es muy fácil. Sin duda la mejor elección fronted para trabajar con laravel.
Dependiendo de la versión de Laravel, Vuejs se instalará de forma diferente, en este artículo explicamos ¡Cómo es en CADA versión! Elige tu versión de Laravel:
Muy simple, Al venir ya incluido en laravel lo único que tenemos que hacer es instalar las dependencias de nuestro proyecto con ayuda de nodejs, con el comando:
npm installPodemos observar en nuestro archivo webpack.mix.js, que se hace referencia a resources/js/app.js, que es donde está la configuración básica de vue:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
Como vemos, ya nos viene creado por defecto un componente llamado «ExampleComponent.vue», (Que está en la carpeta resources/js/components), y se le asigna ‘example-component’, que será la etiqueta que llamaremos en el blade para mostrar este componente.
Debajo del componente hay una instancia de Vue, donde el parametro el:»#app» nos indica que las etiquetas de nuestros componentes se deben añadir dentro de una etiqueta html con el id «app», tal que así:
<div id="app">
<example-component></example-component>
</div>Si nos dirijimos a ExampleComponent.vue, este será el contenido de nuestro componente:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<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>En este artículo estamos hablando de como importar vuejs en laravel, por lo que no vamos profundizar sobre la estructura del archivo .vue, pero si te interesa puedes encontrar información detallada en nuestro otro artículo: Primeros pasos en Vue.js
Visto esto, vamos a ejecutar el comando:
npm run devÉste generarará los archivos js y css del webpack.mix.js, a los que haremos referencia en nuestro blade.
Nos vamos a dirigir al blade donde queramos mostrar el componente de Vuejs, y escribimos lo siguiente:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet"> <!--Añadimos el css generado con webpack-->
</head>
<body>
<div id="app" class="content"><!--La equita id debe ser app, como hemos visto en app.js-->
<example-component></example-component><!--Añadimos nuestro componente vuejs-->
</div>
<script src="{{asset('js/app.js')}}"></script> <!--Añadimos el js generado con webpack, donde se encuentra nuestro componente vuejs-->
</body>
</html>Ahora ya tenemos nuestro componente vuejs en nuestra plantilla blade, solo quedaría levantar nuestro servidor:
php artisan serveY nos aparecerá en nuestra vista nuestro componente vuejs:
Ahora que tenemos instalado vuejs en Laravel dirígete a nuestro artículo 👉 https://www.nigmacode.com/laravel/Crud-vuejs-laravel 👈 y aprende rápidamente a crear un crud con vuejs y laravel
Vamos a dar por hecho que ya sabes que es Vuejs, de no ser así, visita nuestro artículo Primeros pasos en VueJS y nuestra categoría Blog de Vuejs.
Para comenzar, nos dirigimos a la consola, vamos a la ruta raíz de nuestro proyecto e instalaremos el paquete de laravel ui mediante este comando:
composer require laravel/uiUna vez instalado, procederemos a instalar vuejs con el siguiente comando:
php artisan ui vueHecho esto, tendremos ya en la ruta resources/js/app.js el siguiente código:
/**
* 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);
/**
* 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',
});
Y en esta misma ruta, también tendremos una nueva carpeta, components, dónde tendremos el componente de ejemplo al que se hacer referencia en app.js
Ahora debemos instalar npm mediante:
npm installY por último, lo arrancamos mediante:
npm run devPor último, probamos que todo haya ido bien, añadiendo el componente de prueba a cualquier plantilla blade:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet"> <!--Añadimos el css generado con webpack-->
</head>
<body>
<div id="app" class="content"><!--La equita id debe ser app, como hemos visto en app.js-->
<example-component></example-component><!--Añadimos nuestro componente vuejs-->
</div>
<script src="{{asset('js/app.js')}}"></script> <!--Añadimos el js generado con webpack, donde se encuentra nuestro componente vuejs-->
</body>
</html>Es importantisimo añadir el archivo app.css y app.js o no se mostrará!
Una vez instalado vuejs en Laravel dirígete a nuestro artículo 👉 https://www.nigmacode.com/laravel/Crud-vuejs-laravel 👈 y aprende rápidamente a crear un crud con vuejs y laravel.
También puede interesarte nuestro artículo 👉 Login y Auteticación con laravel 6/7/8