As my (very esteemed) colleague Tim Sommer (check out his blog!) put it: it’s AngularJS done right.
I was happy to learn that Vue is based heavily on using components. I was not happy, however, to learn that Vue supports single-file components. Especially because most tutorials or guides will tell you to simply dump all your Component.Vue files in one folder, src\components.
Fortunately, the team behind Vue.JS is aware that devs might be bothered by this, so they offer an alternative in their guide: we can reference script and style files in our Vue files.
Take, for example, the following App.Vue single-file component:
We can split this up into three files, effectively separating each by their own concern:
Naturally, since our components now comprise 3 files instead of 1, it makes sense to group these in their own folder under src\components, in this case: src\components\app.
However, there’s more reasoning behind the .view. When you use Vue-Router, routes are mapped to components. Components matched by routes are, in my experience, rarely reused and are usually comprised of other, reusable components. The way I see it, they are simply views, combining smaller components to create one screen. Such a view is always a component, but a component isn’t necessarily a view.
To easily navigate through larger-scale projects, I tend to make a separate views folder in src to contain these view-components.
Learn By Example
Let’s assume we’re building an app that, among others, has a view that lists users. Using the ideas laid out above, we could structure our Vue.JS app like so:
Structuring your app like this makes navigating your project a breeze and allows for easier cooperation when working in teams.
Fill in the form below and we’ll get back to you as soon as possible.
Thanks for getting in touch!Oops. You seem to have written your full name in invisible ink. Please enter it so we can read it. Oops. You seem to have written your company in invisible ink. Please enter it so we can read it. It seems your e-mail doesn’t exist. Please enter a real one so we can contact you. Oops. You seem to have written your telephone in invisible ink. Please enter it so we can read it. Sorry, we could not send the enquiry.