Structuring a Vue.js application

And keeping those concerns separated!

Benjamin Todts
Jan 29, 2018 · 3 min read

After hearing a lot about it, I recently rolled into Vue.js. Having worked with AngularJS (Angular 1.x, that is) extensively, I noticed a lot of similarities and quickly felt quite comfortable with this up-and-coming JavaScript framework.

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.

Sure, components are to be kept small; but by placing your component’s HTML-template, scoped CSS styling and JavaScript in the same file, the size quickly gets out of hand. Imagine working on an enterprise-scale app with hundreds of components. Now imagine the merge-conflicts because you edited a component’s template and someone else updated its styling.

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:

App.Vue as a single-file component

We can split this up into three files, effectively separating each by their own concern:

App.Vue only contains a template and references to a JS-file and a stylesheet
app.view.js
app.css

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.

Notice how I named the JavaScript file app.view.js , instead of simply app.js. To import our App-component, we would use the following statement: import App from 'src/components/app/App'. This would fail if our JavaScript file was named app.js because the import statement would match and return that file instead of the App.Vue file.

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.

I still had to find a suffix for the JavaScript files of actual, reusable components. After some consideration, I went with foo.component.js.

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:

src
components
userlist
userlist.css
userlist.component.js
UserList.Vue
userlistitem
userlistitem.css
userlistitem.component.js
UserListItem.Vue
views
app
app.css
app.view.js
App.Vue
home
home.css
home.view.js
Home.Vue

Structuring your app like this makes navigating your project a breeze and allows for easier cooperation when working in teams.