Move Laravel Auth Views to VueJS with Vuetify

This article will focus on moving the Laravel Auth views completely to VueJS with the exception of Login. We will keep the Laravel backend mostly the same, but will only serve the index file from Laravel.

We will also be utilizing Vue Router for all page routing and domain filtering for the Dashboard, Auth, and Landing Page views. Some routes will only work for certain domains and we will accomplish this by loading routes depending on the request domain.

You can find the full code example at github

This example builds off of a previous series. Check out the first article here.

We will need to validate input prior to sending it to the API. We can utilize a great VueJS package called VeeValidate. It is easy to use and it keeps the components clean of complex validation logic. Run the below command in the project root.

We can also use a great package for UI development called Vuetify. This will greatly simplify the frontend and make component creation a breeze. Run the below command to install it.

Check out the documentation for VeeValidate and Vuetify for more info.

I will be using this folder structure to organize components. You can modify this to your liking.

We need a method for interacting with the Laravel Auth routes. We can create an auth.js file that can take care of this. We will import this file into our components whenever we need to do any auth-like tasks. It is pretty simple.

Since there are multiple sites being served from our frontend, we need to create some Layouts. This will cleanup the App.vue and make it more general. Below you will see the DashboardLayout and the AuthLayout.

The new slimmed down App.vue file

Here are the new Auth Vue Components. I just copied the original blade views and placed them in a Vue Single File Component. Not much has changed except for the validation logic and the data properties. I did add some loading indications to make for a better user experience.

One thing to note here is we are still making a web post request to the normal Laravel endpoint. This will trigger a page reload, but this is something that the user should expect.

This is just the Laravel Welcome page. I moved that over as well.

This component will be used with the catchall route in Vue Router.

We will now conditionally load routes depending on the domain used in the request. We will also switch history mode on so that the # sign is removed from the URL. This will help with any redirects on the Laravel side.

Here we are importing all of the View Components and conditionally returning a set of routes depending on the hostname used. This is pretty slick.

We will now direct all page traffic to the Vue frontend. We do this with a catch-all route in web.php that points to the index.blade.php view.

I will still keep the post routes for login and logout. See the updated web.php and api.php route files below

We can now adjust the controllers to return json responses to our Vue app. The format that the View Components are looking for is:

We can automatically add 422 validation errors to our VeeValidate error object by using an interceptor. I am also redirecting to the login page on 401 errors. Modify the axios.js file as shown below.

Laravel’s password reset emails use a named password.reset route to generate the reset link. We can create a new notification that will be used instead that generates the correct tenant URL. We will also need to specify the database connection to be used to store the password reset requests. See the changes below.

Add a connection entry and put in tenant as shown below

So I ran my tests after all of the above changes and most didn’t pass. It was mainly due to the redirect URLs and views not matching. I updated everything in the Github Repo. You can also check out the article about optimizes tests here.

There are a tons of changes in this article, but I feel like the frontend will be more consistent and streamlined this way. It also separates the frontend and the API fully except for the Login/Logout routes.

Hopefully this helped you out! If you have any questions, comments, suggestions please let me know down in the comments.

Check out the Series below!

Part 1 — Laravel Passport and Hyn\Tenancy

Part 2 — VueJS and Laravel API

Part 3 — Laravel Multi-Tenant Testing

Related posts:

The first non-stop trans-Atlantic flight actually took place in 1919, when two English flyers, John Alcock and Arthur Brown, flew a modified Vickers Vimy bomber from Newfoundland, Canada to County…

Sublime Text has been my go-to code editor for long as I can remember. It’s fast, light-weight, and has friendly interface (for me as a UX designer, this is definitely a strong point). After a long…

Some of my life experiences. Inspiring to be an entrepreneur, moving to San Francisco, working at a fast growing startup, the YC network, and founding Middesk.