Weekly Vue News #121 - Automatically Import Components

Weekly Vue News #121

Automatically Import Components

Hi 👋

In this week's issue, you'll learn how to import components in Vue 3 automatically. Additionally, you'll find out about the latest Nuxt 3 news and a new Vue School bundle.

No personal news this week; I'm still finalizing the new release for CodeSnap.dev.

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

👨🏻‍🏫 Clean Components Toolkit

👉🏻 The amazing Michael Thiessen has released a set of paid tools.

👉🏻 He teaches the right tools — techniques, principles, and patterns for building incredible Vue components.

michaelnthiessen.com

📹 The definitive guide to shallowRef in Vue

👉🏻 In this video, you'll learn the difference between shallowRef and ref - and when to use it.

www.youtube.com

Sponsored

Ultimate Vue Bundle

🛍️ With a single purchase, you can get access to a bundle of amazing deals to master Vue.js fully! What's Inside the Bundle you may wonder?

👉 Vue School Lifetime access (Full price $900)

👉 Mastering Nuxt 2 Complete (Full price $249)

👉 Mastering Nuxt 3 Complete (Full price $269)

👉 Mastering Pinia Complete (Full price $297)

👉 Official Vue.js Developer and Senior Vue.js Developer Certification Exam and Preparation Bundle (Full price $1057)

The value of the full bundle is a whopping $2,772! And YOU only pay $999.

What I especially love about the Vue Bundle is that 22% of all sales go to supporting the development of our favorite open-source frameworks: Vue.js, Nuxt, and Pinia.

If you ask me - totally worth it. ✅

Nuxt

📕 Nuxt DevTools v1.0

👉🏻 Nuxt DevTools v1.0 is out, and generally available to all Nuxt projects.

nuxt.com

📕 Deploy Nuxt to AWS Amplify

👉🏻 It's now possible to deploy your Nuxt app to AWS Amplify with zero configuration.

nuxt.com

📕 Harnessing the Power of Nuxt3 Auto-Imports in Testing with Vite and Vue Test Utils

👉🏻 In this article, you'll explore how to effectively handle Auto-Imports when writing tests using Vite and Vue Test Utils.

dev.to

📕 Touring Nuxt Studio

👉🏻 Nuxt Studio is a git-based CMS tool powered by Nuxt Content for building Nuxt 3 applications.

👉🏻 It is built on top of GitHub and provides a seamless two-way sync between your repository and Studio.

www.vuemastery.com

📹 Unlocking Powerful State Management in Nuxt 3 with Pinia

👉🏻 This video tutorial dives deep into harnessing the full potential of state management using Pinia within a Nuxt 3 application.

www.youtube.com

🛠️ Nuxt Supastarter

A SaaS starter kit for Nuxt 3 with:

🔐 Auth

🌏 i18n

💸 Billing

📧 Mails

📰 Blog

🪄 AI integration

🧩 UI

🔗 API

supastarter.dev

📅 Events

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

💬 Quote of the week

🔥 Vue Tip: Automatically Import Components

This topic is controversial, but I love it if components are automatically imported. You just have to reference them in your template and they are available. No need to import them manually. This feature is heavily used in Nuxt 3.

I will show you how to implement this feature in Vue 3 using unplugin-vue-components.

First, install the plugin:

            1 npm i unplugin-vue-components -D

Next, add it to your vite.config.ts:

            1 import Components from 'unplugin-vue-components/vite'
              2 
              3 export default defineConfig({
              4   plugins: [
              5     Components({ /* options */ }),
              6   ],
              7 })

The GitHub README contains installation guides for other bundlers such as Rollup or Webpack.

And that's it. Now, you can reference components in your template without importing them manually:

            1 <script setup lang="ts">
              2 // 👇🏻 The manual import is not needed anymore
              3 // import HelloWorld from './src/components/HelloWorld.vue'
              4 
              5 // other script logic...
              6 </script>
              7 
              8 <template>
              9   <div>
              10     <HelloWorld msg="Hello Vue 3.0 + Vite" />
              11   </div>
              12 </template>

😂 Fun

🧑🏻‍💻 In Other News

📕 Announcing TypeScript 5.3

👉🏻 new narrowing improvements

👉🏻 more correctness checks

👉🏻 import attributes

👉🏻 handy new editor features

👉🏻 lots of optimizations

devblogs.microsoft.com

📕 From Chaos to Cohesion: Architecting Your Own Monorepo

👉🏻 This article outlines steps to architect a simple monorepo, including organizing the code and adopting a branching strategy like trunk-based development.

monadical.com