Laravel Telescope com inertia

Jorge Nunes — Sat, 06 Apr 2024 02:56:30 +0000

Após segui a documentão do laravel telescope até , em um projeto com Inertia e Vue.js, precisamos configurar a rota no web, pois por padrão ele não espera que você tenha saído do ecossistema padrão do Laravel.

Então vamos:

Verifiuqe no app/Http/Kernel.php se no array "web" importou o \Laravel\Telescope\Http\Middleware\Authorize::class;
Crie o php artisan make:modal TelescopeEntrie;
Crie na routa o direcionamento:

Route::get('/telescope', function () {
    return Inertia::render('Telescope', [
        'telescope' => Telescope::all(),
    ]);
});

crie sua Page|Component Vue para o dashboard do Telescope, eu criei no resources/js/Page/Telescope.vue:

<template>
    <div>
        <h1>Telescope Dashboard</h1>

        <ul>
            <li v-for="entry in telescope" :key="entry.id">
                <a href="{{ entry.url }}">{{ entry.name }}</a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        telescope: {
            type: Array,
            required: true,
        },
    },
};
</script>

Se você seguiu a documentação do Laravel e fez a vinco, esse mini-tutorial o deixará capaz de acessar o Telescope em seu projeto Laravel, por exemplo: http://localhost:8000/telescope.

Finalizado! O objetivo aqui é apenas seguir além da documentação do Laravel Telescope e ajudar a usar também o Vue e o Inertia em seu projeto Laravel.

DEV Community: Jorge Nunes

Laravel Telescope com inertia