DEV Community

Jordi Enric
Jordi Enric

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)