VueJS and Laravel API — Part 2

Now that’s a Vue!

I’ll be creating a basic admin dashboard using VueJS. I am trying the Vuetify component package to make development easier. This was my first experience with Vuetify and it made creating this a breeze!

Edit — There is an updated article that revamps and builds upon this article. Check out Part 2.5

This article is part of a series. Check out the rest below!

Part 0 — Laravel Multi-Tenant App Setup

Part 1 — Laravel Passport and Hyn\Tenancy

Part 2 — VueJS and Laravel API ←You are Here

Part 3 — Laravel Multi-Tenant Testing

Here is the demo repo I am building on. Make sure to use the Main branch.

sadnub/laravel-tenancy-passport-demo

Check out Vuetify’s documentation.

Quick Start - Vuetify.js

As mentioned before, I am using Vuetify as the building blocks for this dashboard. Check out the documentation link above for more info.

Prerequisites

This is a multi-tenant example. See Part 1 of this series for more info. You will need to browse to /register and create a tenant before you can sign into the dashboard. Once the tenant is created, you will be directed to the tenant login page.

Cleanup

First things first, we need to clean up the Laravel configuration.

Delete these files

resources\sass\*
resources\js\bootstrap.js
resources\js\components\ExampleComponent.vue

Note: Prior to Laravel 5.7 the sass and js folder are in assets

You can remove some packages that are included with Laravel

npm remove bootstrap
npm remove popper.js
npm remove lodash

Open up the webpack.mix.js and remove this line.

.sass('resources/sass/app.scss', 'public/css');

Setup

Use npm (or whatever) to include these packages.

npm install vue-router --save-dev
npm install vuetify --save-dev

The setup for Vuetify is easy. Just import Vuetify and add to Vue as a plug-in in your app.js file.

import Vuetify from 'vuetify'
Vue.use(Vuetify)

This will include ALL Vuetify components whether you use them or not. If you want to shrink your bundle size follow the steps in the Vuetify docs.

Webpack

The only thing I do with Webpack is create an alias so that @ points to the js root directory. This removes the need for relative paths when importing files. Add the following code to webpack.mix.js.

mix.webpackConfig({    
  resolve: {      
    alias: {
 @’: __dirname + '/resources/assets/js'      
    },    
  },  
})

Your path might differ depending on the version of laravel

Axios Setup

There are many ways to get this working. I prefer only importing axios when I need it. Create a config directory and create a file called axios.js.

We can import this file whenever we need to interact with the API.

Components

App.vue

This is the component that we will build everything from. I put all of the Vuetify layout components here. This gives us a basic dashboard layout with a header and sidebar.

If you look at line 37, I have a form embedded in the menu. I use this so that users can logout since Laravel requires a POST request to /logout. Then I have a Vue method logout() that will submit the form. The token is a computed property that pulls the CSRF token from the meta tag. This is the same approach the Laravel Auth scaffolding uses and is pretty slick!

I also have <router-view></router-view> specified. This is were it will render the different pages (or Views) from the Router.

Sidebar Links

In App.vue, the sidebar links are created based on a file called sidebarLinks.js in the root of the js folder. Go ahead and create this file.

API

Create an api folder and add ticket.js. This is where I import axios and add the various API functions.

I then import this file into the components I need. Each method returns a Promise and allows for the component to do the success and error handling.

Vue Router

This is the routes.js file I am using. It is pretty simple with only two routes. You can add more if needed.

app.js

Make sure your app.js file looks like this. This includes the plugins and the routes configuration.

Next we will create the components!

Ticket View

This is a router view that has all of the dashboard functionality. There is ALOT going on here. I’ll try to break it down.

Below is an image of the Tickets component in action. I basically just grabbed the example from the Vuetify data-table docs and made it work with my API.

The main component used here is the <v-data-table>. This is a Vuetify component that displays, formats, and sorts the data. There is also capabilities to edit, delete, and add Tickets from this view.

Once a user browses to this component, it will attempt to pull all tickets from the API. This happens in the created() hook. The tickets.js file is imported in this component and allows for the API calls to be made easily.

Each API call will get a Promise back and uses the .then() and .catch() methods to handle successful calls and error. I’m using the <v-snack-bar> component to display the status of API calls.

There are various Vue methods to handle the crud operations. They will basically attempt to perform the API call. If the call is successful it will update the table with the new information so that it doesn’t need to pull all of the tickets again. Neat!

Compile

Now it is time to compile all of the code written thus far. If you haven’t already run: npm install in the laravel base directory. Then run npm run dev to build the modules. You can also use npm run watch to build automatically whenever you change files. Lastly, if you are building for production you can run npm run prod. This will build and minimize the code.

Laravel Auth Views

This is something I haven’t tried before with these views. I included Vue and Vuetify and used them alongside blade template engine. After finishing it I don’t think there is much value doing it this way since it is kind of slow to load. But the UI is consistent across the entire app which is a plus.

app.blade.php

This is the blade layout where I include the Vue and Vuetify files.

login.blade.php

This is the login blade template reworked with Vuetify components.

register.blade.php

The register blade template reworked with Vuetify components.

Conclusion

And that is it for the simple Vue dashboard. It should be really easy to add functionality to this by simply creating View components and importing them into the routes and sidebar.

I linked the example repo at the beginning and should be a nice reference if you experience any issues implementing this. Also feel free to leave a comments or suggestions.

Next I think I am going to rework the REST API into a GraphQL endpoint. Also expect some Tests in the future!