Conditional routes ( Laravel 9 / Vue 3 / Vite ) returns route is undefined. Best solution ?

[ghost]

Hi,

I am using Laravel 9, Vite and Vue for one of my projects.
What I want to do is protect and hide certain/most admin routes from guests. Mainly because I feel like it's unsecure but also because I don't like to clutter the routes list with hunderds of admin routes when unauthenticated.

Now what you can do is:

Create the config/ziggy.php file and for example use this.

ziggy.php

<?php

return [
    'groups' => [
        'guest' => [
            'admin.login',
            'pages.*',
        ],
    ],
];

in your app.blade.php

// Rest of blade
@if(auth()->user())
    @routes
@else
    @routes('guest')
@endif
// Rest of blade

Now this works as intended, but you need a page reload for it to properly work.

My idea was to remove the @routes from the app.blade.php.

I added the following in vite.config.js

// Rest of config
resolve: {
    alias: {
        ziggy: path.resolve('vendor/tightenco/ziggy/dist/index.es.js'),
        ziggyVue: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
    },
},
// Rest of config

Now in app.js and ssr.js I added

import { ZiggyVue } from 'ziggyVue';
import route from 'ziggy';

// Rest of createInertiaApp
.mixin({
    methods: {
        route: (name, params, absolute) => {
            return route(name, params, absolute, {
                ...props.initialPage.props.ziggy,
                location: new URL(props.initialPage.props.ziggy.url),
            });
        },
    },
})
// Rest of createInertiaApp

Now on the homepage this works perfectly fine, when I'm not authenticated, The following routes work.

• pages.*
• admin.login

Routes that don't work: ( as intended )

• admin.dashboard
• admin.teams.create
• etc

However, as soon I switch pages and click on the login button or manually go to the admin.login route.
When submitting the form I get the error.

ReferenceError: route is not defined
_ http://localhost:8000/build/assets/Login.10a5a201.js:1

This is because it's inside the <script setup>

const submit = () => {
    form.post(route('admin.login'), {
        onFinish: () => form.reset('password'),
    });
};

In the ` part it works fine.

<Link
    :href="route('pages.home')"
    class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
    Back
</Link>

Is there any fix for this or perhaps a better solution for this ?

[bakerkretzmar]

Mixins don't work with <script setup>, you'll have to use provide to make the route function available in your whole Vue app and then inject it in every component body where you need to use it.