Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

successdav's avatar

Serve same component with different layout Vuejs

Hi. I have a layout setup for administrators only. So if you're an admin you get to see a sidebar and some other stuff meant for admins only.

Now I have a Profile page available to both admin and regular users. On the page, I use a persistent layout

Now the problem is, how do I serve the page to the regular users without the admin layout? e.g. If a regular user visits the page, the user will see the sidebar bar and other stuffs which are only meant for an administrator. So I was thinking if maybe there's a way I can check if the user is an admin, then use this layout else use the default layout.

<template>
    <div class="md:grid grid-cols-3 gap-4">
        
    </div>
</template>

<script>
export default {
    props: {user: Object, guardian: Object, subscriptions: Object},

    layout: AdminLayout,
}
0 likes
1 reply
jessicaoostveen's avatar

Hi, I would suggest to create a Profile page layout for admin and one for the regular users.

When adding the Routes, add the correct authentication middleware for each route (admin and regular user), Maybe check out this tutorial (assuming that you use Vue combined with Laravel)

Hope it helps out! Good Luck!

Please or to participate in this conversation.