CODEWITHSUNDEEP
javascriptvue.jsvue-router
shashi verma
shashi verma

Reputation: 973

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

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:

###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.

Upvotes: 6

Views: 11165

Answers (3)

Suat Atan PhD
Suat Atan PhD

Reputation: 1382

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' },
  }

Upvotes: 0

rrrrnnn
rrrrnnn

Reputation: 39

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>

Upvotes: 3

xon52
xon52

Reputation: 736

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.

Upvotes: 1

Related Questions