Majestic UI

Vue 3 component library. Gunza inc.

Install

npm install majestic-ui
#or
yarn add majestic-ui

Install Vue Plugin

Open src/main.js in project.

import MajesticUI from 'majestic-ui'

import 'virtual:windi.css'
import '~/majestic-ui/dist/style.css'

app.use(MajesticUI.Plugin)

Configure WindiCSS

Open windi.config.js

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['src/**/*.{vue,html,ts,js}', '**/*.vue', '*.vue',
      'node_modules/majestic-ui/dist/components/**/*.vue',
      'node_modules/majestic-ui/dist/composables/**/*.ts',
      'node_modules/majestic-ui/dist/composables/**/*.js'
    ],
    exclude: ['node_modules', '.git'],
  },
})

Plugin options

const options = {
  textInvert: false, // Invert text color in components
}
app.use(MajesticUI.Plugin, options)

Somewhere you must connect directives manually

Vue 3 mq options

createApp(App).use(Vue3Mq, {
    breakpoints: {
      phone: 0,
      shortTablet: 768,
      wideTablet: 912,
      desktop: 1152,
    },
  })

import useMq from 'majestic-ui/composables/useMq'

const { isPhone, isShortTablet, isWideTablet, isTablet, isDesktop, isPhoneOrTablet, isTabletOrDesktop, screen } =
  useMq()

provide('isPhone', isPhone)
provide('isShortTablet', isShortTablet)
provide('isWideTablet', isWideTablet)
provide('isTablet', isTablet)
provide('isDesktop', isDesktop)
provide('isPhoneOrTablet', isPhoneOrTablet)
provide('isTabletOrDesktop', isTabletOrDesktop)
provide('screen', screen)