Weekly Vue News #148 - How I Write Class & Style Bindings

Weekly Vue News #148 How I Write Class & Style Bindings View online Hi 👋 I switched from Netlify to Render to build & deploy my applications because it's a cheaper solution. This newsletter costs ~$70 per month and I usually don't have a paid sponsorships which means it generates $0 in revenue each month. If you are thinking about starting a newsletter yourself, be aware that it will cost you a lot of time and money and you probably won't make any money from it for a long time. Have a nice week ☀️ Sponsored Get Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Vue 📕 Implementing Clean Architecture in a Vue.js Application 👉🏻 Learn how to implement Clean Architecture in a Vue.js application, focusing on the authentication module as an example. 📕 How to Structure Vue Projects 👉🏻 In this blog post, the author explores various structures suited to Vue projects of differing sizes. 📕 Introducing a new router for Vue 👉🏻 Kitbag Router is an alternative type safe router for Vue.js. 📹 Pinia Disasterclass 👉🏻 In this example-driven talk, Eduardo explains some of the bad practices he has seen in Pinia as well as the good ones that should have been used instead. 🛠️ VueXYZ 👉🏻 A collection of Vue composables for creative coding. 👉🏻 VueXYZ doesn't render anything for you. 👉🏻 You may decide to take the data and render it to canvas or SVG, or you might use it to drive animations, or anything else. 🔥 Vue Tip: How I Write Class & Style Bindings Styling your components in Vue.js can be done in multiple ways. One of the most common ways is to use the classclass attribute, especially if you are using a CSS framework like Tailwind. In combination with v-bindv-bind you can dynamically assign classes to your components. The same goes for the stylestyle attribute, which allows you to apply inline styles to your components. I prefer the combination of the class attribute in combination with :class:class to apply a list of classes as an array: 1<script setup lang="ts"> 2interface Props { 3 isDisabled?: boolean 4 error?: unknown 5} 6const props = defineProps<Props>() 7 8const disabledClasses = computed(() => props.isDisabled ? 'cursor-not-allowed' : '') 9const errorClasses = computed(() => props.error ? 'text-danger' : '') 10</script> 11 12<template> 13 <div class="border p-4" :class="[errorClasses, disabledClasses]"> 14 <slot /> 15 </div> 16</template> The classclass attribute is an array of classes that should always be applied to the element. The classes bound via :class:class are computed properties that are dynamically evaluated and added to the element. This way, I can easily distinguish between classes that should always be applied and classes that are conditionally applied. You can also toggle a class inside the list of classes based on a condition: 1<template> 2 <div class="border p-4" :class="[isDisabled ? disabledClasses : '', errorClasses]"> 3 <slot /> 4 </div> 5</template> Alternatively, you can use the object syntax to apply classes based on a condition: 1<template> 2 <div class="border p-4" :class="[{ disabledClasses: isDisabled }, errorClasses]"> 3 <slot /> 4 </div> 5</template> Nuxt 📕 Getting a grip on Nuxt's auto-import functionality 👉🏻 Understanding when to use and when to avoid the auto-import magic in Nuxt. 📕 Build Nuxt authentication with Logto 👉🏻 Learn how to build a user authentication flow with Nuxt by integrating Logto SDK. 📹 State of Nuxt 2024 👉🏻 Daniel Roe looks at the current state of Nuxt and talks about the vision for Nuxt looking ahead into 2024. 📹 Store files and K/Vs in Nuxt and Nitro - Powered by unstorage 👉🏻 Reading and writing information is important for an application, be it for storage, caching or more. 👉🏻 Alexander explains how unstorage can help us there. 🛠️ Nuxt Module CLI Shortcuts 👉🏻 Inspired by Vite's CLI shortcuts, this module brings this feature to Nuxt. 📅 Events 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 📕 At some point, JavaScript got good 👉🏻 JavaScript has changed a lot since 2015, especially thanks to improvements in the ECMAScript specification. 👉🏻 Early JavaScript was difficult to work with due to issues like function-scoped variables and callback hell. 📕 Data Fetching Patterns in Single-Page Applications 👉🏻 The Asynchronous State Handler pattern improves UX in web apps by decoupling data fetching from the UI. 👉🏻 It wraps asynchronous queries with meta-queries that track the status (loading, success, error) of the data fetching process. 🛠️ Lightweight Charts 👉🏻 An easy way to display interactive charts online with HTML5. 👉🏻 It keeps web page loading speeds low and the size of the library is close to static images. 🤩 100,000 Stars 👉🏻 An interactive visualization of the stellar neighborhood created for the Google Chrome web browser. 😂 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