Exclusive tips every week

Hey!

Today I'm giving a talk at Nuxt Nation, it's a live preview of one of the lessons from Mastering Nuxt 3.

It's totally free, totally online, so go watch it here: https://nuxtnation.com/

Also, next week I'm doing a huge Black Friday sale on all of my courses! That includes:

• Vue Tips Collection
• Reusable Components
• Clean Components

Don't buy them at full price this week!

I also know that many of you are planning on taking advantage of lots of other fantastic sales, so this gives you a chance to plan out your spending better.

Have a great week!

— Michael

🔥 Using useRoute

The useRoute composable from Vue Router (and included in Nuxt 3) gives us easy access to the current route:

const route = useRoute();

In a template we have an injected variable instead:

<template>
  <pre>{{ $route }}</pre>
</template>

This route object comes straight from Vue Router, so it contains everything you’d expect:

• path
• query
• params
• and more

Here are the docs for the route object: https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html

🔥 Forcing a Component to Update

What do you do if a component isn’t updating the way it should?

Likely, this is caused by a misunderstanding and misuse of the reactivity system.

But let’s look at a quick solution using forceUpdate:

import { getCurrentInstance } from 'vue';

const methodThatForcesUpdate = () => {
  // ...
  const instance = getCurrentInstance();
  instance.proxy.forceUpdate();
  // ...
};

Using the Options API instead:

export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();  // Notice we have to use a $ here
      // ...
    }
  }
}

Now, here comes the sledgehammer if the previous approach doesn’t work.

I do not recommend using this approach. However, sometimes you just need to get your code to work so you can ship and move on.

But please, if you do this, keep in mind this is almost always the wrong way, and you’re adding tech debt in to your project.

We can update a componentKey in order to force Vue to destroy and re-render a component:

<template>
  <MyComponent :key="componentKey" />
</template>

<script setup>
import { ref } from 'vue';
const componentKey = ref(0);

const forceRerender = () => {
  componentKey.value += 1;
};
</script>

The process is similar with the Options API:

export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    }
  }
}

You can find a deeper explanation here: https://michaelnthiessen.com/force-re-render/

🐦 Trending Tweet

I got lots of great talk suggestions in this thread!

Now I just have to find the time to go through them.

<AddressForm
  v-model:street-name="streetName"
  v-model:street-number="streetNumber"
  v-model:postal-code="postalCode"
  v-model:province="province"
  v-model:country="country"
/>

<!-- AddressForm.vue -->
<script setup>
// Set up all the props
defineProps({
  streetName: {
    type: String,
    required: true,
  },
  streetNumber: {
    type: Number,
    required: true,
  },
  // ...
  country: {
    type: String,
    required: true,
  },
});

// Set up our events
defineEmits([
  'update:streetName',
  'update:streetNumber',
  // ...
  'update:country',
]);
</script>

<template>
  <form>
    <input
      type="text"
      :value="streetName"
      @input="$emit('update:streetName', $event.target.value)"
    >
    <input
      type="text"
      :value="streetNumber"
      @input="$emit('update:streetNumber', $event.target.value)"
    >
    <!-- ... -->
    <input
      type="text"
      :value="country"
      @input="$emit('update:country', $event.target.value)"
    >
  </form>
</template>