Programming, Vue.js

Easy Way To Have Multiple Layouts For Your Vue.js App

While building most apps we need to have different layouts depending on the route. For example we might have a different base layout for someone logging in (/login) and for someone visiting a dashboard (/dashboard). Let’s go over one of the easy ways to accomplish this with Vue router.

First we need to define the two layouts.

Example Public.vue layout

<template>
    <router-view></router-view>
</template>

<script>
  export default {
    name: 'PublicLayout',
  };
</script>

<style>
</style>

Notice the only template structure we define for the public layout is a <router-view>. Each of your layouts will need the <router-view> that tells Vue to put the contents of the route in there.

Example App.vue layout

<template>
    <div>
        <nav>
            <ul>
                <li><router-link to="/dashboard">Dashboard</router-link></li>
                <li><router-link to="/logout">Logout</router-link></li>
            </ul>
        </nav>
        <div>
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
  export default {
    name: 'AppLayout',
  };
</script>

<style>
</style>

Again notice this layout also has a <router-view>.

Any route that uses this layout will include the nav. We can add in other things like a sidebar, footer, and more, but for demonstration purposes it’s easier to show the concept with less.

Next is the route file. Let’s say we have a couple routes a /login and a /dashboard. /login should have the public layout and /dashboard should have the app layout.

Example route file.

import Vue from 'vue';
import Router from 'vue-router';
import AppLayout from '@/layouts/App.vue';
import PublicLayout from '@/layouts/Public.vue';
import Dashboard from "@/views/Dashboard.vue";

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      component: PublicLayout,
      children: [
        {
          path: '',
          component: Login,
        },
      ],
    },
    {
      path: '/dashboard',
      component: AppLayout,
      children: [
        {
          path: '',
          component: Dashboard,
        },
      ],
    },
  ],
});

There are a couple key concepts. First notice the top level route defines the path. In our example that would be /login or /dashboard. Each of those top level routes define which layout they will use.

/login uses the PublicLayout because the user is not authenticated yet.

/dashboard uses AppLayout and assumes the user is authenticated.

Both /login and /dashboard have a children property on them and each have a path of ''. This tells Vue to display that component for /login and /dashboard by default when that route is visited.

Below is a working example of the above code. If the sandbox doesn’t load properly use https://codesandbox.io/s/vue-layout-demo-mr0oh?fontsize=14.

Share this Story
Load More Related Articles
Load More By Nick Escobedo
Load More In Programming

Check Also

Thoughts on NativeScript Vue

First Impressions Having been familiar with HTML and ...