-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Share Styling Using Wrapper Components

Ready for your weekly Vue & Nuxt dose?

‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏

Weekly Vue News #141

Share Styling Using Wrapper Components

View online

Hi 👋

I got the opportunity to raffle 3 in-person tickets for the first edition of the C3 Dev Festival in Amsterdam. You can participate here.

Have a nice week ☀️

Vue

📕 Effortless Forms w/ FormKit

👉🏻 This article on FormKit teaches you how to build forms effortlessly, with a focus on great UX.

📕 Vue Tip: Best Practices for Working with Slots

👉🏻 When developing with slots in Vue.js, it's important to follow some best practices to ensure clean and maintainable code.

📹 This is the Future of Vue

👉🏻 Matt took a look at what exactly makes Vue Vapor so exciting.

📹 Should You Use Vue Slots Over Props?

👉🏻 John talks about the pros & cons of using Vue slots instead of props.

🛠️ Pinia Colada

👉🏻 An opinionated yet flexible data fetching layer on top of Pinia.

👉🏻 It's still experimental and not ready for production.

🛠️ vue-tel-input

👉🏻 International Telephone Input with Vue.

🔥 Vue Tip: Share Styling Using Wrapper Components

Often, you'll want to apply the same styling for Vue components. Instead of defining the class over and over again, you can include the styling within a wrapper component. Let's take a look at a simple example:

1<template>
2  <div class="bg-red-500">
3    <slot />
4  </div>
5</template>

Let's move this styling to a wrapper component:

1<template>
2  <Wrapper>
3    <slot />
4  </Wrapper>
5</template>

If you are using Tailwind and have a lot of classes, this can make your code cleaner and more maintainable.

This approach is also useful to provide scoped styling for your components. You can define the styles in the wrapper component and ensure that they don't leak to the parent component:

1<template>
2  <Wrapper>
3    <slot />
4  </Wrapper>
5</template>
6
7<style scoped>
8:deep(.inner-container::after) {
9  @apply absolute top-0 -right-0.5 h-full pointer-events-none bg-gray-200 content-empty z-1;
10  mask-image: linear-gradient(to right, transparent, black);
11}
12</style>

Nuxt

📕 Build and Deploy a Global Serverless Nuxt SSR App with Cloudflare Hyperdrive and Postgres

👉🏻 Learn how to deploy a Nuxt app on Cloudflare using Neon Postgres, Drizzle, and Cloudflare Hyperdrive.

📹 Faster Nuxt Builds? 🤔 No problem ✅

👉🏻 Alexander Lichter explains how to improve build time for re-builds and deploys in Nuxt.

👉🏻 He's taking a look inside the module and figuring out how things work.

📅 Events

Vue.js Live Conference (25 - 26 April 2024, Online)

Vueconf US 2024 (22 - 24 May 2024, New Orleans, US)

vuejs.de Conf (8 - 9 October 2024, Bonn, Germany)

💬 Quote of the week

🧑🏻‍💻 In Other News

📕 A Proposal to Add Signals to JavaScript

👉🏻 A (very) early stage proposal for bringing signgals to ECMAScript/JavaScript.

📕 Fix Your Annoying Popups with the CloseWatcher API

👉🏻 The CloseWatcher API can help you build better and more accessible UIs.

🛠️ HeyForm

👉🏻 An open-source form builder that allows anyone to create engaging conversational forms for surveys, questionnaires, quizzes, and polls.

👉🏻 No coding skills required.

🛠️ Cally

👉🏻 A collection of open-source calendar components for selecting single dates or date ranges.

👉🏻 Framework-agnostic, themeable, localizable, and accessible.

😂 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