Migrate from Laravel Mix to Vite

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /public/hot
+/public/build
 /public/storage
 /storage/*.key
 /vendor

.travis.yml

@@ -15,7 +15,7 @@ before_script:
   - travis_retry composer install ${COMPOSER_FLAGS} --no-interaction --prefer-source
   - php artisan vue-i18n:generate
   - yarn install
-  - npm run prod
+  - npm run build
   - php artisan key:generate
 
 cache:

composer.json

@@ -18,7 +18,7 @@
         "guzzlehttp/guzzle": "^7.2",
         "intervention/image": "^2.7",
         "laravel-lang/lang": "^10.4",
-        "laravel/framework": "^9.0",
+        "laravel/framework": "^9.19",
         "laravel/helpers": "^1.5",
         "laravel/legacy-factories": "^1.3",
         "laravel/nova": "~3.0",

package.json

@@ -1,40 +1,43 @@
 {
-  "private": true,
-  "scripts": {
-    "dev": "npm run development",
-    "development": "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": "npm run watch -- --watch-poll",
-    "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",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-  },
-  "dependencies": {
-    "@prettier/plugin-php": "^0.17.3",
-    "axios": "^0.25",
-    "bootstrap": "^4.5.2",
-    "cross-env": "^5.2.1",
-    "cross-spawn": "^6.0.5",
-    "false": "^0.0.4",
-    "in-viewport": "^3.6.0",
-    "jquery": "^3.5.0",
-    "laravel-mix": "^4.1.4",
-    "laravel-mix-tailwind": "^0.1.0",
-    "lodash": "^4.17.21",
-    "popper.js": "^1.16.1",
-    "prettier": "^1.19.1",
-    "resolve-url-loader": "2.3.2",
-    "sass": "^1.26.10",
-    "sass-loader": "^7.3.1",
-    "tar": "^4.4.15",
-    "v-autocomplete": "^1.8.2",
-    "vue": "^2.6.11",
-    "vue-clipboard2": "^0.3.1",
-    "vue-i18n": "^8.21.0",
-    "vue-input-tag": "^2.0.7",
-    "vue-multiselect": "^2.1.3",
-    "vue-select": "^2.6.4",
-    "vue-tables-2": "^1.6.25",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+    "private": true,
+    "scripts": {
+        "development": "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": "npm run dev -- --watch-poll",
+        "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "dev": "vite",
+        "build": "vite build"
+    },
+    "dependencies": {
+        "@prettier/plugin-php": "^0.17.3",
+        "axios": "^0.25",
+        "bootstrap": "^4.5.2",
+        "cross-env": "^5.2.1",
+        "cross-spawn": "^6.0.5",
+        "false": "^0.0.4",
+        "in-viewport": "^3.6.0",
+        "jquery": "^3.5.0",
+        "lodash": "^4.17.21",
+        "popper.js": "^1.16.1",
+        "prettier": "^1.19.1",
+        "resolve-url-loader": "2.3.2",
+        "sass": "^1.26.10",
+        "sass-loader": "^7.3.1",
+        "tar": "^4.4.15",
+        "v-autocomplete": "^1.8.2",
+        "vue": "^2.7.0",
+        "vue-clipboard2": "^0.3.1",
+        "vue-i18n": "^8.21.0",
+        "vue-input-tag": "^2.0.7",
+        "vue-multiselect": "^2.1.3",
+        "vue-select": "^2.6.4",
+        "vue-tables-2": "^1.6.25",
+        "vue-template-compiler": "^2.6.11",
+        "@vitejs/plugin-vue2": "^1.1.2"
+    },
+    "devDependencies": {
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0"
+    }
+}

public/js/bootstrap.js

@@ -1,4 +1,5 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 
 /**
@@ -17,7 +18,8 @@ try {
  * and simple, leaving you to focus on building your next great project.
  */
 
-window.Vue = require('vue');
+import Vue from 'vue';
+window.Vue = Vue;
 
 
 
@@ -28,7 +30,8 @@ window.Vue = require('vue');
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 

resources/assets/js/app.js

@@ -5,9 +5,10 @@
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-require('./bootstrap');
+import './bootstrap';
 
-window.Vue = require('vue');
+import Vue from 'vue';
+window.Vue = Vue;
 
 window.Vue.config.debug = true; //TODO: Remove in production
 

resources/assets/js/bootstrap.js

@@ -1,4 +1,5 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 
 
@@ -19,7 +20,8 @@ try {
  * and simple, leaving you to focus on building your next great project.
  */
 
-window.Vue = require('vue');
+import Vue from 'vue';
+window.Vue = Vue;
 
 
 
@@ -31,7 +33,8 @@ window.Vue = require('vue');
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 

resources/assets/js/components/ResourceCard.vue

@@ -66,7 +66,7 @@
 <script>
 
 
-    import ResourcePill from "./ResourcePill";
+    import ResourcePill from "./ResourcePill.vue";
 
     var RESOURCES_URL = process.env.MIX_RESOURCES_URL;
 

resources/assets/js/components/ResourceForm.vue

@@ -118,8 +118,8 @@
 <script>
     import Multiselect from 'vue-multiselect'
     import _ from 'lodash'
-    import ResourceCard from "./ResourceCard";
-    import Pagination from "./Pagination";
+    import ResourceCard from "./ResourceCard.vue";
+    import Pagination from "./Pagination.vue";
     import VueClipboard from 'vue-clipboard2'
 
     window.multiselect = this;

resources/assets/js/components/SearchPageComponent.vue

@@ -120,7 +120,7 @@
 
 <script>
     import Multiselect from 'vue-multiselect'
-    import Pagination from "./Pagination";
+    import Pagination from "./Pagination.vue";
 
     export default {
         components: {Multiselect, Pagination},

resources/views/layout/base.blade.php

@@ -26,7 +26,7 @@
     @yield('extra-css')
 
 
-    <link rel="stylesheet" href="{{mix('css/app.css')}}" type="text/css"/>
+    @vite('resources/css/app.css')
 
 
 
@@ -99,7 +99,7 @@
 @endif
 
 
-<script src="{{mix('js/app.js')}}"></script>
+@vite('resources/js/app.js')
 <script type="text/javascript" src="{{ asset('lib/jquery/jquery.js') }}"></script>
 {{--<script src=//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js charset=utf-8></script>--}}
 <script type="text/javascript" src="{{ asset('js/ext/plugins.js') }}"></script>

resources/views/layout/simple.blade.php

@@ -20,7 +20,7 @@
     <!-- Theme stylesheets -->
     @if (Route::getCurrentRoute() && Route::getCurrentRoute()->uri() != 'home' && Route::getCurrentRoute()->uri() != '/')
         <link rel="stylesheet" href="{{asset('css/ext/style.css')}}" type="text/css" />
-        <link rel="stylesheet" href="{{mix('css/app.css')}}" type="text/css" />
+        @vite('resources/css/app.css')
     @else
         <link rel="stylesheet" href="{{asset('css/ext/home.css')}}" type="text/css" />
     @endif
@@ -80,7 +80,7 @@
 
 <!-- Scripts -->
 
-<script src="{{mix('js/app.js')}}"></script>
+@vite('resources/js/app.js')
 <script type="text/javascript" src="{{ asset('lib/jquery/jquery.js') }}"></script>
 <script type="text/javascript" src="{{ asset('js/ext/plugins.js') }}"></script>
 <script type="text/javascript" src="{{ asset('js/ext/functions.js') }}"></script>

resources/views/layout/tall.blade.php

@@ -24,7 +24,7 @@
 
     @yield('extra-css')
 
-    <link rel="stylesheet" href="{{mix('css/app.css')}}" type="text/css"/>
+    @vite('resources/css/app.css')
 
 
     <script>

vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/assets/sass/app.scss',
+                'resources/assets/js/app.js',
+            ],
+            refresh: true,
+        }),
+    ],
+});