Learn TypeScript 3 by Building Web Applications

Project structure and conventions

Even if Vue.js is small and lightweight, we need to properly organize our code to make it easier to locate elements. We can, of course, apply the LIFT pattern recommended by Angular.

Here's an overview of the project's src folder structure that we will use:

├── api-key.ts # holds the API key for the MusixMatch ├── App.vue # application's root component ├── main.ts # entry point ├── assets/ # images, fonts, ... ├── components/ # Vue.JS components (i.e., dumb components) ├── domain/ # domain model ├── ioc/ # InversifyJS configuration, types and tags ├── mixins/ # Vue.JS mixins ├── router/ # router configuration ├── services/ # application services ├── store/ # VueX store, actions and mutations ├── styles/ # ...