Pages, Layout & Components

The building blocks of the app are grouped as pages, components, or layout. The sample components are grouped separately in template resources.

Pages

Pages typically correspond to routes and are the ‘views’ of the application. The pages wrap all their 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 main element contains the layout for the view. The modal and edit buttons will be here as a 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.

You will find that most of these ‘features’ have similar composition. By that we mean, what you see in pages/users is pretty similar to what you’ll see in pages/products or pages/tenants. One key difference though is that tenants and users use the client-side data table. Products use the server-side data table. This is done so that you have a clear example of each use case.

You can of course make things even more reusable if you know how your views will look. The implementations provided by this boilerplate are intended only as a starting point.

Layout

These global layout components are found within the layout folder. Navigation components like sidebar-nav and topbar are found here too. Menu options are provided as an array of objects in menu-options.

The default layout is layout-vertical but a layout-horizontal is included in case you want to experiment with that.

Components

Anything reusable and not specific to one particular view can be found in the components folder.  Example of components would be a loading button, a status badge, or a data table. You should create reusable elements whenever you can.

Template Resources

Template resources Base UI and Extended UI are not really part of the boilerplate ‘app’ but rather, they’re a collection of sample components ready for you to build with.

Base UI includes any typical Bootstrap component like buttons, modals, tabs, etc. These components are part of BootstrapVueNext which is registered globally. They get their functionality from bootstrap and don’t require extra code.

Extended UI components include third party components and in some cases need configuration like Apex charts. The dashboard is there because every cool app has a dashboard! There are icon groups because icons. And we included dragula and range slider even though they are a bit legacy; they are useful and this shows you how you can use JQuery components in a Vue application should you need to do so. You could of course just remove these if you have a burning hatred for JQuery.

Next Steps

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