Weekly Vue News #155 - Enforce Section Order & Component API Style

Weekly Vue News #155 Enforce Section Order & Component API Style View online Hi 👋 I migrated this newsletter to a self-hosted instance of listmonk. This allows me to remove most of the custom code I wrote for this newsletter, such as subscriber and campaign management and analytics. Have a lovely week ☀️ Vue 📕 Make Your Components Easier to Think About 👉🏻 Michael Thiessen shares some ways you can make your Vue code easier to think about, so you're less confused and can actually get stuff done. 📕 Best Vue developer tools for 2024 👉🏻 In 2024, the Vue.js ecosystem continues to thrive with an array of powerful tools designed to streamline development and enhance productivity. 📕 Volar 2.0 👉🏻 This article will introduce you to the improvements and development experiences brought by Volar 2.0, which is the official the official Vue.js VSCode extension . 🎧 Future of Vue.js 👉🏻 Evan You talks about ideas for Vue 4, features for Vue 3.5 and answers some Q&A questions. 📹 Vue vs React - Part 1 - Template Syntax and State Management 👉🏻 In this video, CJ shows how he built the same app with both Vue and React. 👉🏻 He focuses on comparing the syntax of React and Vue and also how each manages state updates. 🛠️ Vaxee 👉🏻 A simple and easy-to-use library for Vue 3 to manage the state of your application. 🛠️ Vue 3 Signature Pad 👉🏻 A Vue 3 based smooth signature drawing component. 🔥 Vue Tip: Enforce Section Order & Component API Style Daniel Kelly recently shared two interesting ESLint rules on X. Let's start with vue/component-api-style which aims to make the API style you use to define Vue components consistent in your project. By default it only allows script setupscript setup and Composition API. The rule would mark the following code as an error: 1<script> 2export default { 3 /* ✗ BAD */ 4 data() { 5 return { 6 msg: 'Hello World!', 7 // ... 8 } 9 }, 10 // ... 11} 12</script> The second rule is vue/block-order which warns about the order of the top-level tags, such as scriptscript, templatetemplate & stylestyle The rule would mark the following code as an error as by default scriptscript or templatetemplate need to be on top-level: 1<!-- ✗ BAD --> 2<style>/* ... */</style> 3<script>/* ... */</script> 4<template>...</template> 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📕 Upgrading to Nuxt 4 👉🏻 This article walks through the changes, one by one, so you can make the transition to Nuxt 4 today. 📹 Caching Data With Nuxt (client-side) 👉🏻 John explains how you can cache your data on the client in your Nuxt app. 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 How to Annul Promises in JavaScript 👉🏻 JavaScript doesn't natively support canceling Promises. 👉🏻 You can use `Promise.withResolvers()` or `AbortController` to create cancellable tasks. 📕 What's Coming Next for ESLint 👉🏻 At eleven years old, ESLint is preparing itself for another eleven years by continuing to evolve into a language-agnostic linter that anyone can write plugins for. 📕 Web Performance Guide 👉🏻 A helpful collection of over 20 plain language guides. 👉🏻 Covering things such as working with the different core web vitals, optimization techniques, critical CSS, metrics, user monitoring, and more. 🛠️ AI CSS Animations 👉🏻 An AI tool that creates CSS animations. 👉🏻 You can describe the animation you want and the tool will generate the code. 👉🏻 You can also edit the animation after it is created. 🛠️ Code Galaxies 👉🏻 An interactive visualization of language packages, like NPM and PyPI, as explorable galaxies. 😂 Fun Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany