Provides a component collections of application wireframes. Intended to use as root component of Vue apps.
Available wireframes:
- basic
- double navigation
- Vuetify
Basic wireframe component.
Name | Description | Type | Required | Default |
---|---|---|---|---|
bar | bar slot configuration |
Object |
false |
{} |
footer | footer slot configuration |
Object |
false |
{} |
mobileBreakpoint | Mobile breakpoint | String - one of the $vuetify.breakpoint key |
false |
xs |
navLeft | navLeft slot configuration |
Object |
false |
{} |
navRight | navRight slot configuration |
Object |
false |
{} |
bar options:
- color: color of the vuetify v-app-bar component (working when dark is not defined)
- dark: dark status of the vuetify v-app-bar component, default
false
- dense: dense status of the vuetify v-app-bar component, default
false
- height: height of the vuetify v-app-bar component
- mobileMenuComponent: Vue component for mobile screens, to render instead of the bar slot
- stateless: stateless status of the vuetify v-navigation-drawer component, used for mobile bars only, default
true
footer options:
- dark: dark status of the vuetify v-footer component, default
false
- height: height of the vuetify v-footer component
navLeft/navRight options:
- color: color of the vuetify v-navigation-drawer component (working when dark is not defined)
- dark: dark status of the vuetify v-navigation-drawer component, default
false
- width: width of the vuetify v-navigation-drawer component
- visible: initial visibility of the navLeft/navRight slot
Name | Description | Default Slot Content | Optional |
---|---|---|---|
default | Main app container | - | true |
bar | Top bar | - | true |
navLeft | Left navigator, collapsable | - | true |
navRight | Right navigator, collapsable | - | true |
default | Main content | - | true |
footer | Footer | - | true |
Wireframe component with a fixed left mini-variant navigator.
Like basic wireframe, plus:
Name | Description | Type | Required | Default |
---|---|---|---|---|
nav | nav slot configuration |
Object |
false |
{} |
nav options:
- color: color of the vuetify v-navigation-drawer component
- width: width of the vuetify v-navigation-drawer component
Like basic wireframe, plus:
Name | Description | Default Slot Content | Optional |
---|---|---|---|
nav | Inner left navigator, collapsable | - | true |
- Import the desired wireframe
import { BasicWireframe } from "@/../ditto/wireframes";
// or
// import { DoubleNavigationWireframe } from "@/../ditto/wireframes";
- Register the component and the desired wireframe options
export default {
components: { BasicWireframe },
data: () => ({
options: { bar: {...}, navRight: {...}, ... }
})
};
- Use the wireframe component in the html section (usually the wifreframe is the application root component)
<template>
<basic-wireframe v-bind="options">
<!-- default slot -->
<router-view />
<!-- named slots -->
<template v-slot:bar="{ className, dark, mobile }">
<div :class="className" :dark="dark" :mobile="mobile">bar</div>
</template>
<template v-slot:navLeft="{ dark }">
<div :dark="dark">nav left</div>
</template>
<template v-slot:navRight="{ dark }">
<div :dark="dark">nav right</div>
</template>
<template v-slot:footer>
<div>footer</div>
</template>
</basic-wireframe>
</template>
All routes with $route.meta.guest == true
(see ditto auth module) are mounted outside the layout structure. If needed, a specific wireframe configuration must be specified in the AuthWrapper component.
To customize the wireframe slots you can:
- import your custom components locally and use them inside the wireframes slots definition:
const MyBarComponent = () => import("@/components/MyBarComponent");
export default {
components: { BasicWireframe, MyBarComponent },
data: () => ({ ... })
};
<template>
<basic-wireframe v-bind="options">
...
<!-- named slots -->
<template v-slot:bar="{ className, ...data }">
<my-bar-component :class="className" v-bind="data" />
</template>
...
</basic-wireframe>
</template>
Use this option for slots whose content are fixed through all your application routes.
- use named routes, defining your custom components in the router configuration:
{
name: "basic-wireframe-home",
path: "home",
components: {
...
bar: () => import("@/components/MyBarComponent")
}
},
<template>
<basic-wireframe v-bind="options">
...
<!-- named slots -->
<template v-slot:bar="{ className, ...data }">
<router-view name="bar" :class="className" v-bind="data" />
</template>
...
</basic-wireframe>
</template>
Use this option for slots whose content change through your application routes.
See the wireframes examples code for more information.