Join 13,567+ other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
👋Hey friend! I work hard to send you amazing stuff each week.
— Michael
Hey there!
I've got some great content for you this week.
Enjoy!
— Michael
We can dynamically generate slots at runtime, giving us even more flexibility in how we write our components:
<!-- Child.vue --><template><div v-for="step in steps" :key="step.id"><slot :name="step.name" /></div></template>
Each of these slots works like any other named slot. This is how we would provide content to them:
<!-- Parent.vue --><template><Child :steps="steps"><!-- Use a v-for on the template to provide contentto every single slot --><template v-for="step in steps" v-slot:[step.name]><!-- Slot content in here --></template></Child></template>
We pass all of our steps
to the Child
component so it can generate the slots. Then we use a dynamic directive argument v-slot:[step.name]
inside a v-for
to provide all of the slot content.
When might you need something like this?
I can imagine one use case for a complex form generated dynamically. Or a wizard with multiple steps, where each step is a unique component.
I'm sure there are more!
The script setup sugar in Vue 3 is a really nice feature, but did you know you can use it and a regular script
block?
<script setup>// Composition APIimport { ref } from 'vue';console.log('Setting up new component instance');const count = ref(0);</script><script>// ...and the options API too!export default {name: 'DoubleScript',};</script>
This works because the script setup
block is compiled into the component's setup()
function.
There are a few reasons why you might want to do this:
inheritAttrs
. For these you can also use defineOptions
.setup()
is run for every component, if you have code that should only be executed once, you can't include it in script setup
. You can put it inside the regular script
block, though.script
block.Check out the docs for more info
In script setup
you can define a custom directive just by giving it a camelCase name that starts with v
:
<script setup>const vRedBackground = {mounted: (el) => el.style.background = 'red',}</script><template><input v-red-background /></template>
With the Options API:
export default {setup() {// ...},directives: {redBackground: {mounted: (el) => el.style.background = 'red',},},}
Registering a directive globally:
const app = createApp({})// make v-focus usable in all componentsapp.directive('redBackground', {mounted: (el) => el.style.background = 'red',})
And since a very common use case is to have the same logic for the mounted
and updated
hooks, we can supply a function instead of an object that will be run for both of them:
<script setup>const vRedBackground = (el) => el.style.background = 'red';</script><template><input v-red-background /></template>
You can find more info on custom directives in the docs.
Custom error pages are a great way to give your users a better experience when something goes wrong.
In this article, we'll go over how to create them in Nuxt.
Check it out here: Custom Error Pages in Nuxt
We’ve got our database filled with data — now we need to fetch that data.
Prisma gives us a ton of flexibility and power in how we do that.
We can easily make complex queries, all while keeping everything typesafe — you just have to know a couple tricks to get it to work correctly.
In this fourth article in the series, I'll show you how to get data from your database using Prisma.
Check it out here: Prisma with Nuxt: Getting Data with Prisma (4 of 5)
"The greatest performance improvement of all is when a system goes from not-working to working." — John Ousterhout
The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨🔬
Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.
You can get an element to render anywhere in the DOM with the teleport
component in Vue 3:
<template><div><div><div><teleport to="body"><footer>This is the very last element on the page</footer></teleport></div></div></div></template>
This will render the footer
at the very end of the document body
:
<html><head><!-- ... --></head><body><div><div><div><!-- Footer element was moved from here... --></div></div></div><!-- ...and placed here --><footer>This is the very last element on the page</footer></body></html>
This is very useful when the logic and state are in one place, but they should be rendered in a different location.
One typical example is a notification (sometimes called a toast).
We want to be able to display notifications from wherever inside of our app. But the notifications should be placed at the end of the DOM so they can appear on top of the page:
<!-- DogList.vue --><template><div><DogCardv-if="dogs.length > 0"v-for="dog in dogs":key="dog.id"v-bind="dog"/><teleport to="#toasts"><!-- Show an error notification if we have an error --><Toastv-if="error"message="Ah shoot! We couldn't load all the doggos"></teleport></div></template>
Which will render this to the DOM:
<html><head><!-- ... --></head><body><div id="#app"><!-- Where our Vue app is normally mounted --></div><div id="toasts"><!-- All the notifications are rendered here,which makes positioning them much easier --></div></body></html>
Here's the complete documentation: https://vuejs.org/api/built-in-components.html#teleport
Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.
p.s. I also have a bunch of products/courses: