Understand the hard parts of Nuxt

Rate this content
Bookmark

On Stackoverflow, people usually do have the exact same struggles daily. Let me quickly review most of them and give you some solutions on how to solve them. On top of giving you tips on how to solve your bugs faster!

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

You should avoid mutating VUExStore state outside of mutation handlers. This practice is enforced by enabling VUExStrictMode, which Nuxt does by default to prevent common issues.

To perform a deep copy of an object in Nuxt, you should use JSON.parse and JSON.stringify methods together to clone the object. Alternatively, you can use lodash-es for an efficient deep cloning solution.

First, ensure your code works locally, check your environment variables are properly defined, isolate the issue, and consider hosting your app on a different platform to identify if the problem is platform-specific.

In Nuxt, use conditional checks like checking if 'window' or 'document' is defined, or use dynamic imports to load modules only when needed, ensuring they do not execute server-side.

Check if it's a back-end issue, ensure you're receiving the correct data in the network tab of your developer tools, and use console logging or Vue dev tools to trace and debug the functionality.

The talks from Nuxt.nation, including the mentioned talk, are available on their website and will also be available on YouTube soon.

If common debugging steps fail, consider cleaning your npm, node modules, and reinstalling your project. If issues persist, reach out for help on platforms like Discord, GitHub discussions, or Stack Overflow.

Konstantin BIFERT
Konstantin BIFERT
9 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This lightning talk covers common Vue issues such as mutating Vuex Store state outside of mutation handlers and incorrect cloning of arrays and objects. Troubleshooting tips include checking code locally, fixing issues with undefined window or navigator, and checking for backend issues and proper data in the network tab. Additional tips include using the network tab and console log to spot bugs, checking state in real-time with Vue dev tools, and reaching out for support on Discord, GitHub, or Stack Overflow.

1. Introduction to Nuxt and Common Vue Issues

Short description:

In this lightning talk, I will discuss Nuxt and common Vue issues. One common issue is mutating Vuex Store state outside of mutation handlers. To avoid this, enable the Vuex Strict Mode. Another issue is incorrect cloning of arrays and objects. Destructuring results in a shallow copy, so use JSON methods or import lodash-es for proper deep cloning.

Hi folks, welcome to my lightning talk. In this one I will talk about Nuxt and some of the issues that you may face. So firstly I am Constantine, I'm a front-end developer at Passionate People. I'm a Nuxt.js Ambassador and I'm helping daily on Stack Overflow.

So this talk will mainly be a follow-up to the one I did on Nuxt.nation. So you can find the two days on their website and it will probably be soon available also on YouTube. Since this is a shorter talk, we will mainly focus on common VUE issues. So let's say by the most common one, do not mutate VUExStore state outside of mutation handlers. So this is coming from the VUExStrictMod which is a good practice to let enable and this is what Nuxt is doing. If you don't like it, you can just set it to false in your StoreIndex.js file.

Because let's say for example, this is great because it can help you avoid some common issues when you are trying to either update some values in an array or an object. So let's say if you have an array and you want to clone it, the wrong way of doing it is destructuring it because it's doing a shallow copy. So I've linked an answer with more details about this one that you can find. By the way, this talk is available at vr21 subdomain. So this basically stands for QLondon 2021. This is already live, so you can find this talk there.

So yeah, back to our issue. If you want to have it properly done, you need to do a JSON burst, JSON shrinkify to have a proper deep copy. Otherwise you can also import lodash to avoid some rare issues, but still some that can happen if you want to load it in a good way and basically not loading the whole library. Just use lodash-es, load it this way. Then you will be able to clone deep properly and have your object that you can totally edit afterwards without getting this issue.

2. Troubleshooting Code Issues

Short description:

Let's discuss what may be blocking your code on production. Check that your code works locally and isolate the issue. Remember that Nuxt is a visual app on the server. Fix issues with undefined window or navigator. Double-check for backend issues and proper data in the network tab.

Now let's talk about what may be blocking if your code is not working on production. For this one, we can first check that your code is working locally. Either by running yarn.build and yarn.start if you are on the server. I mean using the git server, or yarn.generate and yarn.start if you're aiming for the static build.

Checking your env variables, and that they are properly defined can be helpful. Also checking that they are defined on your platform. This is a common issue that some people forget to set up. So this depends on the platform, but it's pretty easy to find when you build your app. Also try to isolate your issue to reduce the amount of things that can be messed up. With having a lot of stacks, one on top of each other. And also try to host your app somewhere else to see if it's not coming from the platform, or maybe to debug it just more quickly.

Another common issue is when your window document or navigator is undefined. So for this one you need to remember that Nuxt is basically a visual app on Siri. If you're using srtrue in your Nuxt.config.js file. So that means that your code will run both on browser and server. For example, window is not defined on server. So for those situations, you can fix it with something like this. So for example, here we do have a calendar. So this is a booking calendar, which is totally not relevant to have on the server because this is just a visual thing that somebody will come and click on. Also, you can check if you are running on the browser. So let's say here for a window size, there's no matter checking it on the server. And you can also make a dynamic import, so this way you will import the module only when it's needed. And you also have cool things like interpolation there. So this is really useful. Try it out. It's really great. And lastly, what to do if your stuff is just not working when you click on a button. So first off, double-check that this is not a back-end issue because this happens sometimes. Also double-check that you're receiving the proper data in your network tab. This is the best thing to try to find any bug.

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

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
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
Daniel Roe
Daniel Roe
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.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- 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
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
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.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.