Structuring a Vue.js application

And keeping those concerns separated!

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.

All Is Not Well

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:

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.

Views vs Components

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.