¿Qué es Vue.js?

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. 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:

¿Cómo Instalar Vuejs en Laravel 5?

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 install

¿Dónde se encuentra Vue.js en nuestro proyecto Laravel?

Podemos 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 parámetro 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 dirigimos 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

Este generará los archivos js y css del webpack.mix.js, a los que haremos referencia en nuestro blade.

Mostrar componente Vuejs en Laravel

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 serve

Y 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

Cómo Instalar Vuejs en Laravel 6, 7 y 8

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/ui

Una vez instalado, procederemos a instalar vuejs con el siguiente comando:

php artisan ui vue

Hecho 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 install

Y por último, lo arrancamos mediante:

npm run dev

Añadiendo componente VueJS a nuestra plantilla blade

Por ú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 importantísimo 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 Autenticación con Laravel 6/7/8