Laravel 5.3 to 5.8 with Vue JS (Part2)

5 min readJul 9, 2019

In my previous articles, I only discuss about how laravel’s works with vue js, In this part, i will discuss about integration of popular UI framework Vuetify . Vuetify has lots of UI controls and easy to use.

I also convert the common js(require and module) feature to ES6 features for Vue JS with Laravel, which is more comfortable for developer and change the structure of Vue JS implementation in Laravel framework. To Understand how Vue JS works in laravel, you can read first part of my article.

Laravel 5.3 to 5.8 with Vue JS (Part 1)

Install the Vuetify UI/UX Component framework in Laravel project

> npm install --save Vuetify

Install the Material Font Icons for Vue JS

> npm install --save material-design-icons-iconfont

Convert common JS to ES6 in for Vue JS and Laravel 5.3 projects

Then Go to routes/web.php route file and rename the welcome view to app view

Then go to terminal and run command to build and package the vue js in laravel by laravel elexir

> npm run dev

Then to root of laravel project, stop and then run command again

> php artisan serve --port=8989

Convert common JS code to ES6 in for VUE JS and Laravel 5.8 projects

In laravel 5.8 there is no assets folder at resources folder. You can find the js folder directly to resources folder, the path is resoruces/js folder. you can find all the vue js related file in that folder.

Then Go to routes/web.php route file and change the welcome view to app view

Then go to terminal, run the below command to build and package the vue js with laravel-mix

> npm run watch

Then add new tab to terminal or command line and run the below command

> php artisan serve --port=2020

Configure the Vuetify in Laravel 5.3 and 5.8 Framework with Vue JS

I user little bit different technique to configure the vuetify with vue js in laravel. I have copy some of the files and library related to css style from node_modules package and past it to public folder and link them to app.blade.php file.

In Figure 2.1 , First find find the vuetify package folder in node_modules , then copy the dist folder. After that create the folder name vuetify in public/css folder and past the css and js file of dist folder.

In Figure 2.2, I find another folder named node_modules/material-design-icons-iconfont , then copy the dist folder. After that create the folder name material-icons in public/css folder, past all the content of dist folder to material-icons folder.

Import of Vuetify npm packag to app.js so Vue JS Component can easily access Vuetify by adding the below code in app.js file.

Then add the public/css/vuetify folder css file and public/css/material-icons css file to resources/views/app.blade.php , Laravel application and Vuetify can get access to vuetify css class and material css classes.

Form design with Vuetify to Vue JS Components

Then copy and past below code to Example.vue file, which is implementation of Vue JS with Vuetify in Vue Component.

In line 1 to 81, template of Vue JS, it is a sample registration form. And In 83 to 120, i implement the vue js code follow ES6 module feature.

<script>
  export default {  }
</script>

It the ES6 declaration for create the module, developer will is it for create the Vue JS component.

About data() in Vue JS

data() is the private memory of each component where you can store any variables you need. It is recommended to initialize all the data properties in the data option. For example, given the following template in line 24 … 31:

<v-flex xs12> 
    <v-text-field 
        v-model="firstName"  // Implement data by v-model         
        box                
        placeholder="First Name"                
        filled                
        label="Enter First Name">
    </v-text-field>            
</v-flex>

We can introduce the data variables in template by using v-model="firstName” in line 26

In line 90, i just implement the data option of Vue JS:

export default { 
   ...
   data() { 
     return {
       firstName: '', 
       ....     
     }
   },
....
}

Methods in Vue Instance:

A Vue method is a function associated with the Vue instance. Actions and Methods are defined inside the methods property. Methods are especially useful when you need to perform an action of an element to handle events. we can see in line 99 …119, I implement , how to call methods in vue component.

export default {
  methods: {
    onSubmitForm() {
     .......
    }
  }
}

Then developer can use it to template section, there is example below, which i implement in Example component in line 72

<template>
     <v-btn @click="onSubmitForm" color="success">Submit</v-btn></template>

Output of the Vue+ Vuetify+ Laravel form design in browser

In next part of the articles, i will discuss about integration of Vue-Router with Laravel Framework. How Router works with SPA application with Vue JS