👉🏻 Create 3D scenes with Vue components and Three.js.
🔥 Vue Tip: Simpler Two-Way Binding in Vue With defineModel
v-modelv-model is a powerful feature in Vue that allows you to create two-way data bindings on your components. However, defining the props and emits in every component can be a bit verbose.
Since Vue 3.4 you can simplify two-way binding in Vue with the defineModeldefineModel compiler-macro, which is now the recommended way to define v-modelv-model bindings.
When you create a component that uses v-modelv-model, you need to define a prop and an emit for the value. For example, if you have a component that uses v-modelv-model to bind to a value prop, you would need to define the following:
defineModel is a new script setupscript setup macro that aims to simplify the implementation of components that support v-modelv-model. It automatically defines the modelValue prop and the update:modelValue emit for you.
Let's rewrite the above example using defineModeldefineModel:
1<script setup lang="ts">2const model = defineModel()3</script>45<template>6 <input v-model="model">7</template>8
I love this simple and clean syntax. It makes the code much easier to read and write.
My blog post contains additional information about multiple v-modelv-model bindings, modifiers and typing.
👉🏻 Learn how they optimize web performance by eliminating client-side rendering and reducing hydration, a feature inspired by React's Server Components.
👉🏻 Quill is a rich text editor that has official TypeScript support, support for multiple editors on the same page with different configurations, auto-scrolling container detection, a smoother editing experience, and more.
😂 Fun
Comments? Join the discussion about this issue in our Discord community.
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Hey! In yesterday's email I shared what I think is the key feature to making Vue components highly reusable: Scoped slots. But scoped slots are hard to grasp, and even more difficult to master. So today, we're going to make sure we understand them on a deep, intuitive level. Then, I'm going to introduce you to the magic ✨ of scoped slots. The trick is to think of them as functions. Slots are just functions We're going to recreate the functionality of slots, but we'll use a regular Javascript function that only returns HTML. This is the code we'll replicate: <!-- Parent --> < template > < div class = "modal-container" > < div class = "modal" > Content in the Parent < Child class = "mb-4" v-slot = "{ text }" > ...
If you're using Vue 3, you're probably using composables. But other than using VueUse where you can, how do you get the most out of them? Over the past few years I've been slowly putting together a list of patterns and best practices for how to write composables in the best way. I've spent hours reading the source code of VueUse (one of the best — but most time-consuming — ways to learn it). I've read articles, listened to talks, and written lots and lots of my own code. I ended up with 15 different patterns, and each one will help you to write better composables. I've condensed and put all of these composables together into a course — Composable Design Patterns. Get Composable Design Patterns now. Because this is the launch, it's on sale for 35% off until Thursday. For each of the 15 patterns in this course, you'll get: A concise overview that tells you when and how to use it, along with variations and edge cases ...
评论
发表评论