Common Mistakes in Vue and Nuxt and How to Avoid Them
summary
Shows concrete bugs and fixes: using index as v-for key breaks stateful child components and list reordering, so use a stable id/slug; browser APIs like localStorage or Date aren’t reactive unless wrapped (useUse/refs); replace $fetch with useFetch vs $fetch or useAsyncData to avoid double server+client requests; type fetch results via generics for autocomplete; run requests concurrently with useAsyncData + Promise.all; navigate with navigateTo not router.push.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 0:44Why mistakes matter
- 2:10Misusing key in v-for
- 5:46Stateful components and key
- 8:57Key for transitions
- 10:23Non-reactive computed props
- 12:28Nuxt data fetching mistakes
- 15:16TypeScript for API responses
- 17:23Optimizing concurrent data fetching
- 21:17Nuxt navigate vs router.push
- 22:41Additional resources
- 23:45Q&A
related talks
25mCommon Mistakes in Vue.js and How to Avoid Them
35mCommon Mistakes in Vue.js and How to Avoid Them
27mCommon Mistakes in Vue.js
01mDevelopers' Mistakes with Nuxt – Sébastien Chopin
08mUnderstand the hard parts of Nuxt
01mDevelopers' Mistakes with Nuxt – Daniel Roe
01mDevelopers' Mistakes with Nuxt – Julien Huang
32mUnderstand the hard parts of Nuxt