mijin
Mijin is a UI component library built for Vue.js 2.x and Nuxt.js 2.x, leveraging Tailwind CSS for styling. It provides a set of responsive, customizable components designed to accelerate web development.
Key Features:
- Tailwind CSS Based: Utilizes Tailwind CSS utility classes for styling, ensuring consistency and ease of customization.
- Responsive Design: Components are designed to be responsive out-of-the-box, adapting to various screen sizes.
- Dark and Light Mode Support: Offers built-in support for both dark and light themes.
- Zero Dependencies: No external dependencies beyond Tailwind CSS and Vue.js, reducing project bloat.
Getting Started:
- Install
mijin
andtailwindcss
as dev dependencies:npm install mijin tailwindcss --save-dev # or yarn add mijin tailwindcss --dev
- Add the Mijin preset to your
tailwind.config.js
:const mijin = require('mijin/dist/tailwind-preset.js'); module.exports = { presets: [ mijin, ], purge: { content: [ 'node_modules/mijin/src/components/**/*.vue', ], }, };
- Load the plugin in your Vue.js or Nuxt.js application.
Vue.js:
import Vue from 'vue'
import Mijin from 'mijin'
Vue.use(Mijin)
Nuxt.js:
Create a plugin file (plugins/mijin.js
):
import Vue from 'vue';
import Mijin from 'mijin';
Vue.use(Mijin);
Then, add the plugin to your nuxt.config.js
:
plugins: [
'~/plugins/mijin.js',
]