Comprender las partes difíciles de Nuxt

Rate this content
Bookmark

En Stackoverflow, las personas suelen tener exactamente las mismas dificultades a diario. Permítanme revisar rápidamente la mayoría de ellas y darles algunas soluciones sobre cómo resolverlas. ¡Además de darles consejos sobre cómo solucionar sus errores más rápido!

9 min
21 Oct, 2021

Video Summary and Transcription

Esta charla relámpago aborda problemas comunes de Vue, como la mutación del estado de Vuex Store fuera de los controladores de mutación y la clonación incorrecta de matrices y objetos. Los consejos de solución de problemas incluyen verificar el código localmente, solucionar problemas con window o navigator no definidos y verificar problemas en el backend y datos adecuados en la pestaña de red. Consejos adicionales incluyen utilizar la pestaña de red y el registro de la consola para detectar errores, verificar el estado en tiempo real con las herramientas de desarrollo de Vue y buscar apoyo en Discord, GitHub o Stack Overflow.

Available in English

1. Introducción a Nuxt y Problemas Comunes en Vue

Short description:

En esta charla relámpago, hablaré sobre Nuxt y problemas comunes en Vue. Un problema común es mutar el estado del almacén Vuex fuera de los manejadores de mutación. Para evitar esto, habilita el Modo Estricto de Vuex. Otro problema es la clonación incorrecta de matrices y objetos. La desestructuración resulta en una copia superficial, así que utiliza los métodos JSON o importa lodash-es para una clonación profunda adecuada.

Hola a todos, bienvenidos a mi charla relámpago. En esta hablaré sobre Nuxt y algunos de los problemas que pueden surgir. Soy Constantine, desarrollador front-end en Passionate People. Soy Embajador de Nuxt.js y ayudo diariamente en Stack Overflow.

Esta charla será principalmente una continuación de la que hice en Nuxt.nation. Pueden encontrar ambos días en su página web y probablemente estará disponible pronto también en YouTube. Dado que esta es una charla más corta, nos centraremos principalmente en problemas comunes de Vue.

Comencemos con el más común, no mutar el estado del almacén Vuex fuera de los manejadores de mutación. Esto proviene del Modo Estricto de Vuex, que es una buena práctica habilitar y es lo que hace Nuxt. Si no te gusta, simplemente puedes establecerlo como falso en tu archivo StoreIndex.js.

Por ejemplo, esto es genial porque te ayuda a evitar algunos problemas comunes cuando intentas actualizar valores en una matriz u objeto. Si tienes una matriz y quieres clonarla, la forma incorrecta de hacerlo es mediante la desestructuración, ya que esto realiza una copia superficial. He vinculado una respuesta con más detalles sobre esto que puedes encontrar. Por cierto, esta charla está disponible en el subdominio vr21. Esto significa QLondon 2021. Ya está en vivo, así que pueden encontrar esta charla allí.

Entonces, volviendo a nuestro problema. Si quieres hacerlo correctamente, necesitas hacer una copia profunda en formato JSON. De lo contrario, también puedes importar lodash para evitar algunos problemas raros, pero aún así pueden ocurrir si quieres cargarlo de manera adecuada y básicamente no cargar toda la biblioteca. Solo utiliza lodash-es, cárgalo de esta manera. Luego podrás clonar profundamente correctamente y tener tu objeto que puedes editar completamente sin tener este problema.

2. Solución de Problemas de Código

Short description:

Discutamos qué puede estar bloqueando tu código en producción. Verifica que tu código funcione localmente y aísla el problema. Recuerda que Nuxt es una aplicación visual en el servidor. Soluciona problemas con window o navigator indefinidos. Verifica nuevamente problemas en el backend y los datos adecuados en la pestaña de red.

Ahora hablemos sobre qué puede estar bloqueando si tu código no funciona en producción. Para esto, primero podemos verificar que tu código funcione localmente. Ya sea ejecutando yarn.build y yarn.start si estás en el servidor. Me refiero usando el servidor git, o yarn.generate y yarn.start si estás apuntando a la compilación estática.

Verificar tus variables de entorno y que estén definidas correctamente puede ser útil. También verificar que estén definidas en tu plataforma. Este es un problema común que algunas personas olvidan configurar. Así que esto depende de la plataforma, pero es bastante fácil de encontrar cuando compilas tu aplicación. También intenta aislar tu problema para reducir la cantidad de cosas que pueden salir mal. Con tener muchas pilas, una encima de la otra. Y también intenta alojar tu aplicación en otro lugar para ver si no proviene de la plataforma, o tal vez para depurar más rápidamente.

Otro problema común es cuando window document o navigator es indefinido. Entonces, para esto, debes recordar que Nuxt es básicamente una aplicación visual en el servidor. Si estás usando srtrue en tu archivo Nuxt.config.js. Eso significa que tu código se ejecutará tanto en el navegador como en el servidor. Por ejemplo, window no está definido en el servidor. Entonces, para esas situaciones, puedes solucionarlo con algo como esto. Por ejemplo, aquí tenemos un calendario. Así que este es un calendario de reservas, que no tiene nada que ver con el servidor porque esto es solo una cosa visual en la que alguien vendrá y hará clic. También puedes verificar si se está ejecutando en el navegador. Por ejemplo, aquí para el tamaño de la ventana, no importa verificarlo en el servidor. Y también puedes hacer una importación dinámica, de esta manera importarás el módulo solo cuando sea necesario. Y también tienes cosas geniales como interpolación allí. Así que esto es realmente útil. Pruébalo. Es realmente genial. Y por último, qué hacer si tus cosas simplemente no funcionan cuando haces clic en un botón. Primero, verifica nuevamente que no sea un problema del backend porque esto sucede a veces. También verifica que estés recibiendo los data adecuados en tu pestaña de red. Esto es lo mejor para intentar encontrar cualquier error.

3. Consejos de Solución de Problemas y Soporte

Short description:

Utiliza la pestaña de red y el registro de la consola para detectar errores. El depurador es útil para aplicaciones complejas. Verifica el estado en tiempo real con las herramientas de desarrollo de Vue. Ten en cuenta las advertencias de Vue 2. Prueba diferentes navegadores para obtener mensajes de error útiles. Limpia npm y reinstala el proyecto. Tómate un descanso y pide ayuda a un compañero. Busca ayuda en Discord, GitHub o Stack Overflow.

Porque la pestaña de red no miente, y es tu mejor amiga para detectar posibles errores. También registra en la consola todo el día. También puedes utilizar el depurador si tienes una aplicación compleja con muchas cosas sucediendo allí. Puedes verificar tu estado en tiempo real gracias a las herramientas de desarrollo de Vue. Tal vez abre una ventana privada porque algunas extensiones pueden causar problemas. Por ejemplo uBlock o privacy badger y en una ventana privada, estas están desactivadas de forma predeterminada.

Si aún estás utilizando Vue 2, ten en cuenta algunas advertencias relacionadas con venue.js al editar un array o un objeto. Si aún te resulta difícil encontrar qué está sucediendo, tal vez prueba Firefox o Chrome, dependiendo de cuál estés utilizando, porque algunos errores pueden ser útiles. Quiero decir, estarán redactados de manera diferente, así que sí. Limpia tu npm, tus propios modules de nodo y reinstala tu proyecto. Si aún tienes problemas, simplemente date una ducha, camina o relájate con Moody y luego vuelve a intentarlo. Pide ayuda a un compañero porque esto puede ser útil para que alguien intente reproducir tu problema. Y si no funciona, contáctanos en Discord, las discusiones de GitHub o Stack Overflow. Estaremos encantados de ayudarte allí. Esto es todo para mi charla relámpago. Gracias por escuchar y que tengas un buen día. ¡Nos vemos!

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.
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.
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Workshop
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.