---

1. Crear una nueva aplicación Laravel

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

$ laravel new my-app
$ cd my-app

2. Instale el paquete laravel/ui composer

$ composer require laravel/ui

3. Instale el andamio Vue

El paquete laravel/ui tiene algunos comandos Artisan útiles que automáticamente distribuirán todo lo que necesita para comenzar.

$ php artisan ui vue

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

4. Compile 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, es posible que Mix necesite instalar dependencias adicionales que se incorporarán 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 se compilará y guardará en public/js/app.js.  Como estamos usando Laravel Mix para compilarlo, podemos usar el método auxiliar mix() para generar la ruta correcta para nosotros. Se recomienda usar el ayudante mix() para que se use el nombre de archivo adecuado si está usando el control de versiones.

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

6. Agregue el elemento raíz Vue a su HTML

Asegúrese de tener también un elemento raíz con una identificación de aplicación para 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 de Vue de un solo archivo

El paquete laravel / ui creará un nuevo directorio en resources/js/components. Aquí es donde puede agregar nuevos componentes de Vue. Notarás que el paquete laravel / ui agregó un archivo ExampleComponent.vue allí.

Una vez que cree su archivo de componente, deberá registrarlo con Vue. En Laravel, puedes hacerlo en tu archivo app.js principal (resources/js/app.js).

Notará que ExampleComponent ya está registrado.

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

Siéntase libre de crear subdirectorios 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ás que el paquete laravel / ui realizará una serie de cambios en tus archivos.

package.json

Todos los paquetes necesarios se agregaron como dependencias.

• vue
• compilador-plantilla-vue

En particular, los paquetes vue se agregaron como dependencias. Los necesitaremos para usar Vue y compilar 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 usan Bootstrap.

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

El CSS de Bootstrap está escrito en SASS. Estos paquetes SASS se incorporan para que podamos compilar correctamente nuestro SASS en CSS.

resources / js / app.js

Aquí inicializamos Vue e incluimos nuestros componentes para que estén disponibles en nuestroJS compilado.

recursos / js / bootstrap.js

Este archivo se modificó para cargar Bootstrap y jQuery.

webpack.mix.js

El método vue() agrega automáticamente algunas configuraciones necesarias de Babel que son necesarias para compilar componentes de un solo archivo.

Laravel Mix ahora también compila SASS en lugar de CSS.

---

Configuración manual de Vue sin usar laravel / ui

No necesita usar el paquete laravel/ui para agregar soporte para Vue. De hecho, puede optar por no hacerlo si no necesita las dependencias adicionales (como Bootstrap). Agregar soporte es bastante fácil.

1. Instalar dependencias npm

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

2. Crea un componente

Cree un nuevo directorio llamado components en el directorio resources/js/.

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

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

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

3. Inicialice

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

Agregue lo siguiente a su archivo 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. Agregue soporte Vue a Laravel Mix

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

Actualice lo 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. Actualice 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 una identificación de app.

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

Observe que este #app id 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 Vue.

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