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:
- New releases in the ecosystem
- Deep dives on specific features or parts of Vue and Nuxt
- Guests, including well-known faces (and voices) as well as those who aren't as well known but have something interesting to say
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
Vue Tips Collection 2
Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.
Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing.
Check out Vue Tips Collection
🔥 Reactive SVG components
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.
🔥 A simpler way to pass lots of props
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.
🔥 From Options to Composition — The Easy Way
You can use reactive to make the switch from the Options API a little easier:
// Options API
export 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 API
setup() {
// Copy from data()
const state = reactive({
username: 'Michael',
access: 'superuser',
favouriteColour: 'blue',
});
// Copy from methods
updateUsername(username) {
state.username = username;
}
// Use toRefs so we can access values directly
return {
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.
📜 Prisma with Nuxt 3: Creating the Prisma Schema (2 of 5)
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)
💬 Hardly Ever Happens
""That hardly ever happens" is another way of saying "it happens"." — Douglas Crockford
🧠 Spaced-repetition: Creating an If...Else Component
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.
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
评论
发表评论