vue.js - Understanding HTML vs VUE file strategy with Vue apps

Question

New to Vue and trying to understand exactly what things need to be pages (.html files) and which things need to be Vue components (.vue files). I understand that Vue components are meant to be reusable, but let's say I have a Log In screen which is the "entry point" to my web app.

The Log In screen doesn't need to be dynamic, can display the same for everyone, and doesn't need to be reusable.

So would I make a public/login.html file or would I make a src/components/Login.vue file? And why?

If I just make a public/login.html file, does Vue provide any JavaScript APIs that I could place inside the <script> tags to make my life easier (say, for submitting the login form), or is it standard to just use other JS frameworks like jQuery for this type of stuff?

And if I should make it an actual component (src/components/Login.vue file), then whats the general rule for knowing when to make an HTML page and when to make it a VUE component?

Answer 1

You always need at least one HTML file per page. You can think it is a master layout of the page. In case of SPA usually you will need only one HTML due to the application will navigate itself inside a placeholder without asking the server for a new HTML.

Inside each HTML you can decide which part of the page to create as a Vue component. If the page is not dynamic then you don't need Vue for that page. If it is dynamic but it is easier to do with jQuery then you don't need Vue.