Join 11,067 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!
You can now listen to the trailer for our new podcast, Deja Vue.
Me and Alexander Lichter (Nuxt core team) have joined forces to create a podcast all about Vue and Nuxt.
We'll be releasing weekly, and topics will include:
We're still figuring this thing out, so any feedback at all is helpful. Topic ideas, format ideas, or just tips on how to make it a better listening experience are all welcome!
Here are all the links:
Enjoy the podcast and the tips!
— Michael
SVGs can be reactive components, too.
After all, they're HTML elements just like div
, span
, and button
.
Here's an SVG component that has a prop to change it's fill colour:
<template><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" :fill="color" /></svg></template><script setup lang="ts">defineProps<{color: string}>();</script>
I'm sure you can build some pretty wild things if you dig into different SVG elements and attributes.
Scoped slots and SVGs? Why not...
Here's a demo if you want to see this example in action.
Instead of passing in tons of props to a component individually:
<template><User:name="user.name":profile="user.profile":twitter="user.twitter":location="user.location":framework="user.framework === 'Vue' ? 'Number one' : 'Number two'"/></template>
You can take a whole object and have all of its properties automatically bound to the component as props:
<template><User v-bind="user"/></template><script setup>import User from './User.vue';const user = {name: 'Anakin',profile: 'ani-profile.jpg',twitter: '@TatooineJedi',location: 'Undisclosed',framework: 'Vue',};</script>
This also works with v-on
if you have a lot of event handlers:
<template><User v-on="userEventHandlers"/></template><script setup>import User from './User.vue';const userEventHandlers = {updateName(newName) {// ...},deleteUser() {// ...},addFriend(friend) {// ...}};</script>
Here, the name of each method needs to match the name of the event. eg. updateName
is called to handle the update-name
event.
You can use reactive
to make the switch from the Options API a little easier:
// Options APIexport default {data() {username: 'Michael',access: 'superuser',favouriteColour: 'blue',},methods: {updateUsername(username) {this.username = username;},}};
We can get this working using the Composition API by copying and pasting everything over using reactive
:
// Composition APIsetup() {// Copy from data()const state = reactive({username: 'Michael',access: 'superuser',favouriteColour: 'blue',});// Copy from methodsupdateUsername(username) {state.username = username;}// Use toRefs so we can access values directlyreturn {updateUsername,...toRefs(state),}}
We also need to make sure we change this
→ state
when accessing reactive values, and remove it entirely if we need to access updateUsername
.
Now that it’s working, it’s much easier to continue refactoring using ref
if you want to — or just stick with reactive
.
Trying to manage database schemas alongside your Nuxt app types can be a challenge.
But with Prisma, most of these problems go away.
It handles all of the boilerplate and coordination, so you just write one single schema that’s used in your database and in your TypeScript app.
In this article I show you how to create your Prisma schema.
Check it out here: Prisma with Nuxt 3: Creating the Prisma Schema (2 of 5)
"“That hardly ever happens” is another way of saying “it happens”." — Douglas Crockford
If...Else
ComponentThe 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.
Ever thought about making an If...Else
component in Vue, despite having v-if
, v-else
, and v-else-if
?
Here's a quirky experiment that explores this idea:
<If :val="mainCondition"><template #true>Render if true</template><Else :if="false">Else if condition</Else><template #false>Otherwise render this</template></If>
This setup uses Compound Components, default and named slots, and even render functions to achieve a flexible If...Else
logic.
The If
component checks a condition and decides which slot (true
, false
, or Else
) to render.
The Else
component — a Compound Component — allows for an else if
condition.
I have a detailed write up about this component on my blog.
Here's a simplified version for a cleaner API:
<If :val="condition"><True>Truth</True><Else :if="elseCondition">Else slot</Else><False> What up false branch! </False></If>
This experiment is a fun way to dive deep into Vue's features like slots, reactivity, and component communication. While it might not replace the built-in directives, it's a great learning exercise and could inspire other creative component designs.
Check out the demo and maybe even try implementing your version: Vue If...Else Component Demo
Remember — experimenting with "weird" ideas is a fantastic way to deepen your understanding of Vue!
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components