Llevando Vue.js al Backend

Rate this content
Bookmark

Vue.js es un framework frontend. Pero los diferentes módulos, como el motor de reactividad, se pueden importar por separado. Divirtámonos y exploremos posibles casos de uso para la reactividad de Vue en el backend.

23 min
21 Oct, 2021

Video Summary and Transcription

Esta charla explora el uso de Vue.js en el backend, centrándose específicamente en la Reactividad de Vue 3. Se discute cómo la Reactividad de Vue 3 aprovecha los proxies de ES6 para actualizar cambios e interceptar hooks. La charla también cubre la implementación de Vue.js en el backend con demostraciones en vivo, mostrando la modificación de proxies y el uso de funciones reactivas. Se demuestra la creación de un array reactivo y la implementación de las funcionalidades de unirse, salir y enviar mensajes. La charla concluye mencionando la posibilidad de usar propiedades computadas e invitando a hacer más preguntas.

Available in English

1. Introducción a Vue.js en el Backend

Short description:

Hola, y bienvenidos a mi charla sobre cómo llevar Vue.js al backend. Soy un desarrollador de software autónomo con sede en Luxemburgo. Esta charla no trata sobre una forma muy productiva de construir un backend de Vue.js. Se trata más de provocar el pensamiento sobre algunas cosas que podríamos usar Vue.js en el backend, y esto es Vue.Reactivity.

Mi nombre es Mark. Soy un desarrollador de software autónomo con sede en Luxemburgo. Trabajo mucho con Vue.js y Nuxt. También con Node.js en el backend.

Y tengo un podcast. Se llama Decoding the Code y siempre puedes encontrarme en Twitter. Soy bastante activo allí. Así que si tienes alguna pregunta surgida de esta charla, solo contáctame y te seguiré respondiendo, por supuesto.

Entonces sí, Vue.js en el backend. Puedes pensar, ¿estás loco? ¿Por qué harías eso? Así que una advertencia rápida. Esta charla no trata sobre una forma muy productiva de construir un backend de Vue.js. Se trata más de provocar el pensamiento sobre algunas cosas que podríamos usar Vue.js en el backend, y esto es Vue.Reactivity. Y se me ocurrió la idea de esta charla a principios de este año, e incluso tuiteé al respecto. Le escribí a Evan Yew. Hola Evan, ¿ves algún problema en usar el motor de Vue 3 Reactivity en un backend de Node.js? Y me alegró que respondiera, así que escribió, simplemente ten en cuenta lo que quieres hacer Reactivo. La API se establece en Reactividad Profunda porque tiene más sentido en el entorno del navegador, pero en Node.js, querrías evitar la proxy profunda de los elementos internos de Node. Asegúrate de usar ref superficial y Reactividad superficial. Así que básicamente tenemos el visto bueno de Evan Yu para hacer esto y recibí otra respuesta de Alexander Lichta. Él me señaló que Oscar Spence había dado una charla al respecto en Vue.conf.us. Escribió esta charla totalmente genial de Oscar Spence sobre Vue 3 Reactivity en el contexto del backend, que era exactamente lo que yo quería hacer. Así que parte de este código que voy a escribir hoy está inspirado en el código de Oscar Spence, un poco diferente, pero la idea se basa un poco en su charla. Así que gracias Oscar por el trabajo inicial que hiciste para esto.

2. Usando Vue 3 Reactivity en el Backend

Short description:

Queremos usar Vue 3 Reactivity en el backend. La Reactividad nos permite actualizar los cambios donde sea necesario. Esto se logra escuchando los cambios y activando los efectos. Vue 3 Reactivity aprovecha los proxies ES6 para sobrescribir los getters y setters de las propiedades del objeto. Los proxies tienen el superpoder de interceptar hooks, lo que nos permite reemplazar los métodos setter y getter. Vamos a profundizar en este concepto y verlo en acción durante la demostración en vivo.

De acuerdo, queremos usar Vue 3 Reactivity en el backend. Antes de llegar a eso, primero debemos saber qué es realmente la reactividad. La reactividad es cuando cambias algo y lo actualizas donde sea necesario. Para hacer eso, necesitamos escuchar los cambios y notificar cuando ocurre un cambio. Podemos hacer algo que se llama un efecto, un efecto secundario, algo que debería suceder cuando algo cambia. Por ejemplo, el valor del número cambia de 3 a 5. Entonces, el control deslizante debe estar en otra posición, por ejemplo.

De acuerdo, esto es el patrón observador. En Vue 3 Reactivity, en Vue 2 usamos Object.defineProperty y en Vue 3 sobrescribimos los getters y setters de las propiedades del objeto aprovechando la magia de los proxies ES6. Vamos a profundizar un poco en eso.

Entonces, ¿qué es un proxy? Si creas un proxy a partir de un objeto, por defecto se comporta de la misma manera que el objeto. Por ejemplo, si escribo un valor en esto, lo escribe en el objeto, en el objetivo, y también cuando leo de esto, devuelve el valor del objetivo. Se comporta exactamente como pensamos que debería funcionar, lo cual es genial. Pero los proxies tienen un superpoder, y este superpoder es que podemos interceptar estos dos hooks. Por supuesto, puedes interceptar más hooks, pero estos son los dos que son interesantes para este caso de uso. Puedes escribir el código que quieras para reemplazar los métodos setter y getter. En la demostración veremos qué hacemos con esto. Vamos a comenzar esta fiesta o mejor dicho, vamos a comenzar esta demostración en vivo.

3. Comprendiendo los Proxies de ESX y Modificando el Proxy

Short description:

Primero, obtengamos una idea de los Proxies de ESX y luego veremos cómo implementar el backend de Vue.js con una demostración en vivo. Comenzamos creando un objeto llamado persona con un nombre y una edad. Luego creamos un proxy a partir de este objeto utilizando un controlador. Por defecto, el proxy actualiza los cambios como se espera. Sin embargo, podemos modificar el proxy sobrescribiendo trampas o funciones en el controlador, como la función getter. Esto nos permite acceder y manipular el objeto original a través del proxy.

Primero, comencemos obteniendo una pequeña idea de los Proxies de ESX y luego vamos a hacer una pequeña demostración en vivo donde veremos cómo implementar algo de Vue.js en el backend. Veamos.

De acuerdo, comencemos con los proxies. Para mostrarte cómo funciona, simplemente crearé un objeto primero. Esto se llama persona y esta persona tiene un nombre Mark y tiene una edad de 34. Perfecto. Y creamos nuestro proxy de la siguiente manera. Un nuevo proxy a partir de persona y espera un segundo argumento que se llama controlador y vamos a ver cómo funciona en un momento.

Por ahora, puedo jugar con esto en este lado de la pantalla. Veamos primero qué hay ahí. Así que esto es el proxy y lo que pasamos aquí. Hasta ahora, nada espectacular. Pero cuando vamos allí ahora y decimos que proxy.edad es 35. Lo establece en 35. Cuando lo leemos de nuevo, en realidad se actualizó. Así es como esperamos que funcione. Y así es como se envía el proxy de forma predeterminada. Pero podemos modificar el proxy sobrescribiendo algunas trampas o funciones en este controlador. Por ejemplo, la función getter. Toma dos argumentos, objetivo y clave. Veamos qué es. Console.log objetivo y clave. Bien. Y veamos. Esto está invocando el método get. Aquí podemos ver que registra lo que queremos registrar. El objetivo. Ahora podemos ver cuál es el objetivo. El objetivo no es nada más que el objeto original, y el proxy es como el frente de eso. Esto es lo que está detrás del proxy, por así decirlo.

4. Comprendiendo la Reactividad de Vue 3

Short description:

Y la edad es la clave que queremos obtener. Simplemente llamémoslo 'get' para ver con qué estamos trabajando. Tenemos que volver a codificar la funcionalidad. Vamos a sobrescribir el 'setter'. Establecer la clave en el valor. Ahora, cuando intentamos leer el nombre, ¡hey, se actualizó! Entonces ahora hemos interceptado estas funciones, pero ¿qué debemos hacer con ellas? En la reactividad de Vue, hacemos un seguimiento y activamos. Tengo otra charla en una conferencia donde profundizo en la reactividad de Vue 3, pero por ahora, esto es suficiente. Vue 3 tiene una función llamada 'reactivity'.

Y la edad es la clave que queremos obtener. Así que en este caso, la edad. Y cuando decimos el nombre, bueno, dice nombre, perfecto. Simplemente llamémoslo 'get' para ver con qué estamos trabajando.

Y quizás hayas notado que siempre devuelve 'undefined', ¿por qué es eso? Bueno, porque no estamos devolviendo nada. Te dije que podemos sobrescribir completamente esta función, pero ahora la rompimos. Tenemos que volver a codificar la funcionalidad. Entonces lo que vamos a hacer es simplemente devolver el objetivo con el valor de la clave. Bien, veamos si eso funcionó. Como un encanto. Perfecto.

Ahora sobrescribamos el 'setter'. El 'setter' toma un argumento adicional, el valor. Permíteme ser un poco perezoso y copiar esto. Establecer la clave en el valor. ¿Qué sucede cuando establecemos el nombre en Jimmy, por ejemplo? Sí, establecemos y luego el nombre. ¿A qué valor queremos establecer el nombre? Jimmy. Entonces, ahora cuando vamos a, cuando mostramos el nombre, no cambió, ¿por qué? Porque nuevamente no lo establecimos. Simplemente sobrescribimos nuestra función original y la rompimos. De acuerdo, arreglemos eso. Establezcamos la clave en el objetivo con el nuevo valor y probemos de nuevo. El nombre es Jimmy. Y luego, cuando intentamos leer el nombre, ¡hey, se actualizó, perfecto!

Entonces ahora hemos interceptado estas funciones, pero ¿qué debemos hacer con ellas? En la reactividad de Vue, hacemos algo así, aquí en el 'get', hacemos un seguimiento, hacemos algo que se llama seguimiento, y aquí en el 'setter', algo que se llama activación. Bueno, en realidad, pasamos el objetivo y la clave aquí. Entonces, lo que hace esto es que el seguimiento es, nos damos cuenta de que hay algo que, en efecto, algo que quiere ser observado, así que lo tomamos y lo escribimos como una dependencia, y luego cuando algo cambia, cuando establecemos un nuevo valor, lo activamos. Así que le decimos al sistema, ¡hey, algo cambió aquí! Pero eso se vuelve demasiado profundo, y tengo otra charla en una conferencia o varias charlas en conferencias sobre este tema donde profundizo un poco más en la reactividad de Vue 3, pero por ahora, esto es suficiente. Además, en la versión real de la reactividad de Vue 3, no usamos esto, usamos algo llamado 'reflect' para resolver algunas advertencias, pero no voy a entrar en eso demasiado, porque ahora estamos viendo algo diferente. Entonces, Vue 3 tiene una función llamada 'reactivity', y es más o menos algo como esto.

5. Usando VueJS en el Backend

Short description:

Función, no se llama reactividad, se llama reactivo. Hacemos un proxy del objetivo y lo devolvemos. Para hacer un objeto reactivo, usamos la función reactivo. En la demostración, tenemos un servidor express con tres rutas: unirse, salir y mensaje. Por ahora, no hay autenticación ni interacción real del usuario. Primero, agregamos VueJS al backend usando yarn add Vue.at.next. Luego importamos las funciones necesarias y creamos un arreglo reactivo llamado usuarios.

Función, no se llama reactivity, se llama reactivo, lo siento. Entonces pasamos aquí el objetivo, ¿y qué hacemos con él? Simplemente hacemos un proxy de él, así como esto. Y devolvemos el proxy, y aquí, no es la persona, es el objetivo que pasamos. Entonces ahora, si queremos hacer que un objeto sea reactivo, todo lo que tenemos que hacer es reactivar esto.

De acuerdo, vamos a probarlo. Muy bien, vamos a obtener el valor, por ejemplo, la edad. Así invoca nuestro gancho de obtención donde bloqueamos las cosas, y en la versión real de tu reactivity, hacemos un seguimiento. Entonces le decimos al sistema que queremos saber cuándo cambia la edad, y luego cuando cambia, lo activamos. Así que le decimos al sistema, hey, esto cambió, y luego haz tu cosa y ejecuta ese efecto secundario que debe hacerse.

De acuerdo, esto son proxies. Ahora vamos a pasar a una demostración donde voy a usar todo esto en el backend. De acuerdo, este es mi backend, no hay nada impresionante sucediendo aquí. Es solo mi servidor express, aburrido, y tres rutas con las que trabajo. Una es unirse, salir y mensaje. También se replican en mi cliente REST, llamado Insomnia. Iniciar sesión, solo pasa el nombre de usuario, mensaje, qué nombre de usuario y qué texto. Y luego salir, nuevamente el nombre de usuario. Entonces aquí no hay authentication, no hay interacción real con usuarios reales. Todo eso es algo que tenemos que imaginar que se agregará más adelante. Pero por el momento, centrémonos en la reactivity para este caso. De acuerdo, lo primero que tenemos que hacer, en realidad, es agregar VueJS en nuestro backend. ¿Cómo hacemos eso? Vamos a yarn add Vue.at.next, si haces Vue.at.next, es la versión 3, de acuerdo, está instalado. Ocultemos la barra lateral, perfecto. De acuerdo, primero importemos algunas cosas que necesitamos. RequireVue. ¿Y qué necesitamos? Necesitamos la función reactivo que vimos anteriormente, necesitamos efecto, vamos a llegar a eso más adelante, qué es exactamente eso, y podríamos usar una propiedad computada. De acuerdo, hasta ahora todo bien. Y creemos un arreglo reactivo llamado usuarios. isReactive y es un arreglo vacío para empezar. De acuerdo, hasta ahora todo bien, aún no ha sucedido nada porque aún no hemos escrito ningún código real, pero comencemos con unirse.

6. Agregando Usuario al Arreglo y Mostrando Mensaje de Unión

Short description:

De acuerdo, cuando ejecutamos la función unirse, agregamos el usuario al arreglo. El primer efecto que usamos es console.log la longitud del arreglo. Pasamos una función que se ejecuta cuando cambia la longitud de usuariosCambiados. Queremos mostrar 'El usuario [nombre de usuario] se unió al chat' para el último usuario en el arreglo. Para hacer esto, accedemos al último índice del arreglo y verificamos si el usuario existe. Si no existe, ignoramos el resto de la función.

De acuerdo, unirse. Cuando ejecutamos esto, queremos agregar este usuario al arreglo. Así que esta es la parte más fácil. Simplemente hacemos usuarios.push, ¿y qué empujamos? El cuerpo de nuestra solicitud, que es exactamente esto, solo el nombre de usuario.

De acuerdo, cuando hacemos esto ahora, no sucede nada porque aún no estamos reaccionando a ello. Ese es nuestro primer efecto. Te dije que explicaría qué hace este efecto, pero para hacerlo, permíteme escribir el efecto primero y luego explicar esto. Aquí console.log usuariosCambiados y solo vamos a la longitud del arreglo. Cuando vamos allí ahora, decimos usuariosCambiados 1, 2, 3, 4, 5.

Este efecto, cómo funciona, es que pasas una función aquí que si algo dentro de esta función cambia, entonces ejecuta la función nuevamente. Puede parecer un poco complicado, pero esa es la forma más fácil de explicarlo. Si algo dentro de una función cambia, ejecútalo. En este caso, la longitud de usuariosCambiados, por lo que se ejecuta. Así que es solo una salida.

Pero no queremos acceder aquí solo a esto. Queremos hacer algo como esto. El usuario esto y esto se unió al chat. Y va a ser algo como usuario.nombreDeUsuario. Solo tenemos que obtener primero al usuario. Entonces el usuario va a ser el último en el arreglo, porque cuando agregas algo a un arreglo, está en la última posición. Esto es conveniente para nosotros, porque es algo fácil de hacer. Solo accedemos al índice de longitud menos uno. Y aquí nuevamente, porque aquí accedemos a la longitud del usuario, esto se ejecuta cuando cambia. Así que esperemos que esto funcione. No funcionó. ¿Por qué? Nombre de usuario de indefinido. Por supuesto, está indefinido al principio. Así que tenemos que hacer una pequeña verificación aquí. Si no hay usuario, simplemente regresamos y ignoramos el resto. De acuerdo, veamos.

7. Implementando Funcionalidad de Salida de Usuario

Short description:

Ahora funciona. Establecemos leave en true cuando un usuario quiere salir. Luego encontramos al usuario con el mismo nombre de usuario que en el cuerpo de la solicitud y filtramos aquellos que ya se hayan ido. Si hay un usuario, establecemos su estado de salida en true.

Ahora funciona. Luego enviamos la solicitud y ¡BAM! Funcionó. Esto es perfecto. Así que el usuario mark se unió. Increíble.

Ahora para salir, eso es lo siguiente que vamos a codificar. ¿Cómo? Cuando el usuario se va. Y esto es un poco más complicado porque vamos a hacer algo un poco más inconvencional. Así que digamos que el nombre de usuario, tenemos algo como esto, ¿verdad? Lo que hacemos es establecer leave en true. Así que este usuario se está yendo. Y luego nuestro efecto va a capturar eso y luego establecerá left en true. Así que sabemos cuándo un usuario quiere irse. Y luego sabemos cuándo se completa la acción. Así que eso es lo que vamos a hacer.

Primero, necesitamos usar eso que se está yendo. Y luego lo vamos a hacer así. Donde está el usuario, encontramos. Encontramos un usuario donde el nombre de usuario es el mismo que pasamos aquí en el cuerpo de la solicitud. Así que un cuerpo de solicitud. Vamos. Cuerpo nombre de usuario. De acuerdo. Y también si aún no se han ido. Así que filtramos los que ya se han marcado como idos. De acuerdo. Y luego nuevamente, aquí podríamos encontrar algunos problemas si no hay un usuario. Así que si no hay un usuario, no hacemos nada. Y si lo hay, establecemos leave del usuario en true. De acuerdo. Entonces sí, esto va a encontrar al usuario con el nombre de usuario que es el mismo que pasamos aquí y que aún no se ha ido.

8. Implementando Salida de Usuario y Envío de Mensajes

Short description:

Para permitir que los usuarios se vayan, creamos un efecto que establece la propiedad 'left' en true para los usuarios que desean irse y registra el nombre de usuario del usuario. A continuación, implementamos el envío de mensajes agregando una matriz reactiva llamada 'messages' y agregando nuevos mensajes a ella. Registramos el nombre de usuario y el texto del mensaje. Desafortunadamente, no tenemos tiempo para cubrir más temas como propiedades computadas. Gracias por su atención y no dude en contactarme en Twitter si tiene alguna pregunta adicional.

Simplemente, bueno, él quería irse pero la operación aún no se ha completado. Entonces, para hacer eso, permítanme crear un efecto. Y aquí, vamos a hacer lo siguiente. Filtramos los usuarios, para los usuarios que se están yendo. Dejar y, pero no los que aún no se han ido. Entonces, y no se han ido. Y para todos estos, hacemos lo siguiente. Bueno, vamos a la siguiente línea. Establecemos left en true y registramos al usuario que se ha ido. Y esto será user.username. Muy bien, vamos a probarlo. Bueno, primero unirse, mark join, perfecto. Salir, mark left, perfecto. Nuevamente, no funciona porque no hay ninguno en la lista. De acuerdo, perfecto.

Muy bien, la última parte es enviar mensajes. Para eso, necesitamos otra matriz, una matriz reactiva, messages. Y aquí necesitamos agregar el mensaje. Messages.push, cuerpo de la solicitud, genial. Y luego necesitamos un efecto similar a los que teníamos para los usuarios. Así que simplemente lo copiaré y reemplazaré user por message y vamos a registrar otro mensaje. Así que ponemos el usuario entre paréntesis y luego escribimos el mensaje. Entonces es message.username, genial. Y luego message.text, oops. Ok, vamos a probar eso. Vamos a iniciar sesión, funciona. Vamos a enviar un mensaje y eso también funciona, genial. Y vamos a salir, genial.

Muy bien, desafortunadamente hemos terminado. Me hubiera encantado mostrarte mucho más, por ejemplo, propiedades computadas, pero eso simplemente no está en el tiempo, pero así es como podríamos usar Vue.js en el backend. Por supuesto, esto no es exactamente cómo implementarías el chat, pero es solo para visualizar o mostrarte lo que es posible con Vue en el backend. Con eso, muchas gracias por su atención y, por supuesto, por no quedarse dormido. Y si tienes más preguntas sobre esto, asegúrate de enviarme un mensaje directo en Twitter, te responderé y sí, que tengas un excelente resto de la conferencia. ♪♪♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.