DEV Community


Posted on

How to Structure a Typical Vue.js App

I'm a Vue n00b. After having watched some videos and read a few tutorials I'm still not entirely sure if I'd need multiple Vue instances, i.e., one for every control I want to work with (and on a form with numerous inputs that could get pretty complex), or if there's only supposed to be one Vue instance and perhaps you create multiple "components"?

Any help would be greatly appreciated!

Top comments (2)

jappyjan profile image

Solution 2 is the one to go.

For a typical site you would create a vue instance which wraps all over components of your site (mostly named “app”)

Inside of your app instance/component you place other components in which you may place sub components and so on...

Normally you don’t have to create one component per form, instead you would create on component per section of your site e.g one login component which wraps all a username and a password input field and all the login logic

stephanusrex profile image

Thanks, jappyjan. By "wraps all over components", do you mean that "app" would be, say, a "div" that acts as a container for all the other components being used on the page? That is, you only "register" the div with the id of "app" and by virtue of the fact that that div "contains" other vue components, e.g., buttons, inputs, etc., that "wraps" them?

Or do you have to register them via some function call?

I know, very basic questions, but just trying to learn. Thanks for your patience.