Front-end JS frameworks like Vue 3 can provide a better UI experience for users than their traditional multi-page counterparts. Their main advantage is that they operate as a single page application. No page reloads means users get a near-native experience in their browser. Another benefit is that developers get to work with reusable components in a reactive environment. Instead of a mess of intermingled JavaScript and HTML, functionality is declarative, and can be grouped within components for easy management.

Designed as a flexible Vue UI framework, this project demonstrates the full potential of Vue.js 3, leveraging the Composition API to create a scalable and maintainable application architecture. Gain insights into implementing advanced routing, state management, and UI component strategies that maximize the potential of Vue router and modern web development techniques.

The documentation provides an in-depth look at the Vue single page application’s structure, from its core components to styling approaches, offering a blueprint for building sophisticated Vue.js applications.

Vue UI Project Overview

The Vue client is a single page application built using the modern JS framework, Vue 3. It is written in JavaScript and runs on Vite build tools. This project uses the Vue Composition API whenever possible.

The Core Application guide covers the root App.vue component, Router, API, and Stores (state management). Pages, Layout & Components and Data Tables, Forms & Validation, are explained in more detail in their own guide.

The Vue theme style is a project by itself. Styles are managed in /assets folder as Bootstrap 5 scss. The styling code is mostly the same in each UI version, but its covered from Vue’s perspective in the Vue Theme & Styling guide.

Top Level

A quick overview of the files and folders from the top:

• Src – app source code
• Index.html – this is where Vue will mount the application
• .env.development & .env.production – these are environment variables for the Vite build tools, they contain a variable for the API URL
• Vite.config.js – the Vite configuration file.
• Package.json – NPM manifest of all dependencies, contains two scripts, serve & build
• .gitignore – tells git source-control to ignore certain files and folders

Vite is a generic build tool that can be used for many types of projects, not just Vue projects; it requires a configuration file.

Vite is better than the CLIs that ship with React / Vue because it’s faster, more stable, and has some amazing features like being able to use scss styles directly.

Next Steps

Read the next section to get an understanding of how the app is built starting from the root component.