Skip to content

fox-one/uikit

Repository files navigation

@foxone/uikit

An UIkit based on Vue & Vuetify, mainly written in TypeScript, includes some useful components widely used in bots for Mixin Messenger.

Documents & Live Demos

Here are components documents and demos.

Figma files

Here is a Figma file.

Projects Using UIkit

Getting started

Latest nuxt_ts_template includes UIKit by default. Enjoy.

2. Add UIkit to existed projects

  • You can create project with vue-cli or nuxt .

  • Add typescipt support .

    how to enable typescript in vue-cli?

    how to enable typescript in nuxt?

  • Add uikit with yarn add @foxone/uikit or npm install @foxone/uikit.

  • UIKit use @mdi/js as icon libary, Add MDIcons support yarn add @mdi/js -D or npm 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,
            },
          },
        },
      });
    }

Attention

  • 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)