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: 15 days 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 (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-24T13:18:56.000Z (over 2 years ago)
• Last Synced: 2024-04-25T10:41:07.525Z (8 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

Awesome Lists containing this project

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).