Understand the hard parts of Nuxt

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.

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.

Because the network tab does not lie, and this is your best friend to spot a possible bug. Also console log all day long. You can also use debugger if you have a complex app with a lot of stuff happening there.

You can check your state in real time thanks to the Vue dev tools. Maybe open a private window because some extensions can mess things up. So for example uBlock or privacy badger and in private window those are disabled by default.

If you're still using Vue 2 be aware of some caveats that are related to venue.js when editing an array or an object. If it's still hard to find what is happening maybe try Firefox or Chrome depending on which you already are because some errors can be useful. I mean they will be phrased in a different manner so yeah.

Clean your npm, your own node modules and reinstall your project. If you still struggle just take shower, walk or relax with Moody and then come back at it. Ask a buddy because this can be helpful to maybe try to have somebody reproducing your issue. And if it's not working reach us on the discord, the github discussions or Stack Overflow. We will be grateful to help you there. So this is all for my Lightning talk. Thanks for listening and have a great day.