v-layout-helpers
v0.1.0
Published
Helper components for setting up a layout for your vuetify backed website.
Downloads
6
Maintainers
Readme
v-layout-helpers
Helper components for setting up a layout for your vuetify backed website.
Remark: Nuxt must be used in order to use the footer component, as it uses the nuxt-link
component under-the-hood.
Installation
npm i v-layout-helpers
Create a new plugin: plugins/v-layout-helpers.js
:
import Vue from "vue"
import { Breadcrumbs, Footer, Loading, SimpleTreeView, Header } from "v-layout-helpers"
Vue.component("Breadcrumbs", Breadcrumbs)
Vue.component("Footer", Footer)
Vue.component("Loading", Loading)
Vue.component("SimpleTreeView", SimpleTreeView)
Vue.component("Header", Header)
Register the plugin under assets/configs/nuxt.js
(or when using a fresh nuxt install nuxt.conf.js in the main project folder):
import { components as vlhComponents, directives as vlhDirectives } from "v-layout-helpers/assets/treeshake"
const plugins = [
...
{
src: "@/plugins/v-layout-helpers.js",
mode: "client"
},
...
]
..
let treeShakeComponents = [...vscmsComponents, ...vlhComponents, ...vesComponents]
let treeShakeDirectives = [...vscmsDirectives, ...vlhDirectives, ...vesDirectives]
const vuetify = {
customVariables: ["~/assets/style/variables.scss"],
treeShake: {
components: Array.from(new Set(treeShakeComponents)),
directives: Array.from(new Set(treeShakeDirectives))
},
..
}
..
BreadCrumbs
Props
props: {
pages: {
type: Array as PropType<Array<string>>,
required: true
}
}
Footer
Props
props: {
text: {
type: String,
default: "Footer Text"
},
links: {
type: Array as PropType<Array<FooterLink>>,
default: () => ([])
},
chips: {
type: Array as PropType<Array<FooterChip>>,
default: () => ([])
},
infoIcons: {
type: Array as PropType<Array<FooterIcon>>,
default: () => ([])
}
}
Loading
props: {
max: {
type: Number,
default: 125
},
jump: {
type: Number,
default: 25
},
timeInterval: {
type: Number,
default: 2000
}
}
SimpleTreeView
props: {
items: {
type: Array as PropType<TreeViewItem[]>,
default: () => ([])
},
anchor: {
type: Object
}
TreeViewItem structure:
interface TreeViewItem {
name: string,
action: any,
style: string,
class: string,
path?: string,
icon: string,
children: TreeViewItem[]
}
Remark 1: items prop is a list of tree-view items representing pages in your website. The automatically generated children (or the ones that are passed) represent header tags in your HTML page. Reamkrk 2: anchor prop is a Vue reference to a page/container containing all the items to be automatically generated as items in the tree-view.