How to Structure a Typical Vue.js App

github logo ・1 min read

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!

twitter logo DISCUSS (2)
markdown guide
 

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

 

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.

Classic DEV Post from Dec 1 '18

Let's talk about an unnecessary but popular Vue plugin

Do we really need a plugin for everything?

Neo profile image
Born in the matrix.