Weekly Vue News #144 - Simpler Two-Way Binding in Vue With defineModel

Weekly Vue News #144 Simpler Two-Way Binding in Vue With defineModel View online Hi 👋 You can now view some statistics about this newsletter at this page. I love to develop such features and be as transparent as possible. Have a nice week ☀️ Vue 📕 The Future of Vue: Vapor Mode 👉🏻 Learn how Vapor Mode elegantly enhances app efficiency and how to get started trying it out today. 📕 Better Stores in Pinia with Vue3 — Global Stores, Nesting and Accessing Vue Router in Pinia 👉🏻 This article offers some practical tips to migrating from Vuex to Pinia. 🛠️ vue-i18n-next 👉🏻 Vue I18n is internationalization plugin of Vue.js. 👉🏻 It easily integrates some localization features to your Vue.js application. 🛠️ TresJS 👉🏻 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: 1<script setup lang="ts"> 2 const props = defineProps(['modelValue']) 3 const emit = defineEmits(['update:modelValue']) 4</script> 5 6<template> 7 <input 8 :value="modelValue" 9 @input="emit('update:modelValue', $event.target.value)" 10 /> 11</template> 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> 4 5<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. Nuxt 📕 Dynamic Pages and Route Params in Nuxt 3 👉🏻 Nuxt 3 routing builds on the functionality of Nuxt 2 by giving you more ways than ever before to express your dynamic routes. 📕 Nuxt Islands 👉🏻 The NuxtIsland component offers the capability to fully render your component on the server without shipping any JavaScript to the client. 📹 Nuxt's Server-Only Components Should Be on Your Radar 👉🏻 Learn how they optimize web performance by eliminating client-side rendering and reducing hydration, a feature inspired by React's Server Components. 🛠️ nuxt-module-intellisense 👉🏻 Intelligent Nuxt Module autocompletes for VS Code. 🛠️ Usage-based Spaghetti 👉🏻 Try Stripe's usage-based billing in this demo built with Nuxt 3 and hosted on Vercel. 📅 Events Vueconf US 2024 (22 - 24 May 2024, New Orleans, US) PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 What is Vite (and why is it so popular)? 👉🏻 This article explains what Vite is, and why is everyone choosing and loving it so much. 📕 The Two-Tree Problem with Styling on the Web 👉🏻 One of the root problems with web styling is the "two-tree problem". 👉🏻 It is needed to maintain separate, interconnected trees for document structure (HTML) and styles (CSS). 📕 I Wrote My Own Editor 👉🏻 This author was frustrated with bugs, slowness, and limited debugging features in VSCode and wrote his own editor. 🛠️ franken/ui 👉🏻 Franken UI is a collection of copy-pastable components that are HTML-first and framework agnostic. 🛠️ Announcing Quill 2.0 👉🏻 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. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany