Order of Vue Components

The Vue 2 docs have it as:

<template> </template> <script> </script> <style> </style>
Code language: HTML, XML (xml)

That feels pretty good to me, as literally everything else in the file is in service of the final output HTML. Start with the goal and work down.

The Vue 3 docs have it has:

<script> </script> <template> </template> <style> </style>
Code language: HTML, XML (xml)

And that also makes sense, because it puts dependencies (e.g. import stuff) at the top like other typical *.js files.

What about script-on-the-bottom though? That could de-emphasize JavaScript in a way that’s super hip to do right now.

<template> </template> <style> </style> <script> </script>
Code language: HTML, XML (xml)

Plus, you’d think that would match the technology invention order, but you’d be wrong! JavaScript came before CSS.

<template> <!-- HTML invented 1993 --> </template> <script> // JavaScript invented 1995 </script> <style> /* CSS invented 1996 */ </style>
Code language: HTML, XML (xml)

What do I think? I have absolutely no horse in this race, it doesn’t matter, I 100% don’t care, and this is the most pointless blog post I’ve ever written. (publish!)


I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

2 responses to “Order of Vue Components”

  1. Kevin Dutton says:

    Long time Vue developer here. I attempted to switch to the new recommendation for v3 but it felt so wrong in so many ways. Currently, I write Vue 3 code using the Vue 2 template order.

    Now I can sleep better at night knowing I’m composing templates in the proper technology invention order.


  2. Alex Riviere says:

    At least we can all agree….

    Style doesn’t go at the top.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️