Weekly Vue News #104 - Split Your SFC into Multiple Files

View and discuss online,

Weekly Vue News #104 Split Your SFC into Multiple Files

Hi 👋 No special news this week, I'm still mainly preparing for the arrival of our baby 🧑🏻‍🍼. 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 Tip: Split Your SFC into Multiple Files

Vue provides a special file format to combine the template, logic, and styling of a component in a single file. This format is called Single-File Component (SFC) also known as *.vue file.

Component.vue 1 <script setup> 2 import { ref } from 'vue' 3 const count = ref(0) 4 </script> 5 6 <template> 7 <p class="greeting">{{ count }}</p> 8 </template> 9 10 <style scoped> 11 .counter { 12 color: orangered; 13 } 14 </style>

This format is very convenient for small components, but it can become a bit overwhelming for larger components. In this case, you can split your SFC into multiple files using the scr attribute to import an external file for a language block:

Component.vue 1 <script src="./script.js"></script> 2 3 <template src="./template.html"></template> 4 5 <style scoped src="./styles.css"></style>

This approach doesn't work with the <script setup> block. Compiler macros like defineProps or defineEmits are compiler macros only usable inside <script setup>. But you can import any JavaScript/Typescript file:

Component.vue 1 <script setup lang="ts"> 2 defineProps<{ msg: string }>() 3 4 import { msg } from './script.ts' 5 </script> 6 7 <template src="./template.html"></template> 8 9 <style scoped src="./styles.css"></style>

Try it yourself:

⚡ Open Demo

I personally never needed and used this feature, but I think it's good to know that it exists. Instead, I prefer to use Composition API to extract shared logic in a separate file or split the component into multiple components.

Quote of the week

Curated Vue & Nuxt Content

📕 The Vue 3 Transition Component 101 👉🏻 This article explains how the Vue 3 Transition component works and demonstrates its usage with code examples. vueschool.io

📕 24 Time Saving Tips for Nuxt 3 👉🏻 This article is a compilation of 24 tips to help you save time and write better Nuxt apps. masteringnuxt.com

📕 A guide to Nuxt server components 👉🏻 Server components allow server-rendering individual components within your client-side apps. 👉🏻 @danielcroe plans to "keep this one up-to-date, as this is an area under active development" roe.dev

📕 Improving Performance of Nuxt apps with Partytown 👉🏻 Partytown is a JS library that helps relocate resource-intensive scripts (often third-party scripts) into web worker and off the main thread. dev.to

🛠️ TOAST UI Grid 👉🏻 A powerful MIT-licensed grid-style control for the display, editing, and management of data. 👉🏻 Can be used with Vanilla JS but there are also wrappers for Vue and React. ui.toast.com

Fun

Curated Web Development Content

📕 5 Inconvenient Truths about TypeScript 👉🏻 1. TypeScript won't save you from JavaScript 👉🏻 2. TypeScript adds complexity 👇🏻 Read more at: oida.dev

📹 Principles for Scaling Frontend Application Development 👉🏻 The CTO of Vercel recently held a talk about building scalable frontend apps. 👉🏻 He talks about principles such as making code easy to delete, migrating incrementally, etc. youtu.be

📕 Build Times and Developer Productivity 👉🏻 The takeaway is that even modest improvements to build times are helpful. newsletter.abinoda.com

📕 Developer workflow tips no one tells you about 👉🏻 Computer setup 👉🏻 Command-line-related things 👉🏻 Technical but non-CS advice 👉🏻 Potpourri www.justinjoyce.dev

📕 TypeScript and the dawn of gradual types 👉🏻 How static typing made it into the JavaScript world 👉🏻 What TypeScript offers 👉🏻 Some alternative approaches 👉🏻 The possibility of adding type annotations to JavaScript itself github.com

📕 How to give presentations and demos your teammates will love 👉🏻 This article introduces the Problem-Agitate-Solution framework, which is used to give great presentations. 👉🏻 It helps give presentations that "wow" your teammates. careercutler.substack.com

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via Facebook Twitter LinkedIn

Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany