Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lecoueyl/mijin
Tailwind CSS UI components build for Vue.js / Nuxt.js
https://github.com/lecoueyl/mijin
component-library nuxt tailwindcss ui-components ui-kit ui-library vue
Last synced: about 1 month ago
JSON representation
Tailwind CSS UI components build for Vue.js / Nuxt.js
- Host: GitHub
- URL: https://github.com/lecoueyl/mijin
- Owner: lecoueyl
- License: mit
- Created: 2021-01-23T07:41:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-24T13:18:56.000Z (almost 2 years ago)
- Last Synced: 2024-03-25T10:21:10.216Z (about 2 months ago)
- Topics: component-library, nuxt, tailwindcss, ui-components, ui-kit, ui-library, vue
- Language: JavaScript
- Homepage: https://lecoueyl.github.io/mijin.web
- Size: 3.75 MB
- Stars: 198
- Watchers: 3
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-vue - Mijin - Responsive Tailwind CSS UI components, without dependencies (Components & Libraries / Frameworks)
- awesome-vue - Mijin - Responsive Tailwind CSS UI components, without dependencies (Components & Libraries / Frameworks)
- awesome-vue - Mijin - Responsive Tailwind CSS UI components, without dependencies (Components & Libraries / Frameworks)
README
# mijin
> [Tailwind CSS](https://tailwindcss.com) UI components build for [Vue.js](https://vuejs.org) 2.x / [Nuxt.js](https://nuxtjs.org) 2.x
- [📖 Documentation](https://lecoueyl.github.io/mijin.web/docs)
## Features
- 💅 Component style relying uniquely on Tailwind CSS presets classes
- 📱 Responsive
- 🌗 Support dark and light mode
- 🕵️ No dependencies
## Getting Started
> [tailwindcss](https://tailwindcss.com) version >= 2.0 must be already present in your application
1. Add `mijin` dependency to your project
```bash
# using npm
npm install mijin tailwindcss --save-dev
# using yarn
yarn add mijin tailwindcss --dev
```
2. Add mijin Tailwind CSS preset `tailwind-preset.js` to your Tailwind CSS configuration file `tailwind.config.js`
```javascript
// tailwind.config.js
const mijin = require('mijin/dist/tailwind-preset.js');
module.exports = {
// load mijin presets
presets: [
mijin,
],
// allow PurgeCSS to analyze mijin components
purge: {
content: [
'node_modules/mijin/src/components/**/*.vue',
],
},
};
```
3. Load the plugin in your vue application
### Vue.js
```javascript
import Vue from 'vue'
import Mijin from 'mijin'
Vue.use(Mijin)
// or load specific components
import {
Button
Input,
// ...
} from 'mijin'
Vue.component('MjButton', Button)
Vue.component('MjInput', Select)
```
### Nuxt.js
Add `mijin.js` file to your `plugins` directory
```javascript
// plugins/mijin.js
import Vue from 'vue';
Vue.use(Mijin)
```
Load the plugin from `nuxt.config.js`
```javascript
// nuxt.config.js
...
plugins: [
'~/plugins/mijin.js',
],
...
```
[📖 Read more](https://lecoueyl.github.io/mijin.web/docs/general/getting-started/)
## Support
### Bug report
If you see an error message or run into an issue, please create a bug report, this effort is valued and it will help everybody.
[**Create bug report**](https://github.com/lecoueyl/mijin/issues/new?assignees=&labels=bug&template=bug_report.md&title=)
### Feature request
If you're missing a component or want to add a new feature, please submit a request.
If a similar feature request already exists, don't forget to leave a "+1". Adding some information about the feature will be embraced warmly.
[**Submit feature request**](https://github.com/lecoueyl/mijin/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=)
# Contributing
Mijin is an open source project. We are committed to a fully transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the community.
Please refer to our [contribution guidelines](./CONTRIBUTING.md).