Common Mistakes in Vue.js and Nuxt
And, more importantly... how to avoid them
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
v-for :key
<li
v-for="(item, index) in items"
:key="index"
>...</li>What's wrong with this? 🤔
❌
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
v-for :key
It's not just for loops!
Reactive Deps
const cookiesAccepted = computed(()=>
localStorage.getItem("cookiesAccepted")
)What's wrong with this? 🤔
Reactive Deps
const msg = "Hello world";
const cookiesAccepted = computed(()=> msg)This is more obvious
Reactive Deps
Often see this with browser API's:
- localStorage
- Date()
- etc
Reactive Deps
VueUse
Nuxt
Fetching Data
Which function do you find yourself using the most?
- $fetch
- useFetch
- useAsyncData
I see all kinds of issues
Fetching Data
- using $fetch when you should use useFetch or useAsyncData
- Not typing request responses
- Not making requests concurrently when possible
Programmatic Navigation
useRouter().push("/")What's wrong with this? 🤔
(in the context of Nuxt 3 app)
Programmatic Navigation
navigateTo("/")This is the Nuxt Standard Way
Programmatic Navigation
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
🔥 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
danielkelly_io
I'll tweet out the slides and the codebase after this
Thank you 🙏
Go code awesome things!
(with Nuxt 😉)
Common Mistakes in Vue and Nuxt and How to Avoid Them
By Daniel Kelly
