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.