[2.x] Fix Inertia SSR usage with Ziggy route function in setup() (#1069)

* Use Ziggy Vue plugin instead of route mixin Ziggy Vue plugin allows `route()` to be injected into `setup()` function in components[1][2], which is needed for Inertia SSR since the @routes blade directive isn't available. [1]: tighten/ziggy#518 [2]: tighten/ziggy#564 (comment) * Fix quotations * Update app.js Co-authored-by: Taylor Otwell <[email protected]>
laravel · Jun 17, 2022 · d33e331 · d33e331
1 parent 2b0887a
commit d33e331
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/stubs/inertia/resources/js/app.js b/stubs/inertia/resources/js/app.js
@@ -3,6 +3,7 @@ import './bootstrap';
 import { createApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/inertia-vue3';
 import { InertiaProgress } from '@inertiajs/progress';
+import { ZiggyVue } from 'ziggy';
 
 const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
 
@@ -12,7 +13,7 @@ createInertiaApp({
     setup({ el, app, props, plugin }) {
         return createApp({ render: () => h(app, props) })
             .use(plugin)
-            .mixin({ methods: { route } })
+            .use(ZiggyVue, Ziggy)
             .mount(el);
     },
 });

diff --git a/stubs/inertia/resources/js/ssr.js b/stubs/inertia/resources/js/ssr.js
@@ -2,7 +2,7 @@ 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 { ZiggyVue } from 'ziggy';
 
 const appName = 'Laravel';
 
@@ -15,15 +15,9 @@ createServer((page) =>
         setup({ app, props, plugin }) {
             return createSSRApp({ render: () => h(app, props) })
                 .use(plugin)
-                .mixin({
-                    methods: {
-                        route: (name, params, absolute) => {
-                            return route(name, params, absolute, {
-                                ...page.props.ziggy,
-                                location: new URL(page.props.ziggy.url),
-                            });
-                        },
-                    },
+                .use(ZiggyVue, {
+                    ...page.props.ziggy,
+                    location: new URL(page.props.ziggy.url),
                 });
         },
     })

diff --git a/stubs/inertia/webpack.mix.js b/stubs/inertia/webpack.mix.js
@@ -17,6 +17,7 @@ mix.js('resources/js/app.js', 'public/js').vue()
     ])
     .alias({
         '@': 'resources/js',
+        ziggy: "vendor/tightenco/ziggy/dist/vue",
     });
 
 if (mix.inProduction()) {

diff --git a/stubs/inertia/webpack.ssr.mix.js b/stubs/inertia/webpack.ssr.mix.js
@@ -9,7 +9,7 @@ mix.js('resources/js/ssr.js', 'public/js')
     })
     .alias({
         '@': 'resources/js',
-        ziggy: 'vendor/tightenco/ziggy/dist/index',
+        ziggy: 'vendor/tightenco/ziggy/dist/vue',
     })
     .webpackConfig({
         target: 'node',