I get Evan's rationale for placing script at the top. At the same time, I understand that the template serves much like a "spec" of _what_ the component does and the script as _how_ it does it. Therefore it makes more sense to me to place template at the top. A component's identity is ultimately what html it renders. Also I like brainstorming HTML before implementing a cmp. Makes browsing unfamiliar SFCs smoother too.
I have always preferred the script at the top, since the template is the result of what is done at the beginning, and it will not have major modifications if you are clear about what you are going to show, I think I adopted this from vue2, thank you very much for your videos, greetings from Chile.
When I was using vue 1, i did template first. But ever since Vue 2, I switched to script first because I do more work in the logic than I do in the markup. It didn't make sense to me to have the most important part of the code buried under x amount of lines under the markup. I rarely use style (only because of work) so I don't care how many lines it's buried and often forget that's even an option.
My order is: 1. script 2. template 3. style The logic behind this is pretty simple, it has to do with reading order. I write variables and functions in my script tag then I'll read/use them in my template tag Inside my template tag I'll write classes and then I'll read/use them inside my style tag. If the template was first I'll encounter variables and functions I don't know anything about it and I'll have to scoll up and down to check what does that function or where does this variable gets it's value.
I’ve always put template first. I hadn’t even noticed the ‘switch’ to script first 😂 I can see how script first aligns better with modules. Imports at the top makes a lot of sense, especially in a plain Vue project where you might be importing other components. However, I feel this argument is a lot less relevant in Nuxt with auto-imports. Template first is more similar to the structure of a classic HTML document before ‘defer’ when you had to dump all your scripts in the footer 😂
I'm still using template first cause I'm just used to it. But I'll definitely try the script first, just to see how I'm feeling about it! Great video Alex 👍💪
I have tried both and just feel more more comfortable with script at top, that's where I spent the most time too so I prefer have it top and don't scroll 😅
Template first for me. I'm trying to force myself to use script first in my personal projects, but it's so unnatural and annoying for me. As Vue is a HTML-first framework, I try to follow the same mental model I would do in a HTML project (markup first, then the script).
What is your preferred tag order? 👀
1. Template
2. Script
3. Style
❤❤❤
1. template
2. script
no styles, because Tailwind 😅
@mk2k685 true 😅
Script template
Template, script
I get Evan's rationale for placing script at the top. At the same time, I understand that the template serves much like a "spec" of _what_ the component does and the script as _how_ it does it. Therefore it makes more sense to me to place template at the top. A component's identity is ultimately what html it renders.
Also I like brainstorming HTML before implementing a cmp. Makes browsing unfamiliar SFCs smoother too.
Real men use first
Agreed 😂
Script first will help you convince react devs they should upgrade to vue
I have always preferred the script at the top, since the template is the result of what is done at the beginning, and it will not have major modifications if you are clear about what you are going to show, I think I adopted this from vue2, thank you very much for your videos, greetings from Chile.
When I was using vue 1, i did template first. But ever since Vue 2, I switched to script first because I do more work in the logic than I do in the markup. It didn't make sense to me to have the most important part of the code buried under x amount of lines under the markup. I rarely use style (only because of work) so I don't care how many lines it's buried and often forget that's even an option.
We recently switched to script on top when switching to Composition API at work, can only recommend
My order is:
1. script
2. template
3. style
The logic behind this is pretty simple, it has to do with reading order.
I write variables and functions in my script tag then I'll read/use them in my template tag
Inside my template tag I'll write classes and then I'll read/use them inside my style tag.
If the template was first I'll encounter variables and functions I don't know anything about it and I'll have to scoll up and down to check what does that function or where does this variable gets it's value.
I’ve always put template first. I hadn’t even noticed the ‘switch’ to script first 😂
I can see how script first aligns better with modules. Imports at the top makes a lot of sense, especially in a plain Vue project where you might be importing other components. However, I feel this argument is a lot less relevant in Nuxt with auto-imports.
Template first is more similar to the structure of a classic HTML document before ‘defer’ when you had to dump all your scripts in the footer 😂
I think it is minor thing. Would be nice to see your view about common FE things, architecture
Obviously the best tag order is `` tag first so you know what the component looks like.
I'm still using template first cause I'm just used to it. But I'll definitely try the script first, just to see how I'm feeling about it!
Great video Alex 👍💪
I have tried both and just feel more more comfortable with script at top, that's where I spent the most time too so I prefer have it top and don't scroll 😅
@6:45 should have been an april fools video lol got me
I will choose script first!!
For content website, first feels more organic. For dashboards.... meh
Definitely template first.
100%
Template first for me. I'm trying to force myself to use script first in my personal projects, but it's so unnatural and annoying for me. As Vue is a HTML-first framework, I try to follow the same mental model I would do in a HTML project (markup first, then the script).
please use Vue like Vue way and not React, etc.
easy
But no matter which tag on top - it is the Vue way 🤔🤔🤔
@@TheAlexLichter no, "Vue way" means logic structure script+script[setup]+template+style
But the Vue 2 way with template - script - style was the Vue way as well, no?