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

@danielkelly_io

@danielkellyio

Alabama, USA

danielkelly.io

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 😉)