Common Mistakes in Vue.js and Nuxt
And, more importantly... how to avoid them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/8969634/headshot.png)
Daniel Kelly
Lead Instructor @ Vue School
Full Stack developer (10 + years)
Husband and Father
presentation Icons from fontawesome.com
Why this topic
?
- We're all human and make mistakes
- Simple mistakes can cause big headaches
- Learn from the mistakes of others
- It's a very practical topic
Why this topic?
?
Vue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
v-for :key
<li
v-for="(item, index) in items"
:key="index"
>...</li>
What's wrong with this? 🤔
❌
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
v-for :key
Bug Manifests Under 2 Conditions
- When the elements in the array change order
- When a nested element or component has it's own state
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
v-for :key
It's not just for loops!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
Reactive Deps
const cookiesAccepted = computed(()=>
localStorage.getItem("cookiesAccepted")
)
What's wrong with this? 🤔
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
Reactive Deps
const msg = "Hello world";
const cookiesAccepted = computed(()=> msg)
This is more obvious
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
Reactive Deps
Often see this with browser API's:
- localStorage
- Date()
- etc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993532/vue-logo-border.png)
Reactive Deps
VueUse
Nuxt
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
Fetching Data
Which function do you find yourself using the most?
- $fetch
- useFetch
- useAsyncData
I see all kinds of issues
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
Fetching Data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
- using $fetch when you should use useFetch or useAsyncData
- Not typing request responses
- Not making requests concurrently when possible
Programmatic Navigation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
useRouter().push("/")
What's wrong with this? 🤔
(in the context of Nuxt 3 app)
Programmatic Navigation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
navigateTo("/")
This is the Nuxt Standard Way
Programmatic Navigation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/9993765/nuxt-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/10847782/Screenshot_2023-10-18_at_3.01.50_PM.png)
Lines 111 - 206
https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts
Common Vue.js Mistakes and How to Avoid Them
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/10847190/Screenshot_2023-10-18_at_11.03.37_AM.png)
🔥 Free
https://vueschool.io/courses/common-vue-js-mistakes-and-how-to-avoid-them
- Omitting the Key Directive on v-for
- Prop Drilling
- Watching Arrays the Wrong Way
- Replacing Reactive State the Wrong Way
- Unintentionally Mutating Props
- Forgetting to Clean Up Your Manual Event Listeners
- Expecting Changes to Non-Reactive Dependencies to Trigger Updates
- Not Considering TypeScript
- Destructuring Reactive Data
- Calling Composables in the Wrong Place
- Using v-html with User Provided Data
- Unnecessary Manual DOM Manipulation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/10847236/pasted-from-clipboard.png)
danielkelly_io
I'll tweet out the slides and the codebase after this
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1984687/images/10847253/x.png)
Thank you 🙏
Go code awesome things!
(with Nuxt 😉)
Common Mistakes in Vue and Nuxt and How to Avoid Them
By Daniel Kelly
Common Mistakes in Vue and Nuxt and How to Avoid Them
- 920