Different layouts.?

[premdasvm]

I'm fairly new to Tailwind CSS, I mostly worked on Vuetify. How about adding a Login Page which contains a different layout and setup a way we can say which layout to use from the router for each page.?

This is how I manage in Vuetify right now (not 100% sure if it's the right way, but gets the job done)

route.js

 {
    path: "/login",
    name: "Login",
    meta: { layout: "blank" },
    component: () => import("../views/Login.vue"),
  },
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { requireAuth: true },
  },

Blank.vue (layout for login - without side bar)

<template>
  <v-content>
    <slot />
  </v-content>
</template>

<script>
export default {};
</script>

default.vue (Layout with sidebar for all other Views)

<template>
  <div>
    <Navbar />
    <v-content class="ma-4">
      <slot />
    </v-content>
  </div>
</template>

<script>
import Navbar from "../../components/Navbar";
export default {
  components: { Navbar }
};
</script>

app.vue

<template>
  <v-app>
    <notifications />
    <component :is="layout">
      <router-view />
    </component>
  </v-app>
</template>

<script>
const defaultLayout = "default";
export default {
  name: "App",
  computed: {
    layout() {
      return (this.$route.meta.layout || defaultLayout) + "-layout";
    },
  },
};
</script>

[ngekoding]

I think your implementation was good 👍🏻
I use that way also on my Vue Project (the idea).

But, because I think we don't need Notification in Login Page. I manage the Layout from the routes.
Here is the example of my implementation (of course it is not the best).

// routes.js
import DashboardLayout from '@/layouts/DashboardLayout.vue';
import BlankLayout from '@/layouts/BlankLayout.vue';

const routes = new VueRouter({
  routes: [
    {
      path: siteUrl,
      alias: baseUrl,
      component: BlankLayout,
      children: [
        {
          path: '/',
          alias: '',
          name: 'auth',
          component: () => import('@/pages/auths/Auth.vue'),
          meta: {
            guest: true,
          }
        }
      ]
    },
    {
      path: siteUrl + '/p/dashboard',
      component: DashboardLayout,
      children: [
        {
          name: 'dashboard',
          path: '/',
          alias: '',
          component: () => import('@/pages/dashboard/Index.vue'),
          meta: {
            requiresAuth: true,
            pageTitle: '<b>Dashboard</b>',
          }
        },
        
      ]
    },
  ],
  mode: 'history'
});

And then for the App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "app",
};
</script>

[ngekoding]

And I can say it is not about Tailwind CSS, just a VueJS project stucture.