Vuetify Pro Layout
easy use Vuetify
layout
English | 中文
Demo
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 | - |