Vite build for production not working with inertia and Vue 2

I did, eventually. I'm using Vite, Vue 2, and Vuetify. It took me a long time to get to a working version, but this is what I arrived at:

vite.config.js

const path = require('path');

import { defineConfig, splitVendorChunkPlugin } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';

import Components from 'unplugin-vue-components/vite';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Inspect from 'vite-plugin-inspect';

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.ts',
      refresh: true
    }),
    vue(),
    Components({
      // directives: true,
      resolvers: [
        // Vuetify
        VuetifyResolver()
      ],
      dts: false
    }),
    splitVendorChunkPlugin(),
    Inspect()
  ],
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: [
          `@import "@sass/variables.scss"\n` // this newline is intentional as it'll be parsed in-line with the first file
        ].join('\n')
      },
      scss: {
        additionalData: [
          `@import "@sass/variables.scss";` // this will correlate with the file below
        ].join('\n')
      }
    }
  },
  resolve: {
    alias: {
      '@js': path.resolve(__dirname, 'resources/js'),
      '@sass': path.resolve(__dirname, 'resources/sass'),
      '@images': path.resolve(__dirname, 'resources/images')
    }
  }
});

tsconfig.js

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "target": "esnext",
        "module": "esnext",
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",

        /* Strict Type-Checking Options */
        "strict": false,
        "noImplicitAny": false,
        "strictNullChecks": false,
        "noImplicitThis": false,
        "alwaysStrict": false,

        /* Additional checks */
        "noUnusedLocals": true,
        "noUnusedParameters": false,
        "noFallthroughCasesInSwitch": true,

        "paths": {
            "@js/*": [
                "resources/js/*"
            ],
            "@sass/*": [
                "resources/sass/*"
            ],
            "@images/*": [
                "resources/images/*"
            ],
            "tslib": ["node_modules/tslib/tslib.d.ts"]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ],

        "types": ["vite/client"]
    },
    "include": [
        "resources/js/**/*.ts",
        "resources/js/**/*.tsx",
        "resources/js/**/*.vue"
    ],
    "exclude": [
        "node_modules"
    ]
}

package.json

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@inertiajs/inertia": "^0.11.0",
    "@inertiajs/inertia-vue": "^0.8.0",
    "@types/lodash": "^4.14.184",
    "@vitejs/plugin-vue2": "^1.1.2",
    "axios": "^0.27",
    "laravel-vite-plugin": "^0.6.0",
    "lodash": "^4.17.19",
    "sass": "~1.32",
    "tslib": "^2.4.0",
    "typescript": "^4.8.3",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.0.0",
    "vite-plugin-inspect": "^0.7.1",
    "vite-plugin-require": "^1.0.1",
    "vite-plugin-vue2": "^2.0.2",
    "vue": "^2.7.10",
    "vue-class-component": "^7.2.6",
    "vuetify": "^2.6.9"
  }
}

app.js

import Vue from 'vue';
import _ from 'lodash';

import { createInertiaApp, Link } from '@inertiajs/inertia-vue';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import vuetify from '@js/vue/plugins/vuetify';

import '@js/bootstrap';
import '@sass/app.scss';

import '@js/vue/plugins';
import App from '@js/vue/App.vue';
import AppProxy from '@js/vue/mixins/globals/AppProxy';

// I prefer `.` dot notation for pointing to my pages from the controller
const pageComponents = _(import.meta.glob('./vue/pages/**/*.vue'))
  .mapKeys((v, k) => _.chain(k).split('pages/').last().replace(/\.vue$/, '').split(/[\\/]+/).map(_.kebabCase).join('.').value())
  .value();

createInertiaApp({
  resolve: name => resolvePageComponent(name, pageComponents).then(p => {

    // shim in app layout
    // @ts-ignore
    (p.default || p).layout ??= App;

    return p;

  }),
  setup({ el, app, props, plugin }) {

    Vue.use(plugin);

    // global components
    // @ts-ignore
    Vue.component('Link', Link);

    // register global mixin(s) based on development environment
    if (import.meta.env.VITE_LOCAL_DEVELOPMENT) {
      Vue.mixin(AppProxy);
    }

    new Vue({
      vuetify,
      render: h => h(app, props)
    }).$mount(el);

  }
});

_variables.scss - Vuetify overloads (lots of people on the internet asking how to do this)

@import "vuetify/src/styles/styles";
@import "utility"; // my own utilities for creating my theme variables, etc.
@import "theme/colors"; // in sass declaration of my colors (outside of the vuetify.js plugin file)
@import "theme/dark"; // my overloads of https://github.com/vuetifyjs/vuetify/blob/fdfb6fc34d797d2798ae73b049f34e5098793caa/packages/vuetify/src/styles/settings/_dark.scss

/***** Begin Vuetify Overrides *****/

// Globals
$body-font-family: "IBM Plex Sans", sans-serif;
$font-size-root: 16px;

// Buttons
$btn-font-weight: 700;
$btn-sizes: (
  "x-large": 50
);
$btn-text-transform: none;

// Icon
$icon-size: 20px;

// Navigation
$navigation-drawer-border-width: 0;

// Text Field
$text-field-outlined-fieldset-border: 2px solid var(--v-hot-lava-base);

/***** End Vuetify Overrides *****/

I hope this helps anyone else trying to accomplish this exact tech stack (w/ versions). I have no apprehension to adopting Vue 3. But, Vuetify 3 isn't yet released as stable.

I spent wayyyyyyy too much time trying to get this tech stack to work with Laravel Mix. I really wanted it to work, too. I even have a couple published extensions on the site, so there was some personal investment, there. And there are too many disjointed, various examples all over StackOverflow and Github. This works and is ready to be further optimized for your needs.

If this write-up existed somewhere else (NOT in a github "example"), I couldn't find it.

Anyway, it's time to move on and it's clear that Vite is here to stay.