Migrate from Laravel Mix to Vite (#2)

* Add npm dependencies

* Update build scripts

* Configure Vite

* Remove `webpack.mix.js`

* Rename ENV variables

* Add PostCSS configuration for Tailwind

* Use new `@vite` Blade directive

* Add `.vue` extension to Vue imports

* Ignore build assets

* wip

* inertia

* wip

* Update tailwind.config.js

* wip

---------

Co-authored-by: Shift <[email protected]>

.env.example

@@ -54,8 +54,8 @@ PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
 TORCHLIGHT_TOKEN=
 

.github/workflows/deploy.yml

@@ -31,7 +31,7 @@ jobs:
         run: composer install -q --no-ansi --no-interaction --no-scripts --no-suggest --no-progress --prefer-dist
 
       - name: Run npm
-        run: npm ci && npm run production
+        run: npm ci && npm run build
 
       - name: Prepare Laravel Application
         run: |

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /public/hot
+/public/build
 /public/storage
 /public/js
 /public/css

package.json

@@ -1,27 +1,21 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.0",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@tailwindcss/typography": "^0.5.2",
         "autoprefixer": "^10.4.2",
-        "axios": "^0.25",
-        "browser-sync": "^2.27.9",
-        "browser-sync-webpack-plugin": "^2.3.0",
-        "laravel-mix": "^6.0.6",
+        "axios": "1.6.0",
         "postcss": "^8.4.8",
         "tailwindcss": "^3.0.23",
         "tailwindcss-selection-variant": "^0.1.0",
-        "vue-loader": "^16.8.3"
+        "vue-loader": "^16.8.3",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0"
     },
     "dependencies": {
         "@headlessui/vue": "^1.6.1",
@@ -33,6 +27,7 @@
         "inter-ui": "^3.19.3",
         "laravel-vue-i18n": "^1.4.2",
         "mitt": "^3.0.0",
-        "vue": "^3.2.31"
+        "vue": "^3.2.31",
+        "@vitejs/plugin-vue": "^3.0.1"
     }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

resources/js/Pages/Article.vue

@@ -32,11 +32,11 @@
 <script setup>
 import { formatDate} from "@/functions";
 
-import Header from '@/Shared/Header'
-import CTAFooter from '@/Shared/CTAFooter'
-import Footer from '@/Shared/Footer'
+import Header from '@/Shared/Header.vue'
+import CTAFooter from '@/Shared/CTAFooter.vue'
+import Footer from '@/Shared/Footer.vue'
 import { Head } from '@inertiajs/inertia-vue3'
-import TopBanner from "@/Shared/TopBanner";
+import TopBanner from "@/Shared/TopBanner.vue";
 
 defineProps({
     article: Object

resources/js/Pages/Blog.vue

@@ -54,11 +54,11 @@
 import { formatDate } from "@/functions";
 import { Link } from '@inertiajs/inertia-vue3'
 
-import Header from "@/Shared/Header";
-import CTAFooter from "@/Shared/CTAFooter";
-import Footer from "@/Shared/Footer";
+import Header from "@/Shared/Header.vue";
+import CTAFooter from "@/Shared/CTAFooter.vue";
+import Footer from "@/Shared/Footer.vue";
 import { Head } from "@inertiajs/inertia-vue3";
-import TopBanner from "@/Shared/TopBanner";
+import TopBanner from "@/Shared/TopBanner.vue";
 
 defineProps({
     articles: Object,

resources/js/Pages/Contact.vue

@@ -104,10 +104,10 @@
 
 <script setup>
 import { Head, useForm, Link } from '@inertiajs/inertia-vue3'
-import ContactSuccessModal from "@/Shared/ContactSuccessModal";
+import ContactSuccessModal from "@/Shared/ContactSuccessModal.vue";
 import { computed } from 'vue'
-import Footer from "@/Shared/Footer";
-import TopBanner from "@/Shared/TopBanner";
+import Footer from "@/Shared/Footer.vue";
+import TopBanner from "@/Shared/TopBanner.vue";
 import { getCurrentLanguage } from "@/functions";
 
 const currentLanguage = getCurrentLanguage();

resources/js/Pages/Home.vue

@@ -267,12 +267,12 @@ import { ref, computed } from 'vue'
 import { formatDate, projectColors, getCurrentLanguage } from "@/functions"
 import { Link } from '@inertiajs/inertia-vue3'
 
-import Header from '@/Shared/Header'
-import CTAFooter from '@/Shared/CTAFooter'
-import Footer from '@/Shared/Footer'
+import Header from '@/Shared/Header.vue'
+import CTAFooter from '@/Shared/CTAFooter.vue'
+import Footer from '@/Shared/Footer.vue'
 import { Head } from '@inertiajs/inertia-vue3'
-import TopBanner from "@/Shared/TopBanner"
-import ProjectModal from "@/Shared/ProjectModal"
+import TopBanner from "@/Shared/TopBanner.vue"
+import ProjectModal from "@/Shared/ProjectModal.vue"
 
 const props = defineProps({
     'projects': Array,

resources/js/app.js

@@ -4,14 +4,15 @@ import { Inertia } from "@inertiajs/inertia";
 import { InertiaProgress } from "@inertiajs/progress";
 import { i18nVue } from "laravel-vue-i18n";
 import mitt from "mitt";
+import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
 
 InertiaProgress.init({
     color: 'rgb(79 70 229)',
 })
 
 createInertiaApp({
     title: title => `${title} - Yoeri.me`,
-    resolve: name => require(`./Pages/${name}`),
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)

resources/views/app.blade.php

@@ -9,11 +9,11 @@
         <script src="https://cdn.usefathom.com/script.js" data-site="ZLTGUHEL" defer></script>
     @endproduction
 
-    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
+    @vite('resources/css/app.css')
     <link rel="preload" as="image" href="/img/avatar.webp" type="image/webp">
 
     @routes
-    <script src="{{ mix('/js/app.js') }}" defer></script>
+    @vite('resources/js/app.js')
     @inertiaHead
 </head>
 <body class="antialiased bg-amber-50 selection:bg-emerald-600 selection:text-white">

resources/views/social_image.blade.php

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
+    @vite('resources/css/app.css')
 </head>
 <body class="antialiased">
     <div class="w-[1200px] h-[630px] bg-amber-50 p-12 text-white text-3xl space-y-3 flex flex-col justify-between">

tailwind.config.js

@@ -16,15 +16,15 @@ module.exports = {
     },
 
     variants: {
-    extend: {
-      textColor: [
-        "selection"
-      ],
-      backgroundColor: [
-        "selection"
-      ],
+        extend: {
+            textColor: [
+                "selection"
+            ],
+            backgroundColor: [
+                "selection"
+            ],
+        },
     },
-  },
 
     plugins: [
         require('@tailwindcss/forms'),

vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import laravel from "laravel-vite-plugin";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/css/app.css',
+                'resources/js/app.js',
+            ],
+            refresh: true,
+        }),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': '/resources/js'
+        }
+    }
+});