The CORRECT Tag Order in your Vue SFCs

One thing that makes Vue special are it's SFCs - Single File Components. But which is the best order of the three tags - script, template and styles - inside the components? #vue #nuxt #sfc --- Links and Resources 🔗 Evan's Tweet https://x.com/youyuxi/status/1427982990957846529 🔗 CAPI OAPI Comparison https://github.com/vuejs/docs/blob/main/src/guide/extras/images/composition-api-after.png 🔗 FileExplorer in CAPI https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e 🔗 Elk https://elk.zone/ 🔗 Elk Component https://github.com/elk-zone/elk/blob/main/components/command/CommandPanel.vue 📺 Multiple Components with Vue Vine https://www.youtube.com/watch?v=YHdDraNNGCk 📺 @DejaVueFm #E042 - Creating Technical Content (with Adam Jahr) https://www.youtube.com/watch?v=C30HwOSH-CU --- Chaptermarks 00:00 Intro 00:45 The Benefits of SFCs 01:06 Strong order preferences 01:16 The Traditional / OG order 02:26 The Modern order 02:24 When and why did it happen? 03:30 Benefits in bigger components (Personal Opinion) 04:35 Example based on the CAPI OAPI Comparison 05:35 Another example - An Elk component 06:35 What is the BEST order? 07:36 Split up the tags via your IDE 08:34 Wrapping up - What do you think?