Vue Quick Tip #01: SFC Structure

If you've been writing SFC (Single File Components) in Vue you're probably familiar with this structure:

<template></template>

<script></script>

<style></style>

Which is totally right and if you're comfortable using it, it's 100% ok.

But if you think about it, when you're working on a component, you're rarely working with the script and style tags at the same time, right?

You're always working between template/style or template/script, rarely ever script/style.

That's why I recommend you start using this structure instead:

<script></script>

<template></template>

<style></style>

This way you have less scroll distance between your targets and the template works as a clear visual "wall" between your script and your style. Once you get used to it, you won't want to go back!

That's my quick tip for today, follow me on twitter if you enjoyed it :)

Have a good day!