🔥 (#124) Building a (Totally) Unnecessary If/Else Component in Vue
Hey!
Today I've got a super fun article for you — at least, I had tons of fun writing it.
I was hoping to publish this one several weeks ago, but my blog had other ideas. Now, it's fully converted over to Nuxt 3 and I can finally publish this one for you!
Go check it out: Building a (Totally) Unnecessary If/Else Component in Vue
There are still a ton of things I'd like to fix up and optimize on the blog, so if you notice anything please let me know!
Now I can return my focus to Clean Components.
Hopefully I'll have some more news for you on that front in the next week or so, assuming that no other emergencies come up 😅.
Have a wonderful week, and enjoy the article and these tips!
— Michael
Vue Tips Collection
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 115 awesome tips, as well as a daily email to get your creative juices flowing.
🔥 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.
🔥 Flexible Arguments
Sometimes we have a ref that we want to use with our composable. Sometimes we just have the raw data.
Wouldn't it be nice if it didn't matter what we already had? Then we could use our composables and it would just work?
Here's an example using the useTitle composable from VueUse:
// We have a ref already const titleRef = ref('This is the title of the page'); useTitle(titleRef); // We just have the string const title = 'This is the title of the page'; const titleRef = useTitle(title);
We can do this by implementing the Flexible Arguments pattern:
export function useTitle(maybeRef) { const titleRef = ref(maybeRef); // Use titleRef in the composable }
The ref function will either create a ref for us, or return a ref if we give it one.
This means that we can pass it either type and we know we'll get a ref back.
The opposite is true with the unref function. If we need to use a raw primitive value rather than a ref in our composable, we can use unref to achieve a similar result.
export function useTitle(maybeRef) { const titleString = unref(maybeRef); // Use titleString in the composable }
🔥 Nuxt's Powerful Built-In Storage
Nitro, the server that Nuxt 3 uses, comes with a very powerful key-value storage system:
const storage = useStorage(); // Save a value await storage.setItem('some:key', value); // Retrieve a value const item = await storage.getItem('some:key');
It's not a replacement for a robust database, but it's perfect for temporary data or a caching layer.
One great application of this "session storage" is using it during an OAuth flow.
In the first step of the flow, we receive a state and a codeVerifier. In the second step, we receive a code along with the state again, which let's us use the codeVerifier to verify that the code is authentic.
We need to store the codeVerifier in between these steps, but only for a few minutes — perfect for Nitro's storage!
The first step in the /oauth endpoint we store the codeVerifier:
// ~/server/api/oauth // ... const storage = useStorage(); const key = `verifier:${state}`; await storage.setItem(key, codeVerifier); // ...
Then we retrieve it during the second step in the /callback endpoint:
// ~/server/api/callback // ... const storage = useStorage(); const key = `verifier:${state}`; const codeVerifier = await storage.getItem(key); // ...
A simple and easy solution, with no need to add a new table to our database and deal with an extra migration.
This just scratches the surface. Learn more about the unstorage package that powers this: https://github.com/unjs/unstorage
📜 Prisma with Nuxt 3: Seeding the Database with Dummy Data (3 of 5)
A database is useless without any data.
But with Prisma, adding in seed data (or "dummy" data) is extremely easy.
In this article we'll cover:
- How to generate our Prisma client
- How to update our Supabase database with migrations
- How to add in dummy data
Check it out here: Prisma with Nuxt 3: Seeding the Database with Dummy Data (3 of 5)
💬 Stay in bed
"Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging Monday's code." — Christopher Thompson or Dan Salomon
🧠 Spaced-repetition: Slot Transitions
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.
It's possible to use transitions with slot content, but there's one key to making them work smoothly:
<!-- SlotWithTransition.vue --> <template> <!-- Creating the base slot with a transition --> <transition name="fade" mode="out-in"> <slot></slot> </transition> </template>
Always make sure that content provided to the slot is keyed.
This helps Vue keep track of when to trigger the transition:
<template> <SlotWithTransition> <div v-if="isThisTrue" key="true"> This is true. </div> <div v-else key="false"> This is false. </div> </SlotWithTransition> </template>
p.s. I also have four courses: Vue Tips Collection, Mastering Nuxt 3, Reusable Components and Clean Components
评论
发表评论