Vue.js is a JavaScript framework for building interactive user interfaces. Unlike traditional multi-page applications, a Vue single-page application (SPA) can update its content without reloading the entire page. This creates a smoother user experience and lets developers organize functionality into reusable, reactive components.

Nano’s Vue UI is built with Vue 3 and uses the Composition API to organize application logic. Its component-based architecture separates the user interface, routing, state management, and API communication, making the application easier to understand and maintain.

This guide introduces the top-level files and folders in the Nano Vue project. It explains the role of the main configuration files and points to the guides covering the application’s core components, pages, styling, and forms.

Vue UI Project Overview

The Nano Vue client is a single-page application built with Vue 3. It is written in JavaScript and uses Vite for development and production builds. The project uses Vue’s Composition API wherever appropriate.

The main areas of the application are covered in separate guides:

• Core Application — The root App.vue component, router, API client, and stores used for state management.
• Pages, Layout & Components — How pages, layouts, and reusable UI components are organized.
• Data Tables, Forms & Validation — Working with data tables, forms, and input validation.
• Theme & Styling — The application’s styling structure and Bootstrap 5 SCSS theme.

Top-Level Files and Folders

The Vue project contains the following main files and folders:

• src/ — The application’s source code, including Vue components and other frontend modules.
• index.html — The HTML entry point where the Vue application is mounted.
• .env.development and .env.production — Environment-specific variables used by Vite, including the API URL for the ASP.NET Core backend.
• vite.config.js — The Vite configuration file, which controls aspects of the development server and production build.
• package.json — The NPM manifest containing project metadata, dependencies, and scripts for running and building the application.
• .gitignore — Specifies files and folders that Git should ignore.

Vite Build Tool

Vite is a frontend build tool that supports Vue, React, and other web development projects. It provides a development server for working on the application and builds optimized static assets for production.

In Nano, Vite also supports the frontend workflow for SCSS styles and the environment-specific configuration used to connect the Vue application to the ASP.NET Core API.

Next Steps

Continue to the Core Application guide to learn how the Vue application is initialized and how its root component, router, API client, and stores work together.