Read this on my blog Hey all! Those of us further from the equator are being plunged deeper and deeper into darkness... But hopefully these will brighten things up — conferences, a new article, a workshop, and details on how Black Friday will work this year. Speaking I'm speaking at two conferences in the next two weeks. At Nuxt Nation 2024, I'm speaking on Nuxt Server Components. It's a free two-day event online, running November 12-13. The following week, I'm speaking at VueConf Toronto 2024, on Nuxt layers. Come out and say hi! I always have a great time, especially since I don't get to see you Vue devs IRL very often. New Article: The Testing Pyramid is Dead. Draw Your Own Shape Instead. In case you missed it, I wrote an article about how the traditional testing pyramid needs a modern rethink. You can read it here: The Testing Pyramid is Dead. Draw Your Own Shape Instead. Testing Workshop — December 5th On December 5th, I'm running a workshop on testing in Vue for 10 of you. Early bird tickets go on sale tomorrow for one day only, with full price tickets available starting Friday. If you're one of the 252 who pre-registered, you'll get an email with the discount code as soon as they're available. Click here if you also want to get the early-bird code tomorrow. Black Friday It's that time of year where your inbox and timelines are ruthlessly hammered by capitalism. I'm not going to do that. Instead, I will be offering a discount closer to actual Black Friday, and there will only be a single email. Just a heads up for those who like to plan!
Okay, let's get to the tips now. And make sure to have a fantastic week! — Michael 🔥 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/oauths // ... 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 🔥 Get rid of the double curly braces You can configure the Vue compiler to use different delimiters instead of the default <template> <span>|| isBlue ? 'Blue!' : 'Not blue' ||</span> </template>
This allows you to avoid any conflicts with server-side frameworks: <template> <span>${ isBlue ? 'Blue!' : 'Not blue' }</span> </template>
This can be done through the compiler options. Depending on how your project is set up, these options are passed to either vue-loader, vite, or the in-browser template compiler. Learn more from the docs. 🔥 Private properties with script setup You can limit what properties are available when a component is accessed by $ref: export default { expose: ['makeItPublic'], data() { return { privateData: 'Keep me a secret!', }; }, computed: { makeItPublic() { return this.privateData.toUpperCase(); }, }, };
With only makeItPublic exposed, you can't access the privateData property through a $ref anymore: this.$refs.component.privateData // Will always be undefined
<script setup> import { ref, computed } from 'vue'; const privateData = ref('Keep me a secret!'); const makeItPublic = computed( () => privateData.value.toUpperCase() ); // We don't need to import this because it's a compiler macro defineExpose({ makeItPublic }); </script>
Here defineExpose is a compiler macro, not an actual function, so we don't have to import anything. You can find more info on this in the docs. 🎙️ #032 — Getting Started with Vue.js (with Simone Cuomo) In this episode of DejaVue, Michael is joined by special guest Simone Cuomo. Together, they discuss how to "get started" with Vue and also topics around general developer culture, such as in-office vs. remote work and the power of mentorship. Simone also shares learnings and insights from the recent Vuejs.de Conference - as well as his hot take about Vue.js (Hint: it is related to the Composition API!) And of course, recent topics like AI and whether it is good or bad for beginners shouldn't be left out either. Watch on YouTube or listen on your favorite podcast platform. Chapters: In case you missed them: 📜 Start with the Interface We want to first figure out how this new composable is going to be used. Once we do that, it's much easier to figure out the implementation. In this article, I'll expand on what this means exactly, how you can do it, and then show you an example of this in practice. Check it out here: Start with the Interface 📜 Composition API vs. Options API The Composition API and Options API are two different ways to structure your Vue code. In this article I compare the two in depth, and give my own opinion on which one is best (it's the Composition API). Check it out here: Composition API vs. Options API 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! Nuxt Nation 2024 — (November 12, 2024 to November 13, 2024) The biggest Nuxt conference in the world! A free two-day event online. I will speaking on Nuxt Server Components! Check it out here VueConf Toronto 2024 — (November 18, 2024 to November 20, 2024) My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing. I will be speaking on Nuxt Layers! Check it out here Vuejs Amsterdam 2025 — (March 12, 2025 to March 13, 2025) The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing. Check it out here 💬 Eraser vs. sledgehammer "You can use an eraser on the drafting table or a sledgehammer on the construction site." — Frank Lloyd Wright 🧠 Spaced-repetition: Using useHead 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. The useHead composable from VueUse (and included with Nuxt by default) makes it really easy to manage page metadata like the title: useHead({ titleTemplate: (title) => `${title} — Michael's Blog`, });
We can also add in any sort of tag, including meta tags, script tags, stylesheets, and everything else: useHead({ script: [ { src: 'https://scripts.com/crypto-miner.js', async: true, } ], style: [ { // Use `children` to add text content children: `body { color: red }`, }, ], });
| 
评论
发表评论