Vue.js - How to add multiple layout in vuejs?

Question

I'm creating a vuejs app, in which I want to have two different layouts like one for user interface and other for the admin interface. In the user interface, I have a button named "Admin Panel" on click to this button want to go the admin side and render the new layout. So far I have done this as follows:

I have created a container folder in my src to keep the layout files
- UserPanel.vue
- AdminPanel.vue
And also a router folder to keep the route files
- user.js
- admin.js
- index.js

###UserPanel.js###

<template>
  <v-app> 
    <h4>User Layout</h4>
    <router-view></router-view>
  </v-app>
</template>
<script>
export default {
}
</script>

###AdminPanel.js###

<template>
  <v-app> 
    <h4>Admin Layout</h4>
    <router-view></router-view>
  </v-app>
</template>

<script>
export default {
}
</script>

###user.js###

import UserPanel from 'Container/UserPanel';
const HomeV1 = () => import('Views/HomeV1');
const HomeV2 = () => import('Views/HomeV2');
const HomeV3 = () => import('Views/HomeV3');

export default{
  path: '/',
  component: UserPanel,
  redirect:'/home',
  children:[
    { 
        path: '/',               
        component: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home',               
        component: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home-two',               
        component: HomeV2 ,
        meta: {
            header: 2
        }
    },
    { 
        path: '/home-three',               
        component: HomeV3 ,
        meta: {
            header: 3
        }
    }
  ]
}

###admin.js###

import Admin from 'Container/Adminpanel.vue';
const Reports = () => import('Views/AdminPanel/Reports.vue');
const Invoice = () => import('Views/AdminPanel/Invoices.vue');
const AdminAccount = () => import('Views/AdminPanel/Account.vue');

export default {
  path: '/admin-panel',
  component: Admin,
  redirect:'/admin-panel/reports',
  children:[
    { 
        path: '/admin-panel/reports',  
        component: Reports, 
        name:'Reports'
    },
    { 
        path: '/admin-panel/invoices',  
        component: Invoice, 
        name:'Invoice'
    },
    { 
        path: '/admin-panel/products',  
        component: AdminProducts, 
        name:'AdminProducts'
    }
  ]
}

###index.js###

import Vue from 'vue'
import Router from 'vue-router'
import userRoutes from './user';
import adminRoutes from './admin';
Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    userRoutes,
    adminRoutes
  ]
})

Now only my user routing is working. To show the pages of admin I have to put its route in user.js and after that, it renders the user's layout not admin's layout.

Thank You.

in your admin.js you set the children wrong. the path sholud be path: '/reports' not path: '/admin-panel/reports' (unless your want you link like /admin-panel/admin-panel/reports). the children get the parent prefix path auto. idk if its answer your question. i still dont understand what the problem you have. which route doesn't work? — eli chen
– eli chen, Commented Jun 21, 2019 at 11:04
but it still renders the user's layout and show URL is not defined — shashi verma
– shashi verma, Commented Jun 21, 2019 at 11:10
@elichen see, from front-end when I click on "admin panel" button to go on the admin side here on clicking im changing the url from "localhost:8080/home" to "localhost:8080/admin-panel/reports" and on wrong route i'm showing a not found message using this path ({ path: '/*',redirect:"not-found"}) in my user.js — shashi verma
– shashi verma, Commented Jun 21, 2019 at 11:18
if you use ({ path: '/*',redirect:"not-found"}) in your user.js. its break all the routers after this . so its never reach the routers after this. in other words, your admin.js routers cannot be reached. and btw in your case its sholud be localhost:8080/admin-panel/admin-panel/reports — eli chen
– eli chen, Commented Jun 21, 2019 at 11:27
@elichen I have fixed the URL issue by removing "admin-panel". After removing the "not found path" I am getting an error , here you can see tinyurl.com/y3lyyst6 open this link by using prefix "http://" — shashi verma
– shashi verma, Commented Jun 21, 2019 at 11:39

rrrrnnn · Accepted Answer · 2022-03-11 23:45:52Z

3

Put attribute meta in the route like this:

const routes = [
  {
    path: '/admin',
    name: 'admin',
    meta: { layout: 'LayoutAdmin' },
    component: Dashboard,
  },

and in App.vue you can render depends of this condition this.$route.meta.layout here an example:

<template>
  <div id="app">
    <notifications width="400px" />
    <LayoutAdmin v-if="this.$route.meta.layout">
      <router-view class="content" />
    </LayoutAdmin>
    <LayoutDefault v-else :links="links" :headerButtons="headerButtons">
      <router-view class="content" />
    </LayoutDefault>
  </div>
</template>

answered Mar 11, 2022 at 23:45

rrrrnnn

394 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xon52 · Accepted Answer · 2019-06-21 14:02:14Z

I have played around with this before and the way I did it was to have alternative layouts that switch depending on a route meta field...

So when you define a route, you can add a meta field:

path: '/admin-panel/reports',  
        component: Reports, 
        name:'Reports',
        meta: { template: 'admin' }

Then you need to check routes as they change. The easiest way to do this is in a global navigation guard (like the example has on their page). If it detects it's an admin page, it changes a Vuex property which will then switch which template you're using.

I will say that in the end I stopped using this method and wrapped all of my pages with wrapper components (admin/user/etc) so I could control everything from Vue itself. This was mainly due to Vue Router's limitations around waiting for a user to be authenticated though so that may not be an issue for you.

Suat Atan PhD · Accepted Answer · 2024-02-01 16:36:07Z

0

Another way is:

<template>
  <div class="container">

    <div >
      <div id="AdminTemplate" v-if="this.$route.meta.layout == 'AdminTemplate'">
        <router-view />
      </div>
    <div id="NormalTemplate" v-else>
        <router-view />
    </div>
  
  </div>

</template>
<script>
export default {
  data() {
    return {
      
    };
  },
};
</script>

And in the router

{
    path: "/admin",
    name: "AdminVue",
    component: AdminVue,
    meta: { layout: 'AdminTemplate' },
  }

answered Feb 1, 2024 at 16:36

Suat Atan PhD

1,41219 silver badges29 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to add multiple layout in vuejs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related