vuetify-pro-layout
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

Vuetify Pro Layout

easy use Vuetify layout

download version gzip Test LICENSE semantic-release: vue

English | 中文

Demo

👉https://yikoyu.github.io/vuetify-pro-layout/

Features

  • Use vuetify components
  • TypeScript support
  • I18n support(en, zhHans)
  • Vuetify 2.x and Vue 2.x support

Installation

NPM

pnpm add vuetify-pro-layout
# or
yarn add vuetify-pro-layout
# or
npm i vuetify-pro-layout -S

To make vuetify-pro-layout work for Vue 2 (<2.7.0), you need to have @vue/composition-api installed:

pnpm add @vue/composition-api

Install plugin

Vue 2.6.x
import Vue from 'vue'
import VCA from '@vue/composition-api'

import Vuetify from 'vuetify/lib'

import { createVuetifyProLayout, PageHeaderWrapper } from 'vuetify-pro-layout'
import 'vuetify-pro-layout/style.css'

import App from './App.vue'

Vue.use(VCA)
Vue.use(Vuetify)

const vuetify = new Vuetify()

const VuetifyProLayoutPlugin = createVuetifyProLayout({
  lang: 'zhHans',
  components: {
    PageHeaderWrapper
  }
})

Vue.use(VuetifyProLayoutPlugin)

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')
Vue 2.7.x
import Vue from 'vue'

import Vuetify from 'vuetify/lib'

import { createVuetifyProLayout, PageHeaderWrapper } from 'vuetify-pro-layout'
import 'vuetify-pro-layout/style.css'

import App from './App.vue'

Vue.use(Vuetify)

const vuetify = new Vuetify()

const VuetifyProLayoutPlugin = createVuetifyProLayout({
  lang: 'zhHans',
  components: {
    PageHeaderWrapper
  }
})

Vue.use(VuetifyProLayoutPlugin)

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

Global Settings

import { createVuetifyProLayout, PageHeaderWrapper } from 'vuetify-pro-layout'
import 'vuetify-pro-layout/style.css'

const VuetifyProLayoutPlugin = createVuetifyProLayout({
  lang: 'zhHans',
  // Global components
  components: {
    PageHeaderWrapper
  }
})

Vue.use(VuetifyProLayoutPlugin)

I18n

Setting language

You can declare when you install the plugin.

import { createVuetifyProLayout } from 'vuetify-pro-layout'

const VuetifyProLayoutPlugin = createVuetifyProLayout({
  lang: 'zhHans'
})

Vue.use(VuetifyProLayoutPlugin)

Or use setLang dynamic change

import { locale } from 'vuetify-pro-layout'

locale.setLang('en')

Available languages:

  • en (默认)
  • en-US
  • zhHans
  • zh-CN

Use unavailable language

Loading unavailable language, use setMessage for Settings

import { locale } from 'vuetify-pro-layout'

locale.setMessage('zhHant', {
  // i18n text
})
locale.setLang('zhHant')

Rewrite i18n function

<template>
  <provide-context :value="context"></provide-context>
</template>

<script lang="ts">
import { createContext, lang } from 'vuetify-pro-layout'

const ProvideContext = createContext()

export default defineComponent({
  components: {
    ProvideContext
  },
  setup() {
    const context = reactive({
      ...
      i18nRender: (key: string) => {
        // your i18n function
      }
    }) as ContextInstance

    return {
      context
    }
  }
})
</script>

Usage

<script lang="ts">
import { computed, defineComponent, reactive } from '@vue/composition-api'
import type { RouteConfig } from 'vue-router'
import { constantRouterMap } from '#/router/config'

import { ProLayout, createContext } from 'vuetify-pro-layout'
import type { ContextInstance } from 'vuetify-pro-layout'

import logoDefault from '#/assets/icon/logo.svg'

const ProvideContext = createContext()

export default defineComponent({
  name: 'BasicLayout',
  components: {
    ProLayout,
    ProvideContext
  },
  setup() {
    const menu = computed(() => {
      let menus: RouteConfig[] = []
      const routes = constantRouterMap.find((item: RouteConfig) => item.path === '/')
      menus = (routes && routes.children) || []

      return menus
    })

    const settings: ContextInstance['settings'] = reactive({
      dark: false,
      mixed: false,
      system: false,
      rtl: false,
      layout: 'side',
      contentWidth: 'fluid',
      multiTab: false,
      primarycolor: '#1976D2',
      progress: false,
      canInstall: false,
      updateAvailable: false
    })

    const context = reactive({
      title: `<span style="font-weight: bold">Vuetify Pro Layout</span>`,
      logo: logoDefault,
      menu,
      collapsed: false,
      setting: false,
      settings
      // i18nRender: (key: string) => lang?.['zh-CN']?.[key] || key
    }) as ContextInstance

    function collapsedChange(val: boolean) {
      context.collapsed = val
    }

    function settingChange({ type, value }: { type: string; value: unknown }) {
      if (type === 'layout') settings.layout = value as 'side' | 'top'
      if (type === 'rtl') settings.rtl = value as boolean
      if (type === 'contentWidth') settings.contentWidth = value as 'fluid' | 'fixed'
      if (type === 'multiTab') settings.multiTab = value as boolean
      if (type === 'primarycolor') settings.primarycolor = value as string
      if (type === 'dark') settings.dark = value as boolean
      if (type === 'mixed') settings.mixed = value as boolean
      if (type === 'system') settings.system = value as boolean
      // if (type === 'install') promptInstaller()
      // if (type === 'refresh') refreshContent()
      if (type === 'setting') context.setting = value as boolean
    }

    return {
      context,
      collapsedChange,
      settingChange
    }
  }
})
</script>

<template>
  <provide-context :value="context">
    <pro-layout show-setting-btn @setting-change="settingChange" @collapsed-change="collapsedChange">
      <router-view />
    </pro-layout>
  </provide-context>
</template>

Props

ProvideContext

Name Type Default Description
title Title String -
menu Menu Array []
setting The Setting drawer value Boolean Required
collapsed The Menu value Boolean Required
settings Setting drawer object Object Required
settings@dark Enable dark theme Boolean Required
settings@mixed Enable mixed theme (unsupport) Boolean Required
settings@system Follow system theme Boolean Required
settings@rtl Enable RTL mode Boolean Required
settings@layout menu mode ‘side’ | ‘top’ Required
settings@contentWidth content width mode ‘fluid’ | ‘fixed’ Required
settings@multiTab Enable multiTab Boolean Required
settings@primary primary color String Required
settings@progress Show progress bar Boolean Required
settings@canInstall Pwa able install Boolean Required
settings@updateAvailable Pwa able update Boolean Required
logo logo SVG string
i18n-render Local i18n render Function (key: string) => string | undefined undefined

ProLayout

Name Type Default Description
showSettingBtn Enable setting button boolean false
app-bar-right VApp right slot v-slot
@setting-change Setting drawer change event ({ type, value }: { type: string, value: any }) => void
@collapsed-change Menu change event (value: boolean) => void

PageHeaderWrapper

Name Type Default Description
content content area String | v-slot -
extra-content extra content area String | v-slot -
toolbar toolbar area v-slot -
tab-list Tabs list string[] | object[] []
tab-active-key The Tab value Number 0
@tab-change Tab change event (e: object) => void -
@update:tab-active-key tab-active-key.sync -

Package Sidebar

Install

npm i vuetify-pro-layout

Weekly Downloads

5

Version

2.3.0

License

MIT

Unpacked Size

180 kB

Total Files

59

Last publish

Collaborators

  • yikoyu