Laravel is one of my most preferred PHP frameworks, truth be told it is also one of my preferred frameworks to build Web Applications regardless of programming language. The primary reason for this is that from a framework point of view, it actually takes care of a lot of things for you and it does actually help you to focus on the more important aspects of your application.
Many of the software solutions I tend to get involved in developing these days, the website or what can be termed as the main client interaction point, is usually only the very tip of the application and often what lies behind that is a very complex and tangled web of technological solutions all with varying levels of interactions and dependencies.
One of the aspects I like about Laravel is that in some respects it can be a very opinionated framework yet in others it also actually gets out of the way and enables you to make your own decisions on how you want to use it. Which in my experience is often a very difficult balance for software frameworks to achieve.
One of these areas is where it comes to using your “Frontend Framework” of choice. You can quite literally use any Frontend Framework of your choice with Laravel, it does not necessarily tie you down to any despite the fact that it appears to come prepackaged with Vue.JS. You can equally choose not to have any UI at all and purely use Laravel to develop an API or even Console Application.
Since Laravel version 5.3, Vue.js has been the default frontend framework included in a Laravel installation. There appears to be no official reason why Vue was chosen over other worthy options, such as React, but my guess is that it’s because Vue and Laravel share the same philosophy: simplicity and an emphasis on the developer experience.
Starting a new project with Laravel is easy once you have Laravel installed and configured on your Ubuntu Desktop all it takes is
laravel new [project name] however the real art is what to do afterwards
What is Single Page Application
Websites are typically broken up into pages in order to make the information they contain more convenient to consume. This has be traditionally implemented using the server/client model, where each page must be loaded from the server with a different URL. To navigate to a new page, the browser must send a request to the URL of that page. The server will send the data back and the browser can unload the existing page and load the new one. For the average internet connection, this process will likely take a few seconds, during which the user must wait for the new page to load.
By making use of AJAX utilities, a different model is possible: the browser can load an initial web page, but navigating to new pages will not require the browser to unload the page and load a new one. Instead, any data required for new pages can be loaded asynchronously with AJAX. From a user’s perspective, such a website would appear to have pages just like any other, but from a technical perspective, this site really only has one page. Hence the name, Single-Page Application (SPA).
The disadvantage of the SPA architecture is that it makes the client app bulkier due to the added functionality, so gains from speeding up page changes may be negated by the fact that the user must download a large app on the first page load. Also, handling routes adds complexity to the app as multiple states must be managed, URLs must be handled, and a lot of default browser functionality must be recreated in the app.
Configuring Vue with Laravel
As mentioned previously, Vue for the most part comes pre-packaged with Laravel, so when you create a new project with Laravel and inspect the code you might be think that everything has been preconfigured for you. However, the answer is both a Yes and No!
There is a tremendous amount of time saved here but unfortunately there is still a little bit of work to be done in order to have a fully functioning Vue based frontend. Fortunately, Laravel does come packed with some features to make this really easy to do!
The secret here is that building a Vue single page with Laravel combines building a Clean API driven applications. However, to get them working together we need to esnure that server-side Laravel router is able to work in tandem with the
history.pushState API of the Vue Router
The Vue router can be configured to use history mode or the default hash-mode, which uses the URL hash to simulate a full URL so the page won’t reload when the URL changes. Personally, I prefer to use the history mode which means we need to configure a Laravel route to match all possible URLS depending on which route the user enters.
Install Vue-Router in Laravel project
Some frontend frameworks, such as Angular or Ember, include a router library out-of-the-box. The philosophy guiding these frameworks is that the developer is better served with a complete, integrated solution for their SPA. Vue.js, do not include a router. Instead, you must install a separate library.
In the case of Vue.js, an official router library is available called Vue Router. This library has been developed by the Vue.js core team, so it is optimized for usage with Vue.js and makes full use of fundamental Vue features such as components and reactivity.
Using a router in a SPA Application provides the following functionality:
- Handle navigation actions within a page
- Match parts of the application to defined routes
- Manage the address bar
- Manage browser history
- Manage Scroll bar behaviour
To get started with this, I am going to assume you have Laravel installed and configured on your Ubuntu Desktop and have already created a new project.
Our first step is to install Vue-Router using yarn. I use PHPStorm so will be running the command using the integrated terminal window in the project root directory
When vue-router is installed two components have been registered globally throughout your application for use:
RouterLinkGenerally used instead of
atags to create hyperlinks and access Vue Router
RouterViewOutlet to enable swap of designated page components
Configure Vue-Router in Laravel Project
The Vue-Router maps a route to a component and then renders it with
router-view within the context of application
With Vue Router, different pages of the application are represented by different components. When you set up Vue Router, you will pass in configuration to tell it which URLs map to which component. Then, when a link is clicked in the app, Vue Router will swap the active component so as to match the new URL
We will need to update the
resources/assets/js/app.js and configure the Vue router. I typically remove all the existing code and replace it with the below
You may gleen from this that we are going to have to create 2 new Vue components the Home and About views. First,lets introduce a convention, primarily as you may know already Laravel favours convention over configuration which in my view is what software should always attempt to implement. So a convention I try follow when developing Vue applications to try separate out my Views from resuable compoenents.
In this convention a View is typically a component which has a route and a Component is something that can be re-used in multiple routes. So what I like to do is create another folder in
resources/js and name is views. In this folder I will create my view components that I have defined in the routes above
We can create these files simply using the terminal window
Lets now add just enough code to these files in order to get our example working. First lets start with our
App.vue file, because this is the outermost container element for our application. We’ll define and application heading and some basic navigation functionality use
The most important tag in our
App component is the
<router-view></router-view> tag, which is where our router will render the given component that matches the route (i.e.
Next we will add some basic code to the other two views so we have at least have something to display
We’re now complete with the UI aspect of our application.
Configure Server-side Vue Controller
We are going to leverage the Laravel so that we can build a server-side API interact with our application.
Lets create a new VueController class to ensure that any web route will map to our SPA.
We will need to ensure the server-side defines a route, to do this we open
routes/web.php for editing, to replace the welcome route with the following.
Open the new Controller to add in the following logic
We now need to create a new file
resources/views/vue.blade.php and add the following code
The require #app element which contains our App Component has been defined.
Running our Vue SPA
We will use yarn run the watch command
if we open a browser and visit our test site we will see the following and be able to click on the links and view the pages.
We have developed a basic skeleton to build a Vue SPA and now we are ready to further build on this and to start using Laravel to develop the API layer which the SPA will interact with.
In order to learn how to further speed up your development process with Laravel you can learn how to include a Material Design Component Framework like MDB Vue Pro to develop great looking web applications using the Material Design Principles developed by Google
- How to use Github actions to build & deploy Github nuget packages - October 14, 2021
- How to implement cross cutting concerns with MediatR Pipeline Behaviours - October 5, 2021
- Understanding the difference between Queue and Stack Data Structure - September 22, 2021