UI-Kit MPinnovations

Shared UI components based on AntDesign + TailwindCSS.

Dependencies

This module is dependent on (it's on peerDependencies):

• @ant-design-vue/nuxt
• @nuxtjs/tailwindcss

Quick Setup

1. Add @mpinnovations/ui-kit dependency to your project

pnpm add -D @mpinnovations/ui-kit

2. Add @mpinnovations/ui-kit to the modules section of nuxt.config.ts, custom config could be passed in uiKitMpi property as shown below:

export default defineNuxtConfig({
  modules: [
    '@mpinnovations/ui-kit'
  ],
  // ui-kit configuration
  uiKitMpi: {
    theme: {
      colorPrimary: '#9139ae',
      borderRadius: 6,
      fontFamily: 'Roboto',
      colorInfo: '#9139ae'
      twColors: {
        'custom-blue': '#1e40af',
        'custom-red': '#ef4444',
      }.
      twScreens: {
        'sm': '640px',
        'md': '768px',
      }
    },
  },
})

theme.fontFamily is applied to a Tailwind config as well. You can apply this font globally using font-main class on a root container. twColors is for extending default color palette.

3. This module provides two components: <AntdSpa> & <AntdSsr>, it must be used as wrapper in app.vue at the top level in order to utilize theme configuration variables:

<AntdSsr>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</AntdSsr>

// or in case of SPA
<AntdSpa>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</AntdSpa>

4. VSCode config for taiwind intellisense:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.configFile": "./.nuxt/tailwind.config.cjs"
}

You're good to go! ✨

Development

Node version must be >= 18

# Install dependencies
pnpm i

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release