Setting up a Vue 3 project involves establishing a solid foundation with modern tools and libraries for scalable and maintainable applications. The App.vue component and main.js file serve as the entry points, integrating essential features like Vue Router, Pinia state management, and BootstrapVueNext.

The Vue core application, the App.vue component initializes functionality, managing layout settings, user preferences, and authentication. Vue Router handles navigation and access control, ensuring seamless transitions and secure route handling. Pinia state management centralizes logic, while BootstrapVueNext provides a responsive and cohesive UI framework. Together, these tools enable efficient development and a polished user experience.

Root Component

App.vue and main.js are the top level components in the Vue app.

Key components like Pinia, Vue Router, and BoostrapVueNext are initialized and configured in main.js.

App.vue is the top level component in the Vue component tree. When it mounts, layoutStore.init() sets up the theme defaults, sidebar state, and preferences are stored in localStorage.

App.vue checks for a token to see if the user is authenticated. If the user is authenticated, the user details are retrieved from the API and stored within accountStore. The router directs the user to a page or the login screen depending on if the authentication was a success.

Vue Router

Routes are managed in routes.js; grouped as Boilerplate Routes or Template Resources routes. The boilerplate routes are as follows:

• Auth routes – login, forgot password, reset password pages
• Error routes – 400 type errors, catch-all for incorrectly entered URLs
• Main routes – Products, plus any newly added entities
• Management routes – Tenant and User management
• Account routes – the current user profile.

Authentication and role requirements are passed as metadata, handled within router/index.js.

Template Resources routes are grouped as Base UI or Extended UI. Base UI contains basic Bootstrap components while Extended UI contains third-party components, icons, and the sample dashboard.

Stores

Pinia stores centralize state and logic. They are named by feature:

• Auth store – contains functions for login, forgot password, reset password and logout
• Users, Tenants, & Products stores – contain CRUD functionality as well as state for the related views.
• Account store – contains the current user and functions that manage profile and reset password
• Layout store – contains theme initialization code that runs when the app mounts. Also, sidebar state, layout color, etc. The layout store uses local storage to persist theme settings.

Stores use api/agent.js to make HTTP requests to the server.

API

HTTP requests are handled within api/agent.js using Axios.

In agent.js a few things are happening:

• The base API URL is set with .env.development & .env.production variables using Vite’s metadata
• Axios interceptors append a bearer token to every authenticated request when present, or a header with tenantId if not
• When in the development environment, an artificial 1 second delay is added to every response make testing easier. Otherwise localhost will load everything instantly and it will be difficult to test loading feedback.
• Interceptors are used to catch 400, 500 level errors

The Axios base contains methods for Get, Post, Put, and Delete. These methods are exposed by the agent object, which is typically used in Pinia stores.

There are two alternate methods for Post / Put, which can be used for sending form data (uploading files).

Next Steps

The next section covers pages, components, layout & navigation.