MPI shared components
npm install @aleke_aleke/ui-kit@mpinnovations/ui-kit dependency to your project
bash
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:
`js
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: & , it must be used as wrapper in app.vue at the top level in order to utilize theme configuration variables:
`jsx
// or in case of SPA
`
4. VSCode config for taiwind intellisense:
`json
{
"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
`bash
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
``