Multi-page Applications done right in Laravel and Vue. Part II
Here’s another couple of the major pillars required to implement a multi-page web application with Laravel and Vue, if you haven’t read the first part of this story yet, you can find it in 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 and, Flatpickr which are to be loaded externally — in other script tags within the view that uses this component.
I would put such component file under resources/components and, if I have a component which is more complex i.e. is comprised of multiple subcomponents like this Vue wrapper component for jQuery Datatable then, all the .vue files including the index.js of the component will be grouped in a directory e.g. resources/components/datatable.
Those components won’t run on their own nor get compiled, unless we require them in our blade views — which takes us 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 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.
The key points to take from the previous code example are the props blade directive at the beginning and, the usage of the vue-datatable components including its subcomponents.
The props blade directive allows you to pre-define variables that would be required to alter the component’s behavior and / or rendering, these variable definitions will make those props optional as you will be setting the default value for each of them in the directive.
So, you can use any variable within the blade component even if it’s not mentioned in the props directive but, in case of such variables you need to make sure to pass them to the component when you use it because, variables used but not mentioned in the props would be required in this case — will show you how in the next part of this story.
As you can see our blade component is already using our general use Vue components for showing a table of payments powered by the jQuery DataTable library so, you can reuse multiple general use Vue components in a blade component that serves a particular business objective or feature.
That concludes this part of the story, the final part of this story can be found in here.