Vue - Separate login component from App.vue

Question

I'm having trouble on how to separate the login component from App.vuesince it is the default render page. What I want to achieve is to render login (if user does not have token), redirect to a loading page while rendering the dashboard, navigation-bar and menu.

I don't see using v-if="loggedIn" just to hide the menu is not the best practice, it still renders the <script> of the App.vue.

Please see my current setup below.

App.vue

<template>
  <v-app>
    <v-navigation-drawer>
    ...
    </v-navigation-drawer>

    <v-app-bar
    ...
    </v-app-bar>

    // This is where login.vue and dashboard.vue currently resides
    <v-content>
      <v-container>
        <v-fade-transition mode="out-in">
          <router-view />
        </v-fade-transition>
      </v-container>
    </v-content>

  </v-app>
</template>

<script>
import { mapGetters } from 'vuex'

  export default {
    data: () => ({
    ...
    }),

    computed: {
      ...mapGetters([
        'loggedIn'
      ]),
    }
  }
</script>

app.js

new Vue({
  el: '#app',
  render: h=>h(App),
  vuetify,
  router,
  store,
});


router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.loggedIn) {
      next({
        name: 'login',
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    if (store.getters.loggedIn) {
      next({
        name: 'dashboard',
      })
    } else {
      next()
    }
  } else {
    next()
  }

routes.js

 { 
    path: '/dashboard', 
    name: 'dashboard', 
    component: () => import('@/views/Dashboard'),
    meta: { requiresAuth: true },
 },
 { 
    path: '/login', 
    name: 'login', 
    component: () => import('@/views/auth/Login'),
    meta: { requiresVisitor: true }
  },

Brian · Accepted Answer · 2020-04-26 18:37:20Z

I know it's been a while, but it could work for other users.

src/App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

src/containers/dashboard/Dashboard.vue

<template>
  <div id="main-container">
    <sidebar />
    <div class="container">
      <Header />
      <div id="content">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Dashboard",
  data: () => {
    return {};
  },
  components: {
    sidebar: () => import(/* webpackChunkName: "sidebar" */ "./layout/Sidebar"),
    Header: () => import(/* webpackChunkName: "header" */ "./layout/Header")
  }
};
</script>

src/router/index.js

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "",
      redirect: "home",
      component: () =>
        import(
          /* webpackChunkName: "dashboard" */ "@/containers/dashboard/Dashboard"
        ),
      children: [
        {
          path: "/home",
          name: "home",
          component: () =>
            import(/* webpackChunkName: "home" */ "./../views/Home"),
        },
        {
          path: "/about",
          name: "about",
          component: () =>
            import(/* webpackChunkName: "about" */ "./../views/About"),
        },
      ],
    },
    {
      path: "/login",
      name: "login",
      component: () =>
        import(/* webpackChunkName: "login" */ "./../views/Login"),
    },
  ],
});

notice I have omitted some code

Check this out

VueJS Dashboard Container

Github repo

Collectives™ on Stack Overflow

Vue - Separate login component from App.vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related