A well-structured Vue 3 application separates its user interface, navigation, state management, and communication with the backend. This makes the frontend easier to maintain as an application grows.

Nano’s Vue UI uses Vue Router for navigation, Pinia for centralized state management, Axios for HTTP requests, and BootstrapVueNext for UI components. The core application is initialized through main.js, while App.vue acts as the root component and coordinates application initialization, layout settings, and authentication checks.

This guide explains how these pieces work together and where to find the main routing, store, and API logic in the Nano Vue project.

Root Component

The two main entry points are main.js and App.vue.

main.js

The main.js file initializes the Vue application and configures its core dependencies, including:

• Pinia for state management.
• Vue Router for client-side navigation.
• BootstrapVueNext for Bootstrap-based Vue UI components.

App.vue

App.vue is the root component in the Vue component tree. It provides the starting point for application-level initialization.

When the component mounts, layoutStore.init() initializes layout defaults, sidebar state, and user preferences. Layout settings are persisted in localStorage so that preferences can be retained between visits.

The root component also checks for an authentication token. When a token is present, the application retrieves the current user’s details from the API and stores them in accountStore. The router then directs the user to the appropriate page or login screen based on the authentication flow.

Vue Router

Vue Router manages navigation between pages without requiring a full browser reload. In Nano, route definitions are maintained in routes.js and organized into Boilerplate Routes and Template Resources.

Boilerplate Routes

These routes provide the main functionality of the application:

• Authentication: Login, forgot-password, and reset-password pages.
• Error pages: HTTP-style error pages, including a catch-all route for unknown URLs.
• Main application: Products and routes for additional entities as they are added.
• Management: Tenant and user management.
• Account: The current user’s profile and account-related functionality.

Authentication and role requirements are defined through route metadata and handled in router/index.js. This centralizes route access rules and helps control which pages users can access.

Template Resources

Template resource routes provide access to the included UI examples and components. They are divided into two groups:

• Base UI: Examples of core Bootstrap components.
• Extended UI: Additional third-party components, icons, and the sample dashboard.

This separation distinguishes the application’s core functionality from the UI resources included as development examples.

Pinia Stores

Pinia provides centralized state management for the Vue application. Nano organizes its stores by feature, keeping related state and operations together.

The main stores include:

• Auth store: Login, forgot-password, reset-password, and logout functionality.
• Users, Tenants, and Products stores: State and CRUD operations for the corresponding application features.
• Account store: The current user’s details, profile management, and password-reset functionality.
• Layout store: Theme initialization, sidebar state, layout colors, and other presentation preferences. It uses localStorage to persist layout settings.

Stores use api/agent.js to communicate with the backend. This keeps HTTP request logic separate from the state and operations used by individual views.

API and Axios

The api/agent.js module centralizes HTTP communication with the ASP.NET Core backend using Axios.

It handles several aspects of API communication.

API Base URL

The API base URL is configured through the .env.development and .env.production environment variables. Vite exposes the configured values to the frontend, allowing the application to use different backend URLs in development and production.

Authentication and Tenant Headers

Axios request interceptors attach the relevant information to outgoing requests:

• Bearer token: When an authentication token is available, the request includes it in the Authorization header.
• Tenant ID: When a bearer token is not available, the request includes a tenantId header for tenant identification.

The exact authentication and tenant-resolution behavior depends on the backend endpoint and the application’s configuration.

Response Delays and Error Handling

In the development environment, the API agent adds an artificial one-second delay to responses. This makes it easier to test loading indicators and other UI feedback that might otherwise be difficult to observe when requests complete almost instantly on localhost.

Interceptors also handle HTTP errors in the 400 and 500 status-code ranges, providing a centralized place to process failed requests.

HTTP Methods

The API agent exposes methods for the common HTTP operations:

• GET — Retrieve data.
• POST — Create resources or submit data.
• PUT — Update resources.
• DELETE — Remove resources.

These methods are exposed through the agent object and are typically called from Pinia stores.

The API agent also provides alternative POST and PUT methods for sending form data, such as file uploads.

Next Steps

Continue to Pages, Layout, Components & Navigation to learn how the Vue application’s views and reusable components are organized.