docs: add Vue standard documentation

docs/c.list

@@ -7,5 +7,6 @@
     <category id="profiles" name="Profiles" order="3" />
     <category id="admin" name="Admin" order="4" />
     <category id="uh" name="User Handbook" order="5" />
+    <category id="vue" name="Vue" order="98" />
     <category id="ds" name="Development Standards" order="99"/>
 </categories>

docs/topics/Admin.md

@@ -17,5 +17,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Authenticating-Logging-In.md

@@ -12,5 +12,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Changing-Password.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Code-Style.md

@@ -98,5 +98,6 @@ above each section to describe what it does.
         <a href="Naming.md" />
         <a href="Comments.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Coding-Standards.md

@@ -51,5 +51,6 @@ let a = 1
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Comments.md

@@ -56,5 +56,6 @@ Block comments for methods must contain at least the following:
         <a href="Naming.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Components.md

@@ -0,0 +1,74 @@
+# Components
+
+Components are the building blocks of Vue applications. A component is
+essentially a Vue instance with pre-defined options. Registering a component in
+Vue using Composition is straightforward:
+
+```javascript
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+function increment() {
+    count.value++
+}
+</script>
+````
+```html
+<template>
+    <button @click="increment">
+        Count is: {{ count }}
+    </button>  
+</template>
+```
+```html
+<style scoped>
+button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+}
+</style>
+```
+
+The sample component above is a simple button that increments a counter when
+clicked.
+
+## Structure
+
+For this project, the setup script must be first, followed by the template and
+then the style. The style is optional.
+
+The setup script is a single script tag with the attribute `setup`.
+The template is a single template tag.
+The style is a single style tag with the attribute `scoped`.
+
+## Directories
+
+View components are stored in the `src/views` directory, while
+components that are used by views are stored in the `src/components`.
+
+<seealso>
+    <category ref="vue">
+        <a href="Vuetify.md" />
+    </category>
+    <category ref="uh">
+        <a href="Admin.md" />
+        <a href="Authenticating-Logging-In.md" />
+        <a href="Loans.md" />
+        <a href="Deposits.md" />
+        <a href="Profiles.md" />
+    </category>
+    <category ref="ds">
+        <a href="Naming.md" />
+        <a href="Comments.md" />
+        <a href="Code-Style.md" />
+        <a href="Git-Commit-Messages.md" />
+    </category>
+</seealso>

docs/topics/Creating-New-Deposit.md

@@ -15,5 +15,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Creating-a-Loan-Application.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Deposit-Dashboard.md

@@ -15,5 +15,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Deposits.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Introduction.md

@@ -57,5 +57,6 @@ usability improvements, or feature requests.
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Loan-Approval-Rejection.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Loan-Dashboard.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Loan-and-Deposit-Settings.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Loans.md

@@ -17,5 +17,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Member-Profiles.md

@@ -15,5 +15,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Naming.md

@@ -39,5 +39,6 @@ All classes must be named in `PascalCase`.
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Notification-Settings.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Officer-Profiles.md

@@ -15,5 +15,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Profiles.md

@@ -16,5 +16,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/User-Handbook.md

@@ -13,5 +13,6 @@
         <a href="Comments.md" />
         <a href="Code-Style.md" />
         <a href="Git-Commit-Messages.md" />
+        <a href="Vue.md"></a>
     </category>
 </seealso>

docs/topics/Vue.md

@@ -0,0 +1,43 @@
+# Vue
+
+The frontend is built with Vue.js, which is also subject to our
+<a href="Coding-Standards.md" />.
+
+## Vue.js
+
+Vue.js is a progressive framework for building user interfaces. Unlike other
+monolithic frameworks, Vue is designed from the ground up to be incrementally
+adoptable. The core library is focused on the view layer only, and is easy to
+pick up and integrate with other libraries or existing projects. On the other
+hand, Vue is also perfectly capable of powering sophisticated Single-Page
+Applications when used in combination with modern tooling and supporting
+libraries.
+
+For this project, we use Vue.js 3 built with [Vite](https://vitejs.dev/).
+
+## Vue API
+
+The Vue API is available
+<a href="https://v3.vuejs.org/api/" >here online</a>.
+We will be using the Composition API, which is available
+<a href="https://v3.vuejs.org/api/composition-api.html" >here online</a>.
+
+<seealso>
+    <category ref="vue">
+        <a href="Components.md" />
+        <a href="Vuetify.md" />
+    </category>
+    <category ref="uh">
+        <a href="Admin.md" />
+        <a href="Authenticating-Logging-In.md" />
+        <a href="Loans.md" />
+        <a href="Deposits.md" />
+        <a href="Profiles.md" />
+    </category>
+    <category ref="ds">
+        <a href="Naming.md" />
+        <a href="Comments.md" />
+        <a href="Code-Style.md" />
+        <a href="Git-Commit-Messages.md" />
+    </category>
+</seealso>

docs/topics/Vuetify.md

@@ -0,0 +1,35 @@
+# Vuetify
+
+This project largely uses [Vuetify](https://vuetifyjs.com/en/) for its
+components. Vuetify is a Material Design component framework for Vue.js. It aims
+to provide clean, semantic and reusable components that make building your
+application a breeze.
+
+## Vuetify API
+
+The Vuetify API is available
+[here online](https://vuetifyjs.com/en/api/vuetify/).
+
+## Classes
+
+Vuetify uses classes to style components. These classes are exposed to the
+whole application, so they can be used in the `class` tag of any component.
+
+<seealso>
+    <category ref="vue">
+        <a href="Components.md" />
+    </category>
+    <category ref="uh">
+        <a href="Admin.md" />
+        <a href="Authenticating-Logging-In.md" />
+        <a href="Loans.md" />
+        <a href="Deposits.md" />
+        <a href="Profiles.md" />
+    </category>
+    <category ref="ds">
+        <a href="Naming.md" />
+        <a href="Comments.md" />
+        <a href="Code-Style.md" />
+        <a href="Git-Commit-Messages.md" />
+    </category>
+</seealso>

docs/ucwa.tree

@@ -33,6 +33,10 @@
         <toc-element topic="Comments.md"/>
         <toc-element topic="Code-Style.md"/>
     </toc-element>
+    <toc-element topic="Vue.md">
+        <toc-element topic="Components.md"/>
+        <toc-element topic="Vuetify.md"/>
+    </toc-element>
     <toc-element topic="Git-Commit-Messages.md"/>
     <toc-element topic="Express-Routes.md"/>
 </instance-profile>