Inicio Blog Cursos Foro

Instalar Vue.js en Laravel 6


author_post
José Luis Guisado

Nuestro artículo Instalar vuejs en Laravel 5 ha dejado de funcionar para  laravel 6 asi qué, si estás utilizando Laravel 5, visita el artículo anterior, pero si estás en la versión 6 ¡Este artículo te interesa!

¿Cómo Instalar Vuejs en 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/ui

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

php artisan ui vue

Una vez 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>

De esta forma, se mostrará nuestro componente de prueba! Es importantisimo añadir el archivo app.css y app.js o no se mostrará!

¡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!