An UIkit based on Vue & Vuetify, mainly written in TypeScript, includes some useful components widely used in bots for Mixin Messenger.
Here are components documents and demos.
Here is a Figma file.
1. Using nuxt_ts_template
Latest nuxt_ts_template includes UIKit by default. Enjoy.
-
Add
typescipt
support . -
Add uikit with
yarn add @foxone/uikit
ornpm install @foxone/uikit
. -
UIKit use @mdi/js as icon libary, Add MDIcons support
yarn add @mdi/js -D
ornpm install @mdi/js -dev
-
Use plugin with
Vue.use()
, add i18n support.import Vue from "vue"; import Vuetify from "vuetify/lib"; import UIkit from "@foxone/uikit"; import zh from "vuetify/es5/locale/zh-Hans"; import en from "vuetify/es5/locale/en"; import ja from "vuetify/es5/locale/ja"; import enUIkit from "@foxone/uikit/src/locales/en"; import jaUIkit from "@foxone/uikit/src/locales/ja"; import zhUIkit from "@foxone/uikit/src/locales/zh-Hans"; Vue.use(Vuetify); Vue.use(UIkit); export default function(store) { const isDark = store.state.app?.dark || false; return new Vuetify({ icons: {}, theme: { dark: isDark, }, lang: { locales: { zh: { ...zh, ...zhUIkit, }, en: { ...en, ...enUIkit, }, ja: { ...ja, ...jaUIkit, }, }, }, }); }
- UIKit require Typescript v3.7.0+, Please upgrade if your Typescript lib is not meet the version.
- BottomNav does not fit properly in iPhoneX ? Check if
viewport-fit=cover
has been added in your html. (more about fit iPhonex)