wip

resources/js/Share/Layout/App.vue

@@ -0,0 +1,7 @@
+<template>
+
+</template>
+
+<script setup>
+
+</script>

resources/js/app.js

@@ -1 +1,28 @@
-require('./bootstrap');
+import './bootstrap';
+import { createApp, h } from 'vue';
+import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import App from '@/Share/Layout/App.vue';
+import '../css/app.css';
+
+createInertiaApp({
+    resolve: async (name) => {
+        const page = resolvePageComponent(
+            `./Pages/${name}.vue`,
+            import.meta.glob('./Pages/**/*.vue'),
+        );
+
+        page.then((module) => {
+            module.default.layout = module.default.layout || App
+        });
+
+        return page;
+    },
+    setup({el, App, props, plugin}) {
+        createApp({render: () => h(App, props)})
+            .use(plugin)
+            .component('InertiaLink', Link)
+            .component('InertiaHead', Head)
+            .mount(el)
+    },
+});

resources/js/bootstrap.js

@@ -1,28 +1,7 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * 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';
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo';
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
-// });

resources/js/css/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/js/ssr.js

@@ -0,0 +1,31 @@
+import { createSSRApp, h } from 'vue';
+import { renderToString } from '@vue/server-renderer';
+import createServer from '@inertiajs/server'
+import { createInertiaApp, Head } from '@inertiajs/inertia-vue3';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import App from '@/Share/Layout/App.vue';
+import '../css/app.css';
+
+createServer(page =>
+    createInertiaApp({
+        page,
+        render: renderToString,
+        resolve: async (name) => {
+            const page = resolvePageComponent(
+                `./Pages/${name}.vue`,
+                import.meta.glob('./Pages/**/*.vue'),
+            );
+
+            page.then((module) => {
+                module.default.layout = module.default.layout || App
+            });
+
+            return page;
+        },
+        setup({ app, props, plugin }) {
+            return createSSRApp({
+                render: () => h(app, props)
+            }).use(plugin).component('InertiaHead', Head);
+        },
+    })
+);