En las versiones anteriores de Laravel, VUE se configuró automáticamente con cada nueva instalación. Sin embargo, en versiones más nuevas, tienes que configurarlo tú mismo.

Afortunadamente, el paquete laravel/ui proporciona una forma fácil de configurar VUE en su solicitud de Laravel.

Siga estos pasos para obtener la configuración de VUE en su aplicación Laravel.

1. Crea una nueva aplicación de Laravel.

Si aún no lo ha hecho, cree una nueva aplicación con el instalador de Laravel y navegue en ese directorio.

$ laravel new my-app
$ cd my-app

2. Instale el paquete de Compositor de laravel/ui

$ composer require laravel/ui

3. Configure el andamio VUE

El paquete de laravel/ui tiene algunos comandos de artesanía útiles que eliminarán automáticamente todo lo que necesita para comenzar.

$ php artisan ui vue

Notará que hace algunos cambios en su aplicación. Habrá más detalles sobre esos cambios a continuación.

4. Compilar los archivos.

Finalmente, deberá instalar las dependencias recién agregadas y compilarlas.

$ npm install && npm run dev

Nota: Si está ejecutando esto por primera vez, la mezcla puede necesitar instalar dependencias adicionales que se detendrá automáticamente. Si ve un mensaje de error, simplemente ejecute npm run dev nuevamente.

5. Incluya /js/app.js en su vista

Su archivo App.js será compilado y guardado en public/js/app.js. Como estamos usando Laravel Mex para compilarlo, podemos usar el método de ayuda de mix() para generar la ruta correcta para nosotros. Se recomienda usar el ayudante de mix() para que se use el nombre del archivo adecuado si está utilizando la versión de control.

<script src="{{ mix('/js/app.js') }}"></script>

6. Agregue el elemento raíz de VUE a su HTML

Asegúrese de tener también un elemento raíz con un ID de app a su andamio HTML. De lo contrario, VUE no sabrá dónde montar los componentes.

<div id="app">
   <example-component></example-component>
</div>

Registro de componentes VUE de un solo archivo

El paquete Laravel / UI creará un nuevo directorio en resources/js/components. Aquí es donde puedes agregar nuevos componentes. Notará que el paquete Laravel / UI agregó un archivo EXAMPLEComponent.VUE allí ya.

Una vez que cree su archivo VUE Componente, deberá registrarlo. En Laravel, puede hacerlo en su archivo principal app.js (resources/js/app.js).

Notará que el ExampleComponent ya está registrado.

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Siéntase libre de crear subirentes en su directorio resources/js/components/ para organizar sus archivos. Solo asegúrese de que la ruta en su método require() coincida con la estructura de su directorio.

Vue.component('admin-login-component', require('./components/Admin/AdminLoginComponent.vue').default);

Cambios de archivo

Notará que el paquete Laravel / UI hará una serie de cambios en sus archivos.

Package.json

Todos los paquetes necesarios se agregaron como dependencias.

• vue
• vue-template-compiler

Más notablemente, los paquetes de VUE se agregaron como dependencias. Los necesitaremos para usar VUE y compilar los componentes de un solo archivo.

• bootstrap
• jQuery
• popper.js

Bootstrap y sus dependencias (jQuery, popper.js) se agregaron como dependencias en su proyecto. Estas dependencias adicionales se instalaron porque las vistas de andamio de autenticación opcionales de laravel/ui utilizan Bootstrap.

• sass
• sass-loader
• resolve-url-loader

CSS de Bootstrap está escrito en SASS. Estos paquetes de SASS se detienen para que podamos compilar correctamente nuestros SASS en CSS.

recursos/js/app.js

Aquí inicializamos VUE e incluye nuestros componentes para que estén disponibles en nuestro COMPILADO JS.

Recursos/js/bootstrap.js

Este archivo fue modificado para cargar Bootstrap y jQuery.

webpack.mix.js

El método vue() agrega automáticamente alguna configuración necesaria de Babel que se necesita para compilar los componentes de un solo archivo.

Laraver Mix ahora también recopila SASS en lugar de CSS.

Configuración manual de VUE sin usar Larave / UI

No necesita usar el paquete laravel/ui para agregar soporte para VUE. De hecho, en realidad puede elegir no si no necesita las dependencias adicionales (como Bootstrap). Agregar soporte VUE es bastante fácil.

1. Instale las dependencias de NPM

$ npm install --save-dev vue vue-template-compiler

2. Crear un componente

Cree un nuevo directorio con nombre de components en el directorio resources/js/.

Cree un nuevo archivo ExampleComponent.vue y llénelo con el siguiente código.

<template>
    <div>Hello, Example Component!</div>
</template>

<script>
export default {
    mounted() {
        console.log('Example component mounted.')
    }
}
</script>

3. Inicializar VUE

Necesitamos exigir el paquete VUE en nuestra aplicación, registrar nuestros componentes y luego inicializar nuestra aplicación VUE.

Agregue lo siguiente a su archivo de resources/js/app.js.

// Require Vue
window.Vue = require('vue').default;

// Register Vue Components
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// Initialize Vue
const app = new Vue({
    el: '#app',
});

4. Añadir Soporte de VUE a Larave Mix

Agregue el método vue() a su cadena de mezcla de Laravel.

Actualice la siguiente en su archivo webpack.mix.js.

mix.js('resources/js/app.js', 'public/js')
    .vue() // <- Add this
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

5. Compile sus activos

$ npm run dev

Nota: si se trata de un proyecto nuevo, asegúrese de ejecutar npm install antes de ejecutar este comando.

6. Actualiza tu HTML

Asegúrese de incluir su archivo javascript compilado en sus vistas HTML.

<script src="{{ mix('/js/app.js') }}"></script>

Además, asegúrese de tener un elemento raíz con un ID de app.

<div id="app">
    <example-component></example-component>
</div>

Observe que este #appid corresponde al ID que le pasamos a Vue cuando lo inicializamos en el paso #2. Por supuesto, puede nombrar esa identificación como desee. Solo asegúrese de que coincida con la configuración el al inicializar su aplicación.

Ahora con suerte. Debería poder cargar su aplicación en el navegador y ver el componente Vue renderizado.