upgrade tailwind version and laravel-mix

package.json

@@ -1,11 +1,11 @@
 {
     "private": true,
     "scripts": {
-    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "dev": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "production": "mix --production"
     },
     "devDependencies": {
         "babel-eslint": "^8.2.6",
@@ -15,7 +15,8 @@
         "eslint-loader": "^3.0.4",
         "eslint-plugin-prettier": "^3.3.0",
         "eslint-plugin-vue": "^4.7.1",
-    "laravel-mix": "^5.0.7",
+        "laravel-mix": "^6.0.6",
+        "postcss": "^8.1",
         "prettier": "^2.2.1",
         "resolve-url-loader": "3.1.0",
         "sass": "^1.29.0",
@@ -24,7 +25,7 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
-    "@bytefury/spacewind": "^0.3.3",
+        "@bytefury/spacewind": "^0.4.0",
         "@vue-hero-icons/outline": "^1.6.3",
         "@vue-hero-icons/solid": "^1.6.3",
         "axios": "^0.19",
@@ -34,7 +35,7 @@
         "moment": "^2.29.1",
         "sweet-modal-vue": "^2.0.0",
         "sweetalert": "^2.1.2",
-    "tailwindcss": "^1.9.1",
+        "tailwindcss": "^2.0.1",
         "toastr": "^2.1.4",
         "v-tooltip": "^2.0.2",
         "vue": "^2.6.10",

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
 //----------------------------------

webpack.mix.js

@@ -1,5 +1,6 @@
 const mix = require('laravel-mix')
 const tailwindcss = require('tailwindcss')
+const path = require('path')
 
 mix.webpackConfig({
   resolve: {
@@ -9,17 +10,14 @@ mix.webpackConfig({
   },
 })
 
-/*
- |--------------------------------------------------------------------------
- | Admin
- |--------------------------------------------------------------------------
- */
-
 mix
   .js('resources/assets/js/app.js', 'public/assets/js/')
+  .vue({
+    version: 2,
+    extractVueStyles: true,
+  })
   .sass('resources/assets/sass/crater.scss', 'public/assets/css/')
   .options({
-    processCssUrls: false,
     postCss: [tailwindcss('./tailwind.config.js')],
   })