v-layout-helpers

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.