What's the difference between .vue .js files if we have all the details in .js?

Question

I have read the vue docs. My global understanding of vue structure is based on statements:

• index.html has container that points to a .vue file

• .vue has 3 separate things: with ONLY 1 div , (logic) , (css)

• vue should have data(), methods(), computedproperties() etc

But .js file can have same code as .vue

So what's the difference between them, or am I missing something?

Answer 1

*.vue files are there during build time only. Vue files can contain <template /> , <script /> and <style /> tags. Webpack needs to know how to bundle *.vue imports. So we have vue-loader . During build time, using vue-loader, your JavaScript in the Vue file is transpiled, the template is compiled to render functions, and styles are extracted. Just .js files won't be able to contain all <template /> , <script /> and <style /> tags together.

I personally prefer to use *.vue files with all these tags in there because that forces me to keep my components small and focussed. If the *.vue file gets too long, then it's usually an indication that my component is doing too much and I break it down into smaller components. And, a small focused component with all its logic, template and style in one file is very convenient to work with. Now and in the future.

Answer 2

Using a .vue file allows you to include your template, js, and css in the same file.

They will also allow for better performance if you want to precompile your templates, and you can use scoped css.