Top Level
The Vue client is a single page application built using the modern JS framework Vue 3. It uses JavaScript as the primary language and development runs on Vite build tools. This Vue project uses the Composition API whenever possible.
Overview
The best way to explain this Vue application is by starting with its ‘core’ or central structure. That would be the root App.vue component, along with the Router, API, and Stores. The Core Application guide covers these topics.
Zooming out then is everything else, explained in the the Pages, Layout & Components guide. Template Resources is the collection of component samples, which are organized conveniently ‘on the side’. Data Tables, Forms & Validation are covered in more detail..
The style or ‘theme’ is a project in itself. The styles are managed in the assets folder as Bootstrap 5 based scss. While similar in all three UI projects, its covered from Vue’s perspective in the Theme & Styling guide.
Top Level
A quick overview of the files and folders from the top:
- Src – this is the folder where app source code lives
- Index.html – this is where Vue will mount the application
- .env.development & .env.production – these are environment variables that the Vite build tool uses, they dictate where the app should look for the API
- Vite.config.js – this is 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. For that reason, it requires the configuration file. It’s better than using the regular CLIs that come with React or Vue because it’s faster, more stable, and has some great 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.