Order of Vue Components

The Vue 2 docs have it as:

<template>
</template>

<script>
</script>

<style>
</style>

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>

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>

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>

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!)

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.

    Cheers!

  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.