3

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?

Improve this question

2 Answers 2

Reset to default
6

*.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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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.

Improve this answer

5 Comments

but should not the css, js be in separate files?
I personally prefer doing that, but you asked what the difference was between .js and .vue, that is a major difference.
@ERJAN vuejs.org/v2/guide/…
@AndreKR thanks for the link, Haven't used vue in a while and couldn't find it. Is hot-reloading unique to .vue files as well?
Hot-reloading is a feature of webpack, not of Vue, so in general it works without .vue files, but I'm not sure if such Vue components would automatically re-render when they are updated - I never used it that way.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.