Multi-page Application done better with Laravel, Vue and, Vite pt. II

In this part we continue explaining the required essentials of having a Laravel project with Vue frontend built by Vite, if you haven’t read the preceding part, you can find it here.

III. General Use Vue Components

Here you’ll have your reusable UI components written in Vue SFC — Single File Component — files and, the reason I called them General Purpose is that you can reuse them in multiple projects to serve different objectives, general elements like navigation bars, breadcrumbs, counters, graphs or, even tables powered by the jQuery Datatable library.

For example let’s take a look at the following chart Vue component, it uses ChartJS, jQuery, bootbox and, daterangepicker which are loaded by the javascript file that operates the blade view — more on that will be explained in the next part of this article — except for ChartJS which is directly imported in the component as shown below.

The mounted method in the previous example starts the chart but, before that it brings in the already loaded jQuery and bootbox libraries from the $root component — which is our main vue frontend instance — , for more complex components e.g. DataTables we’d have multiple .vue files grouped in a directory under resources/components along with an index.js file that exports them like the following example:

These components won’t run on their own, they have to be used by our blade views thus, we get to the next point.

IV. Specific Purpose Blade Components

These will be blade files including the components that handle specific business logic for your project, such as “Products Table” in an e-commerce app or, “Appointments Calendar” in a clinic management app, in turn these components will be using the general use Vue components mentioned in the previous point.

Such blade components should be located in resources/views/components directory, feel free to create the blade files there directly or group them in subdirectories within that location, the reason behind having those components stored in that directory is; that Laravel automatically discovers and recognizes blade files stored there as anonymous blade components, which are directly usable within other blade views — will be shown in an upcoming example —, for now let’s take a look at the following snippet.

That blade component uses our general use vue component for showing a table of payments powered by the jQuery DataTable library — via thevue-datatable tag — thus, we can reuse such general use vue components in as many as blade components to serve different business logic or features.

The props blade directive allows you to restrict and pre-define variables that would be required to alter the component’s behavior and / or rendering, the variable definitions which include a value will make those props optional as you will be setting the default value for each of them in the directive, as for definitions that don’t include a value will be required e.g. @props(['optional_prop' => 'someValue', 'required_prop']).

At this point all required essentials are laid out except for the last couple which connect the dots and integrate these different parts into a functional webpage(s) so, let’s move on to the last piece of the puzzle.