Default Vue CLI Architecture

July 7, 2021

This article presents the software architecture of a project generated by the default Vue 2 template of the CLI tool. A Unified Modeling Language (UML) Package Diagram will show the relationships between the different directories.  A UML Class Diagram will show the relationships of the source files. 

The architecture to be analyzed is that created by the default Vue 2 project. This is created using the following command.

$ vue create sample-vuejs-demo

When prompted, select "Default (Vue 2)".

The command generates code, configuration, and build files. The analysis of the architecture begins with looking at the static, structural elements that are realized in the code. With in the src/ directory, there are the following directories.

• src/
• src/assets
• src/components

Within src/, there are the following files

• src/App.vue
• src/main.js

There is a single file in the components/ directory.

• src/components/HelloWorld.vue

The assets/ directory contains index.html which is important to Vue. However, it is typically used as-is, so it is not needed in the analysis.

Package Diagram

In UML, Packages define the structure and organization of the code. In this JavaScript-oriented architecture, simple directories are modeled as Packages. (Other programming languages have a more robust notion of Packages that enforce information hiding and manage namespaces. ) The following diagram contains two Packages:

1. The root src/ directory as "Default" and
2. The components/ directory as "Components".

The file folder shapes are used by UML to represent a Package. "pkg CLI Arch 1" shows the file contents of the Packages (App.vue and main.js within the Default Package shape). The contents are included to give context but typically omitted to avoid complicating the diagram.

The dashed arrow is a UML dependency relationship. It means that the Default Package -- specifically App.vue in the Default Package -- depends on the Components Package (HelloWorld.vue). The importance of a diagram like this is to capture the coupling between the Packages. In this case, one can expect changes to the code in the Default Package to not affect the Components Package.

Class Diagram

A UML Class is an element that has attributes and operations. In the Vue framework, a Class can be a Single File Component which has template, data and methods parts. The Class can also be used to model other JavaScript files like ES6 Modules or plain JavaScript.

In the Class Diagram below, each JavaScript file generated by the CLI is represented as a UML Class. The notation is a rectangle labeled with the Class name and (optionally) the Package name. The UML Class shape can convey much more information, but since this particular program's behavior is simple, the extra features are left off.

main.js depends on App.vue and uses the dashed arrow as in the Package Diagram. There is additional information on this particular arc "instantiates". That notes that main.js will create an App.vue.

App.vue has a solid line drawn to HelloWorld.vue. That is an association and the solid diamond marking on the end of App.vue is called Composition. This means that App.vue is composed of HelloWorld.vue. In Vue terms, this means that App.vue imports HelloWorld.vue and lists it in the components property.

Analysis

If this program were to grow -- and the static Package structure to remain -- top-level screens would accrue in the Default Package. In keeping with DRY (Don't Repeat Yourself), code would be factored out of these top-level screens in Default and be moved into the Components Package. As many files build up in a directory, it becomes awkward to work on the program since there is an undue amount of scrolling needed to find files.

More seriously, coupling increases. This means that as the Default Package grows, any of its files has the potential to affect any other file. Side effects result as the terms of what a file in the Default Package can do are not clear. This design only assures that the Default Package changes will not affect the Components Package.

The limitations of what a Package can or cannot are how developers ought to work with the program. Neither Vue nor JavaScript restrict the Components Package accessing the Default Package. Enforcement can be undertaken through a code review, and audit, or an automated static analysis.

This article presented a pair of UML diagrams used to analyze the small program generated by the Vue CLI. While it is easy for a user to keep track of the three files and two directories without a diagram, later articles will demonstrate more value in the diagrams to manage more complex programs.

The diagrams in this article were made with Sparx Systems Enterprise Architect.