Manguito Component Library (MCL)

A simple component library based on Vue 3, SASS and Tailwind CSS MCL uses vite as bundler

Project Setup

Install packages

pnpm install

Run dev server

pnpm run story:dev

Create new component

pnpm run package:create

Commit changes

git add . --or-- git add <file-name>
pnpm commit
git push

Installation

pnpm i -D tailwindcss postcss autoprefixer sass
pnpm i @bobbykim/manguito-theme
npx tailwindcss init -p

tailwind.config.js

const { mclTheme } = require('@bobbykim/mcl-theme')
module.exports = {
  content: [
    './src/**/*.{vue,ts,js,cjs}',
    './node_modules/@bobbykim/**/*.{vue,ts,js,cjs}',
  ],
  plugins: [mclTheme()],
}

Usage

in your-file.vue

<script setup lang="ts">
import {ComponentName} from '@bobbykim/<PackageName>'
...
</script>

<template>
  ...
  <component-name></component-name>
  ...
</template>

Dependencies

Components

Vue Vite SASS Typescript Tailwind CSS (tailwindcss, autoprefixer, postcss) @vitejs/plugin-vue vue-tsc @vueuse/core

Story Page

Storybook @storybook/vue3

Package management

Lerna pnpm workspace

License

MIT