In a Vue 3 project, organizing the structure effectively is key to building scalable and maintainable applications. Core elements like Vue pages, Vue layouts, and Vue components provide a solid foundation for creating dynamic user interfaces and reusable features.

Vue pages are tied to application routes and serve as the primary views, often wrapped within a layout component. Layouts, such as vertical or horizontal designs, ensure consistency across the application while enabling flexible navigation structures. Vue layouts also play a significant role in maintaining a cohesive look and feel throughout the app.

Reusable features are at the heart of a Vue project, with Vue reusable components like data tables, loading buttons, and status badges streamlining development. These Vue UI components leverage modular design principles, making it easier to adapt and extend functionality. By building with reusable Vue components, developers can enhance productivity and create consistent, high-quality interfaces.

Within the Nano Vue UI project, elements are grouped as pages, components, or layout. Sample components are grouped separately in template resources.

Pages

Pages correspond to routes and provide the views of the application. Pages wrap content within a Layout component. Guest Layout is used for non-authenticated views.

Pages group elements by feature. For example, in pages/products you’ll find the products-list which is the main element; the view layout. The modal and edit button are separate components along with a column-config for the data table.

The data tables are reusable components which use column-config to adapt to any scenario. Column config is an array of objects, with each object representing a column. The columns contain properties that define how the column behaves and displays data. The table components in the Vue application use Tanstack Table V8 and are explained in more detail in the next guide.

Most of these features have similar composition; pages/users is pretty similar to what you’ll see in pages/products or pages/tenants. One difference is that while tenants and users use the client-side data table, products use the server-side data table. This is done to provide clear examples of each use-case.

The implementations provided by this boilerplate are intended only as a starting point. You can refactor and reorganize as you need.

Layout

Global layout components are found within /layout in addition to navigation components like sidebar-nav and topbar. Menu options are provided as an array of objects in menu-options.

The default layout is layout-vertical but a layout-horizontal is also included.

Components

Anything reusable and not specific to one particular view can be found in /components, for example the loading button, status badge, or data tables.

Template Resources

Template resources Base UI and Extended UI are not really part of the boilerplate app. They’re an organized collection of sample components.

Base UI are the typical Bootstrap components like buttons, modals, tabs, etc. from BootstrapVueNext, a globally registered library. Functionality is provided by Bootstrap and no extra code is required.

Extended UI includes third party components and some need configuration.

Next Steps

The next sections will look at two of the most important components, data tables and forms with validation