Weekly Vue News #172

Speed Up Vue 3 Development With VS Code Snippets

Hi 👋

VueConf Toronto is happening this week, and I'm wishing everyone attending an amazing time filled with inspiration and new insights!

For this issue, I'm sharing a quick tip on using snippets in VS Code to help speed up your development workflow. Hope it comes in handy!

Enjoy this issue and have a lovely week ☀️

Vue

📕 7 Beautiful Next-Level Button Components with Vue, VueUse, and TailwindCSS*

👉🏻 This article demonstrates 7 different button designs that are both practical and look great.

👉🏻 Learn how you can implement them with Vue, VueUse, TailwindCSS.

📹 DejaVue #E033 - Vue or React (with CJ Reynolds)

👉🏻 Alex and CJ Reynolds talk about Vue and React in this episode of DejaVue.

👉🏻 The two content creators also talk about CJ 's career path.

📹 Vue Architecture for Scalability: Introduction to Layered Design

👉🏻 This introductory video reviews managing complexity in Vue applications using a layered architecture approach.

🛠️ NumberFlow

👉🏻 A component to transition, format, and localize numbers.

👉🏻 Dependency-free. Accessible. Customizable.

👉🏻 Available for Vue, React and Svelte.

🛠️ Urocissa

👉🏻 A self-hosted gallery designed to serve massive collections, capable of handling millions of images and videos.

👉🏻 It is built using Rust and Vue.

💡 Vue Tip: Speed Up Vue 3 Development With VS Code Snippets

If you are using VS Code as a code editor for Vue & Nuxt app development, I highly suggest using one of the available code snippet extensions.

I'm personally using Vue 3 VS Code Snippets.

My most used snippet is vbase-nsvbase-ns which creates a base Vue 3 file with script setupscript setup with TypeScript at the top of the file and no style block.

It provides many more useful snippets, for example vforvfor inside the template tag to create a v-forv-for statement or vwatchvwatch inside the script tag to create a watcher.

The following image shows the extension in action:

Nuxt

📕 Nuxt Going Full-Stack: How to Handle Authorization?

👉🏻 This article aims to assist you in managing authorization within your Nuxt application, thereby preventing and restricting unauthorized access to your data.

📕 Using Cache Control in Nuxt to improve Performance

👉🏻 This article introduces you to the topic of Cache Control header in Nuxt so that you can instruct the browser how it should cache certain pages to improve performance.

📕 Controlling When Components are Loaded in Nuxt*

👉🏻 Explore how to optimize your Nuxt app's performance by controlling when components load.

👉🏻 Learn about lazy components, prefetching, and making components asynchronous to enhance user experience and reduce initial load times.

📹 Create a site with Vue.js, Nuxt Studio, Nuxt Content, and Nuxt UI

👉🏻 Ferdinand and Baptiste from Nuxt Labs explore the latest updates in the Nuxt ecosystem.

👉🏻 Ferdinand kicks off with an introduction to Nuxt Labs.

👉🏻 Baptiste takes over with a live demo, showcasing how to create a website from scratch using Nuxt Studio.

📅 Events

VueConf Toronto (18 - 20 November 2024, Toronto, Canada)

Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands)

💬 Quote of the week

🧑🏻‍💻 In Other News

📕 How to roll your own auth in JavaScript & TypeScript

👉🏻 Rolling your own session-based auth in JS/TS is useful for understanding core web authentication concepts.

👉🏻This article goes over cookie management, password hashing using Argon2, and framework-agnostic examples for sign up, sign in, and sign out functions.

📕The Testing Pyramid is Dead. Draw Your Own Shape Instead

👉🏻 Lean why the testing pyramid has become less useful over time, and why we should all just draw our own shapes anyway.

📕 JavaScript's ??= Operator: Default Values Made Simple

👉🏻 A guide to using ??= in JavaScript to handle null and undefined values elegantly.

🛠️ Browser-Use

👉🏻 An open-source web automation library that allows users to interact with websites using any language model through a simple interface.