@mok-labs/components

Installation

yarn add @mok-labs/components

Usage

Install the Vue Plugin

// application.ts
import { createApp } from 'vue'
import MokLabsComponents from '@mok-labs/components'
import App from './App.vue'

const app = createApp(App)

// Install the plugin with optional configuration
app.use(MokLabsComponents, {
  googlePlacesApiKey: 'your-api-key' // Optional
})

app.mount('#app')

Import Individual Components

// In your Vue component
import { MokButton, MokInput, MokModal } from '@mok-labs/components'

Tailwind Configuration

The library includes the colors from the design system and they need to be added:

// tailwind.config.js
const mokLabsConfig = require('@mok-labs/components/tailwind');
//...
module.exports = {
  theme: {
    extend: {
      colors: {
        ...mokLabsConfig.colors,
        // It needs to be added before your project's own colors
        // so they can be overwritten if needed.
        primary: 
      },
//

Due to the way Tailwind works, you also have to add the following to tailwind.config.js to make sure the component classes are included in the generated CSS.

// tailwind.config.js
  content: [
    //...
    './node_modules/@mok-labs/components/**/*.vue',
  ],

License

MIT

Changelog

CHANGELOG.md