Majestic-ui NPM

Majestic UI

Vue 3 component library. Gunza inc.

Install

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

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)

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'],
  },
})

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

Somewhere you must connect directives manually

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)

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

Majestic UI

Install

Install Vue Plugin

Configure WindiCSS

Plugin options

Vue 3 mq options