Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zemkogabor/admin-layout-vue
Admin layout Vue component with sidebar and navbar.
https://github.com/zemkogabor/admin-layout-vue
Last synced: 25 days ago
JSON representation
Admin layout Vue component with sidebar and navbar.
- Host: GitHub
- URL: https://github.com/zemkogabor/admin-layout-vue
- Owner: zemkogabor
- License: mit
- Created: 2022-03-08T17:18:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-07T10:42:38.000Z (5 months ago)
- Last Synced: 2024-10-22T16:37:18.623Z (26 days ago)
- Language: Vue
- Size: 63.5 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Admin Layout - Vue JS component
[](https://www.npmjs.com/package/admin-layout-vue)
## Requirements:
- Bootstrap 5.2
- Vue router (for ``)
- Vue 3
## Install:
```bash
npm install admin-layout-vue
```
## Parameters:
| **Property** | **Type** | **Required** |
|------------------------------------------------------|------------------|--------------|
| brandName | String | No |
| leftItemsByGroups | Array | Yes |
| leftItemsByGroups[].heading | String | No |
| leftItemsByGroups[].items | Array | Yes |
| leftItemsByGroups[].items[].label | String | Yes |
| leftItemsByGroups[].items[].iconClass | String | No |
| leftItemsByGroups[].items[].route | Object | No |
| leftItemsByGroups[].items[].route.name | String | Yes |
| leftItemsByGroups[].items[].visible | Bool | No |
| leftItemsByGroups[].items[].subItems | Array | No |
| leftItemsByGroups[].items[].relatedRoutes | Array | No |
| leftItemsByGroups[].items[].subItems[].label | String | Yes |
| leftItemsByGroups[].items[].subItems[].route | Object | Yes |
| leftItemsByGroups[].items[].subItems[].route.name | Object | Yes |
| leftItemsByGroups[].items[].subItems[].visible | Bool | No |
| leftItemsByGroups[].items[].subItems[].relatedRoutes | Array | No |
| topItems | Array | Yes |
| topItems[].label | String | No |
| topItems[].iconClass | String | No |
| topItems[].callable | Callable | No |
| topItems[].showBadge | Bool | No |
| topItems[].subItems[] | Array | No |
| topItems[].subItems[].label | String | Yes |
| topItems[].subItems[].class | String | No |
| topItems[].subItems[].iconClass | String | No |
| topItems[].subItems[].callable | Callable | Yes |
| topNavClass | String | No |
| leftNavClass | [String, Object] | No |
| leftNavBgClass | [String, Object] | No |
| dataBsThemeTop | String | No |
| dataBsThemeLeft | String | No |
| strictActiveRoute | Boolean | No |
## Example
```vue
Example
import AdminLayout from 'admin-layout-vue'
export default {
name: 'ExampleComponent',
components: {
AdminLayout,
},
data() {
return {
/**
* Sidebar menu items
*/
leftItemsByGroups: [
{
items: [
{
label: 'Home',
iconClass: 'bi bi-house-door-fill',
route: {
name: 'home',
},
},
],
},
{
heading: 'First heading',
items: [
{
label: 'People',
iconClass: 'bi bi-people-fill',
route: {
name: 'people',
},
relatedRoutes: [
'peopleCreate',
],
},
{
label: 'Briefcase',
iconClass: 'bi bi-briefcase-fill',
subItems: [
{
label: 'Option 1',
route: {
name: 'option',
query: {
status: '1',
},
},
relatedRoutes: [
'relatedOption',
],
},
{
label: 'Option 2',
route: {
name: 'option',
query: {
status: '2',
},
},
},
],
},
],
},
{
items: [
{
label: 'Coin',
iconClass: 'bi bi-coin',
route: {
name: 'coin',
},
},
],
},
],
/**
* Top navbar items
*/
topItems: [
{
iconClass: 'bi bi-person-circle',
subItems: [
{
label: this.$t('logout.submit'),
callable: this.onLogoutClick,
},
],
showBadge: false,
},
{
iconClass: 'bi bi-bell-fill',
callable: this.showNotifications,
showBadge: this.notificationsTotalCount > 0,
},
],
}
}
}
```
## Screenshots
