Migrate demo app to Vite

.eslintrc.js → .eslintrc.cjs

@@ -13,5 +13,8 @@ module.exports = {
         "vue/require-default-prop": 0,
         "indent": ["error", 4],
         "quotes": ["error", "double"],
+        "object-curly-spacing": ["error", "always"],
+        "semi": ["error", "always"],
+        "comma-spacing": ["error", { "before": false, "after": true }]
     }
-}
+};

.github/workflows/php.yml

@@ -40,11 +40,11 @@ jobs:
       - name: "Install locked dependencies with npm"
         run: |
           npm ci --ignore-scripts
-          cd app
-          npm ci --ignore-scripts
 
       - name: Build package
-        run: npm run build
+        run: |
+          npm run build
+          npm pack
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
@@ -58,7 +58,8 @@ jobs:
           cd app
           cp .env.example .env
           composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction --no-suggest
-          npm run production
+          npm ci --ignore-scripts
+          npm run build
           touch database/database.sqlite
           php artisan migrate:fresh --seed
           php artisan dusk:chrome-driver `/opt/google/chrome/chrome --version | cut -d " " -f3 | cut -d "." -f1`

.gitignore

@@ -31,3 +31,5 @@ coverage
 app/public/css/app.css
 app/public/js/app.js
 app/public/mix-manifest.json
+
+protonemedia-inertiajs-tables-laravel-query-builder-*.tgz

app/composer.json

@@ -10,15 +10,15 @@
     "require": {
         "php": "^8.0.2",
         "guzzlehttp/guzzle": "^7.2",
-        "inertiajs/inertia-laravel": "^0.5.4",
+        "inertiajs/inertia-laravel": "^0.6.3",
         "laravel/breeze": "^1.9",
         "laravel/dusk": "^6.24",
-        "laravel/framework": "^9.11",
+        "laravel/framework": "^9.19.0",
         "laravel/sanctum": "^2.8",
         "laravel/tinker": "^2.7",
+        "protonemedia/inertiajs-tables-laravel-query-builder": "@dev",
         "spatie/laravel-query-builder": "^5.0",
-        "tightenco/ziggy": "^1.0",
-        "protonemedia/inertiajs-tables-laravel-query-builder": "@dev"
+        "tightenco/ziggy": "^1.0"
     },
     "require-dev": {
         "fakerphp/faker": "^1.9.1",

app/package.json

@@ -1,35 +1,26 @@
 {
     "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 --mix-config=webpack.ssr.mix.js && mix --production"
-    },
-    "dependencies": {
-        "@protonemedia/inertiajs-tables-laravel-query-builder": "file:.."
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
+        "@protonemedia/inertiajs-tables-laravel-query-builder": "file:../protonemedia-inertiajs-tables-laravel-query-builder-2.1.0.tgz",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
         "@inertiajs/progress": "^0.2.7",
         "@inertiajs/server": "^0.1.0",
         "@tailwindcss/forms": "^0.5.0",
-        "@vue/compiler-sfc": "^3.2.31",
-        "@vue/server-renderer": "^3.2.31",
+        "@vitejs/plugin-vue": "^3.0",
         "autoprefixer": "^10.4.2",
         "axios": "^0.25",
         "eslint": "^8.18.0",
         "eslint-plugin-vue": "^9.1.1",
-        "laravel-mix": "^6.0.6",
+        "laravel-vite-plugin": "^0.5.0",
         "lodash": "^4.17.19",
         "postcss": "^8.4.6",
         "tailwindcss": "^3.1.0",
-        "vue": "^3.2.31",
-        "vue-loader": "^17.0.0",
-        "webpack-node-externals": "^3.0.0"
+        "vite": "^3.0",
+        "vue": "^3.2.31"
     }
 }

app/postcss.config.js

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

app/resources/js/Pages/CustomTable.vue

@@ -5,7 +5,7 @@ import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 // use this one for development:
 // import Table from "../../../../js/Components/Table.vue"
 
-defineProps(["users"])
+defineProps(["users"]);
 </script>
 
 <template>

app/resources/js/Pages/TwoTables.vue

@@ -5,7 +5,7 @@ import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 // use this one for development:
 // import Table from "../../../../js/Components/Table.vue"
 
-defineProps(["companies", "users"])
+defineProps(["companies", "users"]);
 </script>
 
 <template>

app/resources/js/Pages/Users.vue

@@ -5,7 +5,7 @@ import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 // use this one for development:
 // import Table from "../../../../js/Components/Table.vue"
 
-defineProps(["users"])
+defineProps(["users"]);
 </script>
 
 <template>

app/resources/js/app.js

@@ -1,12 +1,13 @@
 import { createApp, h } from "vue";
 import { createInertiaApp } from "@inertiajs/inertia-vue3";
 import { InertiaProgress } from "@inertiajs/progress";
+import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
 
 const appName = window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
-    resolve: (name) => require(`./Pages/${name}.vue`),
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue")),
     setup({ el, app, props, plugin }) {
         return createApp({ render: () => h(app, props) })
             .use(plugin)

app/resources/js/ssr.js

@@ -1,10 +1,10 @@
-import { createSSRApp, h } from 'vue';
-import { renderToString } from '@vue/server-renderer';
-import { createInertiaApp } from '@inertiajs/inertia-vue3';
-import createServer from '@inertiajs/server';
-import route from 'ziggy';
+import { createSSRApp, h } from "vue";
+import { renderToString } from "@vue/server-renderer";
+import { createInertiaApp } from "@inertiajs/inertia-vue3";
+import createServer from "@inertiajs/server";
+import route from "ziggy";
 
-const appName = 'Laravel';
+const appName = "Laravel";
 
 createServer((page) =>
     createInertiaApp({

app/resources/views/app.blade.php

@@ -6,12 +6,8 @@
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
-        <!-- Scripts -->
         @routes
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
         @inertiaHead
     </head>
     <body class="font-sans antialiased">

app/vite.config.js

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

js/Components/ButtonWithDropdown.vue

@@ -32,7 +32,7 @@ import OnClickOutside from "./OnClickOutside.vue";
 import { createPopper } from "@popperjs/core/lib/popper-lite";
 import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
 import flip from "@popperjs/core/lib/modifiers/flip";
-import { ref, watch, onMounted } from "vue"
+import { ref, watch, onMounted } from "vue";
 
 const props = defineProps({
     placement: {
@@ -58,7 +58,7 @@ const props = defineProps({
         default: false,
         required: false,
     },
-})
+});
 
 const opened = ref(false);
 const popper = ref(null);
@@ -73,7 +73,7 @@ function hide() {
 
 watch(opened, () => {
     popper.value.update();
-})
+});
 
 const button = ref(null);
 const tooltip = ref(null);
@@ -83,7 +83,7 @@ onMounted(() => {
         placement: props.placement,
         modifiers: [flip, preventOverflow],
     });
-})
+});
 
-defineExpose({ hide })
+defineExpose({ hide });
 </script>

js/Components/OnClickOutside.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue"
+import { ref, onMounted, onBeforeUnmount } from "vue";
 
 const props = defineProps({
     do: {
@@ -28,10 +28,10 @@ onMounted(() => {
 
     document.addEventListener("click", listener.value);
     document.addEventListener("touchstart", listener.value);
-})
+});
 
 onBeforeUnmount(() => {
     document.removeEventListener("click", listener.value);
     document.removeEventListener("touchstart", listener.value);
-})
+});
 </script>

js/Components/Pagination.vue

@@ -185,9 +185,9 @@
 </template>
 
 <script setup>
-import PerPageSelector from "./PerPageSelector.vue"
+import PerPageSelector from "./PerPageSelector.vue";
 import { computed } from "vue";
-import { getTranslations } from "../translations.js"
+import { getTranslations } from "../translations.js";
 
 const translations = getTranslations();
 
@@ -199,14 +199,14 @@ const props = defineProps({
     perPageOptions: {
         type: Array,
         default() {
-            return () => [15, 30, 50, 100]
+            return () => [15, 30, 50, 100];
         },
         required: false
     },
     onPerPageChange: {
         type: Function,
         default() {
-            return () => {}
+            return () => {};
         },
         required: false,
     },
@@ -253,6 +253,6 @@ const nextPageUrl = computed(() => {
 });
 
 const perPage = computed(() => {
-    return parseInt(pagination.value.per_page)
-})
+    return parseInt(pagination.value.per_page);
+});
 </script>

js/Components/PerPageSelector.vue

@@ -18,8 +18,8 @@
 
 <script setup>
 import { computed } from "vue";
-import uniq from "lodash-es/uniq"
-import { getTranslations } from "../translations.js"
+import uniq from "lodash-es/uniq";
+import { getTranslations } from "../translations.js";
 
 const translations = getTranslations();
 
@@ -39,7 +39,7 @@ const props = defineProps({
     options: {
         type: Array,
         default() {
-            return [15, 30, 50, 100]
+            return [15, 30, 50, 100];
         },
         required: false,
     },
@@ -51,11 +51,11 @@ const props = defineProps({
 });
 
 const perPageOptions = computed(() => {
-    let options = [...props.options]
+    let options = [...props.options];
 
-    options.push(parseInt(props.value))
+    options.push(parseInt(props.value));
 
-    return uniq(options).sort((a, b) => a - b)
-})
+    return uniq(options).sort((a, b) => a - b);
+});
 </script>