Using Vue with existing web — server rendered — applications and websites
UPDATE: After a year and half since this writing, I’ve managed to get multi-page web applications with Laravel and Vue right, you can check it out here or, you might as well continue reading this story, you’d get some useful ideas out of it.
As a backend web developer my development experience was backend centric, in the sense that makes everything handled on server, in my case it meant using blade templates of Laravel — in php — and, UI/UX handling was mainly done in a mix of vanilla javascript, jQuery and, bootstrap.
My go-to solution for making reusable components was defining blade template for each component that would include a script tag of a minified javascript file — mostly vanilla JS that uses external libraries and tools like jQuery, datatables, fullcalendar.io, etc.. — , then in the page’s blade template I’d include such components with the @include directive.
For those who don’t know what blade templates are, it’s a template engine of php’s Laravel framework, much like smarty and twigg, that makes it easier for developers to write structured view files, shortly they are html files that include dynamic parts of the view injected into the html output.
I had my trials of making those components in Angular but, I couldn’t really manage to make it simple enough, and when I was introduced to Vue JS, I was fascinated about how easy it is to create those components, the single file component — or the SFCs — concept brought me much closer to the goal of making simple readable reusable components and, use them normally within a blade view wherever required.
The main problem with SFCs that they require a build step, a .vue file would include the html, javascript and, also the stylesheet — in css, sass or, even less — of the component you’re developing but, you can’t just use it directly within your html view, you have to build it using the vue build or vue-cli-service build command which implies setting up Vue CLI within your project and, manually run the command for each component you have.
So to solve that issue, at first I was defining the component’s html in a <script type="text/x-template" id="template"> tag, then create a javascript file that uses that tag in the component’s definition — which also includes the logic of handling the component workflow — and finally, have a blade template file which includes two script tags the first is the template mentioned and, the latter refers to the javascript that defines the component.
# The component blade view file looks like this
<script type="text/x-template" id="my-template">
<!-- HTML content of the component here! -->
</script>
<script type="text/javascript" src="my-component.js" />And in any page that I’d like to use any of those components I’ll @include them in the page’s blade template, that way I didn’t need to build the components I develop however, stylesheet is now left out to be manually handled, so I had to write css files then include them in link tags within the page view files, besides it’s a bit cumbersome to handle components this way so, I’ve decided to properly tackle the root challenge.
The main problem with SFCs to me was the need to either build each and every component into a separate javascript file or, bundle a group of required components for every page I have, many would argue that I could have developed the project as an SPA — Single Page Application — but, in a medium to large scale project it would be tremendously challenging — especially to a backend focused web developer like myself.
So, I’ve re-invented a part of an existing wheel, which is webpack and also probably Laravel Mix, luckily in the default Laravel project we have packages.json file present so, I’ve included all Vue CLI services required to build SFCs as development dependencies by running npm install --save-dev [required vue-cli packages] replacing the bracket with the packages needed for Vue CLI to work, I got the packages by creating a dummy Vue project and getting the required dependencies listed in its packages.json file.
And finally I’ve developed a shell script and a json file that do the building job for me, it basically bundles multiple components together in several minified javascript files, where each bundle file is meant to be used by a page or view in the project, and due to the scale of the project, the pages specification file is comprised of three levels modules, then pages within each module and, lastly components within each page.
And just by running the script all pages required components are built in one shot, or optionally you can pass the name of the module and page, to build only the components of the specified module or page. The following gist explains how it’s done in more detail.
And that’s how I managed to handle using vue components in a conventional old-school multi page web application. I hope this is helpful enough for backend web developers out there, as this could be the entry point to the frontend development realm.
And as always, thanks for reading.