vue3-layouts
is a Vue.js package designed to simplify the process of creating and managing layouts in Vue.js projects. It provides a configurable Vue.js plugin to set up layouts dependent on Vue Router.
- Customizable Layouts: Easily manage and switch between different layouts.
- Quick Integration: Simplify the layout management process with minimal setup.
You can install vue3-layouts
via npm:
npm install vue3-layouts
Import createLayoutsProvider from vue3-layouts and set it up in your Vue application. You will need to provide the default layout and any other layout aliases.
import { createLayoutsProvider } from "vue3-layouts";
import EntryPoint from "./EntryPoint.vue";
const layoutsProvider = createLayoutsProvider({
default: () => import('./layouts/DefaultLayout.vue'),
aliases: {
guest: () => import('./layouts/GuestLayout.vue'),
authenticated: () => import('./layouts/AuthenticatedLayout.vue')
}
});
createApp(EntryPoint)
.use(layoutsProvider)
.mount('#app')
Specify the layout
for each route
in the meta
field of your Vue Router configuration.
const routes = [
{
path: '/',
component: Home,
// Will be used default layout
},
{
path: '/sing',
component: OtherPage,
meta: { layout: 'guest' },
children: [
{
path: '/in',
component: () => import('./pages/sign-in'),
// Will be used parent layout
},
{
path: '/up',
component: () => import('./pages/sign-up'),
// Will be used parent layout
}
]
},
{
path: '/dashboard',
meta: { layout: 'authenticated' },
component: () => import('./pages/dashboard'),
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
app.use(router);
Ensure you include the LayoutsProvider component in your application’s entry point (e.g., App.vue).
LayoutsProvider
is the global registered component, and you do not need to import it before using it.
<template>
<LayoutsProvider>
<RouterView />
</LayoutsProvider>
</template>
Contributions are welcome! Please feel free to open issues, submit pull requests, or suggest improvements.