0.0.7 • Published 1 year ago
dashboard-layout-vue v0.0.7
dashboard-layout-vue
Vue 3 basic responsive layout for admin dashboards.
Disclaimer
I'm a beginner and this layout is mostly for my own use.
Work in progress
I probably won't be looking at issues, but you're free to fork and modify as you wish.
Setup
Requires
- Vue 3
- IonIcons
- Add IonIcons as described on their website. Example:
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
- Include in
main.js
import { createApp } from 'vue'
import App from './App.vue'
import DashboardLayout from 'dashboard-layout-vue' // <-- This
import 'dashboard-layout-vue/styles.css' // <-- This
const app = createApp(App);
app.use(DashboardLayout) // <-- This
app.mount('#app')
Example usage
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function handleClick(pageTo){
router.push({ path: pageTo})
}
const currentRoute = computed(() => route.path)
</script>
<template>
<DashboardLayout primaryColor="#E91E63" @buttonClicked="handleClick" :currentRoute="currentRoute">
<template v-slot:sidebar-logo>
<div class="logo">My Logo</div>
</template>
<template v-slot:header>
Something in the header
</template>
<template v-slot:content>
</template>
</DashboardLayout>
</template>
Props
Prop | Description | Example |
---|---|---|
menu | The menu | See below |
mobileBreakpoint | Mobile breakpoint | 1024 |
backgroundColor | Background color (the lightest) | '#fff' |
contentBackgroundShade | Shading percentage for content container | -0.05 |
currentRoute | The current route from the useRoute() object | '/app/option1' |
primaryColor | Brand color | '#4361ee' |
fontColor | Font color | '#494c5c' |
sidebarWidth | Width of the sidebar | '16rem' |
Example menu
[
{
section: "Section 1",
options: [
{
id: 'option-1',
displayText: "Option 1",
to: "/app/option1",
ionIcon: "pie-chart-outline"
},
{
id: 'option-child',
displayText: "Option w/ children",
ionIcon: "chatbubbles-outline",
children: [
{ id: 'child-1', displayText: "One child", to: "/app/child", ionIcon: "flask-outline" },
{ id: 'child-2', displayText: "Another child", to: "/app/child", ionIcon: "pricetag-outline" },
],
},
{
id: 'option-2',
displayText: "Option 2",
to: "/app/option2",
ionIcon: "flash-outline"
}
]
},
{
section: "Section 2",
options: [
{
id: 'option-3',
displayText: "Option 3",
to: "/app/option3",
ionIcon: "fish-outline"
}
]
},
]
Slots
Slot | Example |
---|---|
header | |
content | |
sidebar-logo |
Events
Event | Description | Example Payload |
---|---|---|
buttonClicked | When an element from a sidebar is clicked | '/app/option1' |
Bye.