Inicio Blog Cursos Foro

Instalar Vue.js en Laravel


author_post
José Luis Guisado

Éste artículo solo sirve para la versión 5, si estás buscando instalar vuejs en Laravel 6, visita nuestro nuevo artículo: Instalar Vue.js en Laravel 6

¿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 y el uso de ajax es muy fácil. Sin duda la mejor elección fronted para trabajar con laravel.

¿Como Instalar Vuejs en 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 install

 

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

Una vez hecho esto, 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 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.

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:

No os perdaís nuestro próximo artículo sobre Ajax con Laravel y Vuejs, ¡Donde crearemos un CRUD que no refresque nuestro blade!

¡No te pierdas nuevas entradas! Sí­guenos en nuestras redes sociales

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!