Ejemplo de componente de Laravel Vue

 

VueJs es la opción popular para el front-end cuando se trabaja con Laravel. De hecho, Laravel se envía con el modelo estándar de un componente de Vue de ejemplo que puede probar o desarrollar para su propio uso. En este tutorial, aprenderemos cómo configurar nuestro proceso de compilación de front-end. Laravel Mix ayudará en este esfuerzo, ya que es un envoltorio agradable y conveniente para el sistema de paquete web muy robusto, que a veces puede ser un desafío para configurar y usar correctamente. Profundicemos en cómo crear nuestro propio componente Vue para usar en nuestra aplicación que nos permitirá mostrar mensajes flash.

---

Cómo configurar Laravel Mix con Homestead en Windows

Ahora vamos a empezar a hacer uso de las herramientas de compilación de front-end de Vue disponibles en Laravel. Empezamos corriendo yarn --no-bin-linksen el directorio raíz de nuestro proyecto.

vagrant @ homestead: ~ / Code / forumio $ yarn --no-bin-links
instalación de hilo v0.20.3
info No se encontró ningún archivo de bloqueo.
[1/4] Resolviendo paquetes ...
advertencia laravel-mix> img-loader> imagemin-gifsicle> gifsicle> bin-build> download> gulp-decompress> gulp-util@3.0.8: gulp-util está en desuso - reemplácelo, siguiendo las pautas en https: // medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
[2/4] Obteniendo paquetes ...
advertencia fsevents@1.1.3: La plataforma "linux" es incompatible con este módulo.
info "fsevents@1.1.3" es una dependencia opcional y una verificación de compatibilidad fallida. Excluyéndolo de la instalación.
[3/4] Vinculando dependencias ...
[4/4] Construyendo paquetes nuevos ...
éxito Archivo de bloqueo guardado.
advertencia Su versión actual de Yarn no está actualizada. La última versión es "1.3.2" mientras estás en "0.20.3".
info Para actualizar, ejecute el siguiente comando:
$ npm upgrade --global yarn
Hecho en 164,97 s. 

Parece que el hilo está bastante desactualizado aquí, así que realizamos una actualización usando estos comandos.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Ahora hacemos una instalación una vez más para asegurarnos de que todo esté bien.

vagrant @ homestead: ~ / Code / forumio $ yarn install --no-bin-links
instalación de hilo v1.3.2
[1/4] Resolviendo paquetes ...
[2/4] Obteniendo paquetes ...
info fsevents@1.1.3: La plataforma "linux" es incompatible con este módulo.
info "fsevents@1.1.3" es una dependencia opcional y una verificación de compatibilidad fallida. Excluyéndolo de la instalación.
[3/4] Vinculando dependencias ...
[4/4] Construyendo paquetes nuevos ...
Hecho en 45.24s.

Ok, la instalación se ve bien, ahora intentamos ejecutarla yarn run devy tenemos algunos problemas. También podríamos usar npm run devsi el administrador de paquetes de nodos ya está instalado en su máquina.

vagrant @ homestead: ~ / Code / forumio $ yarn run dev
corrida de hilo v1.3.2
Desarrollo de ejecución $ npm

> @ desarrollo / inicio / vagabundo / Code / forumio
> cross-env NODE_ENV = desarrollo node_modules / webpack / bin / webpack.js --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js

sh: 1: cross-env: no encontrado

npm ERR! Linux 4.4.0-51-genérico
npm ERR! argv "/ usr / bin / nodejs" "/ usr / bin / npm" "ejecutar" "desarrollo"
npm ERR! nodo v6.10.0
npm ERR! npm v3.10.10
npm ERR! archivo sh
npm ERR! código ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! generación de syscall
npm ERR! @ desarrollo:cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! desovar ENOENT
npm ERR!
npm ERR! Falló en el script de @ desarrollo 'cross-env NODE_ENV = desarrollo node_modules / webpack / bin / webpack.js --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js'.
npm ERR! Asegúrese de tener instalada la última versión de node.js y npm.
npm ERR! Si lo hace, lo más probable es que se trate de un problema con el paquete,
npm ERR! no con npm en sí.
npm ERR! Dígale al autor que esto falla en su sistema:
npm ERR! cross-env NODE_ENV = desarrollo node_modules / webpack / bin / webpack.js --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js
npm ERR! Puede obtener información sobre cómo abrir un problema para este proyecto con:
npm ERR! errores de npm
npm ERR! O si no está disponible, puede obtener su información a través de:
npm ERR! npm propietario ls
npm ERR! Es probable que haya una salida de registro adicional arriba.

npm ERR! Incluya el siguiente archivo con cualquier solicitud de soporte:
npm ERR! /home/vagrant/Code/forumio/npm-debug.log
error El comando falló con el código de salida 1.
info Visite https://yarnpkg.com/en/docs/cli/run para obtener documentación sobre este comando.

Ok, resulta que podemos solucionar esto actualizando el package.json así:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

{   "private": true,   "scripts": {     "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",     "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"   },   "config": {     "webpack": "node_modules/laravel-mix/setup/webpack.config.js"   },   "devDependencies": {     "axios": "^0.17",     "bootstrap-sass": "^3.3.7",     "cross-env": "^5.1",     "jquery": "^3.2",     "laravel-mix": "^1.0",     "lodash": "^4.17.4",     "vue": "^2.5.7"   } }

Ahora corremos yarn run devuna vez más y parece que estamos cocinando.

corrida de hilo v1.3.2
$ nodo node_modules / cross-env / dist / bin / cross-env.js NODE_ENV = desarrollo node_modules / webpack / bin / webpack.js --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack .config.js
 95% emisor

 HECHO Compilado con éxito en 9455ms 3:43:03 PM
                                                                                                                                                                                                                              Tamaño de los activos Chunks Nombres de los fragmentos
  fonts / vendor / bootstrap-sass / bootstrap / glyphicons-halflings-regular.eot? f4769f9bdb7466be65088239c12046d1 20,1 kB [emitido]  
fonts / vendor / bootstrap-sass / bootstrap / glyphicons-halflings-regular.woff2? 448c34a56d699c29117adc64c43affeb 18 kB [emitido]  
 fonts / vendor / bootstrap-sass / bootstrap / glyphicons-halflings-regular.woff? fa2772327f55d8198301fdb8bcfc8158 23,4 kB [emitido]  
  fonts / vendor / bootstrap-sass / bootstrap / glyphicons-halflings-regular.ttf? e18bbf611f2a2e43afc071aa2f4e1512 45,4 kB [emitido]  
  fonts / vendor / bootstrap-sass / bootstrap / glyphicons-halflings-regular.svg? 89889688147bd7575d6327160d64e760 109 kB [emitido]  
                                                                                               /js/app.js 1,23 MB 0 [emitido] [grande] / js / app
                                                                                             /css/app.css 147 kB 0 [emitido] / js / app
Hecho en 15.59s.

---

Componentes de Vue en Laravel

Laravel tiene un componente de ejemplo configurado para usted en la instalación base. Hay dos archivos para ver para comprender cómo funcionan. Esos son ExampleComponent.vue ubicado en resources / assets / js / components y app.js ubicado en resources / assets / js. Tenga en cuenta que los archivos .vue son un tipo especial de componente de archivo único que necesita una herramienta de compilación como Vue cli para compilarlos en un estado listo para producción.

Esto es lo que contiene cada archivo para comenzar.

ExampleComponent.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<template>     <div class="container">         <div class="row">             <div class="col-md-8 col-md-offset-2">                 <div class="panel panel-default">                     <div class="panel-heading">Example Component</div>                       <div class="panel-body">                         I'm an example component!                     </div>                 </div>             </div>         </div>     </div> </template>   <script>     export default {         mounted() {             console.log('Component mounted.')         }     } </script>

app.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/** * 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');   /** * 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. */   Vue.component('example-component', require('./components/ExampleComponent.vue'));   const app = new Vue({     el: '#app' });

Con estos dos archivos en su lugar y después de ejecutar yarn run devcomo ya lo hicimos, podríamos representar este componente en el navegador agregando su marcado en el archivo de diseño app.blade.php así:

1 2 3 4 5 6

<div id="app">     @include('layouts.nav')       @yield('content')     <example-component></example-component> </div>

---

Creando su propio componente Vue

Ahora entendemos cómo funciona la mecánica de armar un componente Vue en Laravel. Nuestro objetivo aquí es crear un componente de mensaje flash que podamos usar en nuestra aplicación. Nuestro marcado en el archivo blade se vería un poco así:

1 2 3 4 5 6

<div id="app">     @include('layouts.nav')       @yield('content')     <flash message="Hi There!"></flash> </div>

Cambiemos el nombre de ExampleComponent.vue a Flash.vue y dejemos que PHPStorm haga la refactorización por nosotros.

También necesitaremos cambiar el nombre del componente manualmente a flash.

Además, actualizaremos el HTML y JavaScript en el propio Componente Vue para reflejar una alerta.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>     <div class="alert alert-success" role="alert">         <strong>Success!</strong> {{ body }}     </div> </template>   <script>     export default {         data() {             return {                 body: 'Temporary Message'             }         }     } </script>

---

Construyendo sus archivos fuente

Debido a que ahora estamos trabajando en el ámbito de una herramienta de compilación en la interfaz, cuando se realizan actualizaciones a los archivos "fuente", por así decirlo, no se actualizarán en el navegador. Necesita volver a construir manualmente los archivos usando npm run devo yarn run dev. Una vez que completamos la actualización, podemos volver a ver nuestro nuevo componente flash en el navegador.

---

Activar la visualización de archivos en Mix / Webpack

Como yo, es posible que sienta que es un poco molesto tener que visitar la terminal después de cualquier cambio que realice en sus archivos y luego ejecutar el comando para reconstruir todo. Para ello, puede activar la visualización de archivos mediante npm run watcho npm run watch-poll. Ahora, cuando realice ediciones de archivos, puede ver cómo la compilación de los archivos ocurre automáticamente en la terminal como vemos aquí.

---

Aceptar propiedades mediante accesorios

Para que nuestro mensaje flash sea dinámico y no utilice el mismo mensaje enlatado cada vez, necesitamos poder pasarle algunos datos variables. Esto se logra mediante accesorios en VueJs. Aquí actualizaremos nuestro componente Vue para usar un prop. Básicamente, lo que está sucediendo ahora es que la instancia de Vue buscará en el marcado HTML en el archivo de vista del componente personalizado. Entonces, para nosotros, esta es la etiqueta <flash>. Va a buscar en esa etiqueta una propiedad llamada message. Cualquiera que sea el valor de esa propiedad de mensaje, es el valor que se usa en la propiedad. ¿Tiene sentido?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<template>     <div class="alert alert-success" role="alert">         <strong>Success!</strong> {{ body }}     </div> </template>   <script>     export default {         props: ['message'],           data() {             return {                 body: this.message             }         }     } </script>

---

Agregar estilo en el componente Vue

El componente Vue en sí tiene tres secciones. Estas serían las secciones <template>, <script> y <style>. ¿Qué tal si agregamos un estilo básico a nuestro componente para que nos dé un pequeño mensaje agradable en lugar de ocupar tanto espacio? Aquí está nuestro archivo Flash.vue actualizado.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<template>     <div class="alert alert-success" role="alert">         <strong>Success!</strong> {{ body }}     </div> </template>   <script>     export default {         props: ['message'],           data() {             return {                 body: this.message             }         }     } </script>   <style>     .alert-flash {         position: fixed;         right: 25px;         bottom: 25px;     } </style>

Ahora, usando el marcado simple de

1	<flash class="alert-flash" message="Hi There!"></flash>

en el archivo blade, obtendremos un buen resultado como el que vemos aquí.

¡También puede buscar en Herramientas de desarrollo para ver su componente en acción!

---

Inspección de datos de sesión de PHP para completar el componente Vue

Siempre que se crean datos de sesión flash en nuestra aplicación, está sucediendo en Laravel o PHP. Necesitamos aprovechar esos mensajes de alguna manera, para que puedan usarse en JavaScript o Vue. Haremos esto rellenando la propiedad del mensaje así:

1 2 3 4 5 6

<div id="app">     @include('layouts.nav')       @yield('content')     <flash class="alert-flash" message="{{ session('flash') }}"></flash> </div>

Ahora, cuando los datos flash se completen en Laravel, el messagevalor de la propiedad en el componente <flash> se completará y Vue nos mostrará un mensaje flash agradable con un mensaje personalizado.

---

Controlar la visibilidad con v-show

No siempre habrá una sesión flash poblada para leer un mensaje. En esos casos, realmente no queremos mostrar el marcado flash en el navegador. Esto se puede lograr usando la directiva v-show en Vue. Aquí agregamos una directiva v-show y la propiedad que la acompaña en el código del script de Vue. Si la propiedad show es falsa, la plantilla no se representa en el navegador. Sin embargo, si la propiedad show es verdadera, se muestra en el navegador.

---

Usando el método created () en Vue

Ahora necesitamos una forma de actualizar dinámicamente el valor de la propiedad show. Podemos lograr esto con el método created ().

Veamos cómo podemos implementar esto en nuestro código.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script>     export default {         props: ['message'],           data() {             return {                 body: '',                 show: false,             }         },           created() {             if (this.message) {                 this.body = this.message;                 this.show = true;             }         }     } </script>

---

Poblando la sesión flash

Ahora, todo lo que queda por hacer es rellenar la variable de sesión flash cuando sucede algo en nuestra aplicación que queremos notificar al usuario. ¿Qué pasa cuando se crea un nuevo hilo? Para esto, podemos hacer una simple llamada al método with () en el método store () del ThreadsController.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public function store(Request $request) {     $this->validate($request, [         'title' => 'required',         'body' => 'required',         'channel_id' => 'required|exists:channels,id'     ]);       $thread = Thread::create([         'user_id' => auth()->id(),         'channel_id' => request('channel_id'),         'title' => request('title'),         'body' => request('body')     ]);       return redirect($thread->path())         ->with('flash', 'Your thread was published!'); }

Agrega un nuevo hilo.

El usuario es redirigido al hilo y ve el mensaje flash.

---

Cómo hacer que un mensaje flash desaparezca después de X cantidad de tiempo

Con la implementación hasta ahora, ese mensaje flash permanecerá en la pantalla hasta que el usuario actualice la página o visite una página diferente. Por supuesto, al usar JavaScript, podemos hacer que el mensaje flash desaparezca automáticamente después de un cierto período de tiempo. Podemos hacer esto directamente en el script Vue de la plantilla. Haremos esto agregando dos métodos al objeto de métodos del componente Vue. El método flash () hará que aparezca el mensaje y el método hide () hará que desaparezca después de 4 segundos. La sintaxis usa ES6, por lo que es posible que desee consultar nuestro tutorial de funciones de flecha es6 , así como nuestro tutorial de clase es6. Una vez que comprenda esos conceptos, el marcado completo del componente Vue aquí debería tener sentido.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<template>     <div class="alert alert-success" role="alert" v-show="show">         <strong>Success!</strong> {{ body }}     </div> </template>   <script>     export default {         props: ['message'],           data() {             return {                 body: '',                 show: false,             }         },           created() {             if (this.message) {                 this.flash(this.message);             }               window.events.$on('flash', message => {                 this.flash(message);             })         },           methods: {             flash(message) {                 this.body = message;                 this.show = true;                 this.hide();             },               hide() {                 setTimeout(() => {                     this.show = false;                 }, 4000);             }         }     } </script>   <style>     .alert-flash {         position: fixed;         right: 25px;         bottom: 25px;     } </style>

También deberá agregar este código JavaScript al archivo bootstrap.js de su proyecto para que este componente funcione.

1 2 3 4 5 6

window.Vue = require('vue'); window.events = new Vue();   window.flash = function (message) {     window.events.$emit('flash', message) };

Con todo el trabajo preliminar que hemos hecho ahora, agregar un mensaje flash a prácticamente cualquier cosa que desee en su aplicación Laravel debería ser muy fácil. En este momento agregamos un mensaje flash cuando se crea un nuevo hilo, pero podría agregarse fácilmente cuando se agrega una nueva respuesta a un hilo, cuando un hilo se marca como favorito, cuando un usuario inicia o cierra sesión, o cualquier otra cosa que usted desee. me gusta.

---

Resumen de ejemplo del componente Laravel Vue

Este fue un tutorial divertido que se centró en la configuración de los procesos de compilación de front-end que se centran en configurar sus propios componentes de Vue que se pueden usar en sus archivos blade. Configurar las herramientas de compilación puede ser un poco desafiante, y si se encuentra con errores como los que vio en este tutorial, hay muchas correcciones que puede encontrar en línea que en su mayoría solucionan esos problemas obstinados de plataforma cruzada al ejecutar una máquina virtual. Sin embargo, lo logramos y todo está funcionando de maravilla, ¡excelente trabajo!