Pages, Layout & Components
The elements of the app 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 PageLayout 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 so 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 SidebarNav and TopBar. Menu options are provided as an array of objects in menu-options.
Components
Anything reusable and not specific to one particular view can be found in the /components folder, for example the loading button, breadcrumb component, or a data tables.
Template Resources
Template resources Base UI and Extended UI are kept separate from the rest of the boilerplate, as an organized collection of sample components.
Base UI are the typical Bootstrap components like buttons, modals, tabs, etc. from Boostrap React, a globally registered library. Their 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