upgrade tailwind version and laravel-mix

resources/assets/js/app.js

@@ -3,6 +3,7 @@
  * include Vue and Vue Resource. This gives a great starting point for
  * building robust, powerful web applications using Vue and Laravel.
  */
+import Vue from 'vue'
 import router from './router.js'
 import store from './store/index'
 import utils from './helpers/utilities'
@@ -11,7 +12,7 @@ import swal from 'sweetalert'
 
 require('./bootstrap')
 
-window.Vue.prototype.$utils = utils
+Vue.prototype.$utils = utils
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/assets/js/bootstrap.js

@@ -25,13 +25,6 @@ Vue.use(Vuelidate)
 Vue.use(Transitions)
 
 window._ = require('lodash')
-/**
- * Vue is a modern JavaScript library for building interactive web interfaces
- * using reactive data binding and reusable components. Vue's API is clean
- * and simple, leaving you to focus on building your next great project.
- */
-
-window.Vue = require('vue')
 
 /**
  * Custom Directives
@@ -97,7 +90,8 @@ global.axios.interceptors.response.use(undefined, function (err) {
   }
   if (!err.response) {
     window.toastr['error'](
-      'Please check your internet connection or wait until servers are back online', 'Network Error'
+      'Please check your internet connection or wait until servers are back online',
+      'Network Error'
     )
   } else {
     if (
@@ -121,7 +115,8 @@ global.axios.interceptors.response.use(undefined, function (err) {
       window.toastr['error'](
         err.response.data.message
           ? err.response.data.message
-          : err.response.data || 'Unknown error occurred', 'Error'
+          : err.response.data || 'Unknown error occurred',
+        'Error'
       )
     }
   }

resources/assets/js/components/base/index.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 import BaseModal from './modal/BaseModal.vue'
 import BaseLoader from './BaseLoader.vue'
 import BaseCustomerSelect from './BaseCustomerSelect.vue'

resources/assets/js/helpers/directives.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 Vue.directive('click-outside', {
   bind: function (el, binding, vnode) {
     el.event = function (event) {

resources/assets/js/views/customers/Index.vue

@@ -2,10 +2,10 @@
   <base-page class="customer-create">
     <sw-page-header :title="$t('customers.title')">
       <sw-breadcrumb slot="breadcrumbs">
-        <sw-breadcrumb-item to="dashboard" :title="$t('general.home')" />
+        <sw-breadcrumb-item :title="$t('general.home')" to="dashboard" />
         <sw-breadcrumb-item
-          to="#"
           :title="$tc('customers.customer', 2)"
+          to="#"
           active
         />
       </sw-breadcrumb>
@@ -159,7 +159,7 @@
           :filterable="false"
           cell-class="no-click"
         >
-          <div class="relative block" slot-scope="row">
+          <div slot-scope="row" class="relative block">
             <sw-checkbox
               :id="row.id"
               v-model="selectField"
@@ -243,16 +243,16 @@
               <dot-icon slot="activator" />
 
               <sw-dropdown-item
-                tag-name="router-link"
                 :to="`customers/${row.id}/edit`"
+                tag-name="router-link"
               >
                 <pencil-icon class="h-5 mr-3 text-gray-600" />
                 {{ $t('general.edit') }}
               </sw-dropdown-item>
 
               <sw-dropdown-item
-                tag-name="router-link"
                 :to="`customers/${row.id}/view`"
+                tag-name="router-link"
               >
                 <eye-icon class="h-5 mr-3 text-gray-600" />
                 {{ $t('general.view') }}
@@ -281,7 +281,6 @@ import {
   EyeIcon,
 } from '@vue-hero-icons/solid'
 import AstronautIcon from '../../components/icon/AstronautIcon'
-import { request } from 'http'
 
 export default {
   components: {

resources/assets/sass/crater.scss

@@ -1,11 +1,9 @@
-// Tailwind
-//----------------------------------
+@tailwind base;
 
-@import 'tailwindcss/base';
+@tailwind components;
 
-@import 'tailwindcss/components';
+@tailwind utilities;
 
-@import 'tailwindcss/utilities';
 
 // Plugins
 //----------------------------------