Hey! I'm busy working on the Advanced Frontend Testing workshop. If you missed it, you can check out the details here: Advanced Frontend Testing. Two things to note: - You can sign up for a single session if you only want to attend one day.
- If you're interested in a private workshop for your team, let me know and I can send you some details.
We also recorded an episode of DejaVue on Vue 3.5 — links below to specific chapters if you want to jump around. And of course, I have some tips for you to enjoy! Have a great week. — Michael 🔥 h and Render Functions When using the render function instead of templates, you'll be using the h function a lot: <script setup> import { h } from 'vue'; const render = () => h('div', {}, 'Hello Wurld'); </script>
It creates a VNode (virtual node), an object that Vue uses internally to track updates and what it should be rendering. The first argument is either an HTML element name or a component (which can be async if you want): <script setup> import { h } from 'vue'; import MyComponent from './MyComponent.vue'; const render = () => h(MyComponent, {}, []); </script>
The second argument is a list of props, attributes, and event handlers: <script setup> import { h } from 'vue'; import MyComponent from './MyComponent.vue'; const render = () => h(MyComponent, { class: 'text-blue-400', title: 'This component is the greatest', onClick() { console.log('Clicked!'); }, }, []); </script>
The third argument is either a string for a text node, an array of children VNodes, or an object for defining slots: <script setup> import { h } from 'vue'; import MyComponent from './MyComponent.vue'; const render = () => h(MyComponent, {}, [ 'Simple text node', h('span', {}, 'Text inside of a element'), ]); </script>
These render functions are essentially what is happening "under the hood" when Vue compiles your single file components to be run in the browser. But by writing out the render function yourself, you are no longer constrained by what can be done in a template. You have the full power of Javascript at your fingertips 🖐 This is just scratching the surface on what render functions and h can do. Read more about them on the official docs. 🔥 toRef default value You've been using toRef for a while, but did you know you can also supply a default value? const bank = reactive({ Rand: 3400, Egwene: 20, Matrim: 230340, Padan: -20340, }) // toRef(object, property, default) const myBankAccount = toRef(bank, 'Michael', 1000 * 1000);
Probably the easiest way to become a millionaire. 🔥 Performance Tracing Vue allows you to do performance tracing to help you debug any performance issues: const app = createApp({}); app.config.performance = true;
Once you do this, you can use the official Vue Devtools to debug your app's performance. 🎙️ #026 — Vue 3.5 Analyzed Vue 3.5 came out recently, so why not using the opportunity to dive into the features of the new minor version? Michael and Alex will do so and discuss performance improvements, SSR features and new composables in detail. If you wondered what the difference of the future Lazy Hydration and existing async components or what other features are part of the new minor, it is time to tune in ✨ Enjoy the episode! Watch on YouTube or listen on your favorite podcast platform. Chapters: In case you missed them: 📜 3 Ways to Create Inline Composables Composables are great, except that it seems we always need to create a new file for them. In this article I explore some ways we can create inline composables — no need to create new files all over the place! Check it out here: 3 Ways to Create Inline Composables 📜 Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5) So far in this series we've covered a lot on how to use Prisma in our Nuxt 3 apps. But we've left out a major piece — actually being able to modify the data in the database. A pretty crucial part of the puzzle I think! In this article I'll show you how to modify data in your database using Prisma. Check it out here: Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5) 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! Vuejs.de Conf — (October 8, 2024 to October 9, 2024) A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community. Check it out here Vue Fes Japan 2024 — (October 19, 2024) 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. 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 💬 Better Not Start "Programming is just saying "I have a meeting in an hour so better not start on this yet" to yourself until you die." — Alex Engelberg 🧠 Spaced-repetition: Don't Override Component CSS 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 can be really tempting to quickly modify a component's CSS from outside the component. If all you need is a slight modification, it seems harmless — but it's not. Let's say you have a normally blue button, but you need it to be green in this specific case. You can override the background colour from the parent component like this: <template> <Button class="green">Make this button green</Button> </template> <style> .green.button { background: green; } </style>
This does work, but it's very fragile and prone to breaking. What if the class name changes? What if the HTML of the component is modified? Anyone making changes to the button component will have no idea that this component's background colour is overridden. They won't know to update this component too. Instead, we can just extend the functionality of the button component. That way, we keep all of the code that modifies the button inside the button component. Here, we can add a is-green prop to the button component: <template> <Button is-green>Make this button green</Button> </template> <style> /* No extra styles needed! */ </style>
| 
评论
发表评论