Weekly Vue News #122 - Use a Head Manager

Weekly Vue News #122

Use a Head Manager

Hi 👋

Good news: Last week, I released the new version of CodeSnap.dev. It's a major release with a lot of new features. I'm excited to see what you think about it.

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

📕 How to Test Vue Composables

👉🏻 This article helps you gain a better understanding of how to test a composable in Vue.

dev.to

📕 Difference Between UseCases in Watcher And Computed in Vue 3

👉🏻 "In Vue 3, both computed properties and watchers allow you to react to changes in reactive data, but they have distinct purposes and behaviors."

blog.stackademic.com

📕 Building a Vue.js composable for handling Feature Flags

👉🏻 This article will guide you through creating your own composable to help you quickly manage the feature flags.

dev.to

🛠️ Float UI

👉🏻 Float UI is an open-source and free Tailwind UI library for HTML, React, Vue, and Svelte, with production-ready templates.

www.floatui.com

Nuxt

📕 Quick guide to add websocket to Nuxt 3

👉🏻 This concise article explains how to use Websockets in Nuxt 3.

dev.to

📹 Uncovering Nuxt's Hidden Gems

👉🏻 You'll unearth some of the lesser-known yet immensely valuable features of the Nuxt.js framework.

www.youtube.com

🛠️ h3

👉🏻 A minimal h(ttp) framework built for high performance and portability.

👉🏻 Works perfectly in serverless, workers, and Node.js

👉🏻 It's used under-the-hood in Nuxt 3

github.com

📅 Events

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

💬 Quote of the week

🔥 Vue Tip: Use a Head Manager

Unhead is a framework-agnostic document head manager that you can use to manage page metadata like the title in your Vue application. It's used in the Nuxt core and is part of the UnJS ecosystem.

Installation

First, you need to install the @unhead/vue dependency to your project:

            1 npm install @unhead/vue

Next, you need to register the Vue plugin:

main.ts

            1 import { createApp } from 'vue'
              2 import { createHead } from '@unhead/vue'
              3 
              4 const app = createApp()
              5 
              6 const head = createHead()
              7 app.use(head)
              8 
              9 app.mount('#app')

Usage

Now, you can use the useHead composable in your components, for example, to set the page title:

Component.vue

            1 <script setup lang=ts>
              2 import { useHead } from '@unhead/vue'
              3 
              4 useHead({
              5   title: 'My Portfolio Website'
              6 })
              7 </script>

Alternatively, you can use the <Head> component to set the page title:

Component.vue

            1 <script lang="ts" setup>
              2 import { Head } from '@unhead/vue/components'
              3 </script>
              4 
              5 <template>
              6   <Head>
              7     <title>My Portfolio Website</title>
              8     <meta name="description" content="My Portfolio Website Description">
              9   </Head>
              10 </template>

And that's it. You can find more information in the official documentation.

😂 Fun

🧑🏻‍💻 In Other News

📕 How to scale a large codebase

👉🏻 The Vercel team suggests using Turborepo for monorepo management.

👉🏻 It emphasizes the importance of feature flags for safe code release, incremental builds for quick iteration, and more.

vercel.com

📕 Developing an effective CI/CD pipeline for frontend apps

👉🏻 This article dives into best practices for an effective CI/CD pipeline

👉🏻 Including making small, frequent changes, using feature flags, having rollback strategies, and more.

blog.logrocket.com

📕 Modern frontend testing with Vitest, Storybook, and Playwright

👉🏻 A look at why frontend testing is worth the effort, why it possibly had a bad reputation in the past, and shares an approach to making tests easy to write and maintain.

www.defined.net