https://github.com/itzvinoth/slim-ui

Simple components library used for building lightweight vuejs projects
https://github.com/itzvinoth/slim-ui

vue vue2 vuejs vuejs-components

Last synced: 20 days ago
JSON representation

Simple components library used for building lightweight vuejs projects

• Host: GitHub
• URL: https://github.com/itzvinoth/slim-ui
• Owner: itzvinoth
• Created: 2019-11-25T20:43:14.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-22T08:39:15.000Z (6 months ago)
• Last Synced: 2024-05-29T11:21:19.487Z (6 months ago)
• Topics: vue, vue2, vuejs, vuejs-components
• Language: Vue
• Homepage: https://slim-ui.netlify.com
• Size: 2.74 MB
• Stars: 59
• Watchers: 1
• Forks: 8
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# slim-ui

`slim-ui` is a simple vue components library contains needed UI elements. It was developed to solve [zerodha](https://zerodha.com/)'s application frontend needs and generic enough to use in any vue projects.

# Install

Install `slim-ui` with the npm or yarn. It can work with webpack and ES2015 very well.

```bash

# npm

npm install slim-ui

```

```bash

# yarn

yarn add slim-ui

```

Install its peer dependencies.

```bash

# npm

npm install --save-dev node-sass sass-loader

```

```bash

# yarn

yarn add -D node-sass sass-loader

```

# Usage

### Use all components

```vue

import Vue from 'vue'

import SlimUI from 'slim-ui'

Vue.use(SlimUI)

```

### Or indiviual components

```vue

import Vue from 'vue'

import { Button } from 'slim-ui'

Vue.use(Button)

```

### Module Loader

This is the recommended way if your application uses vue-cli or has a webpack based build with vue-loader configured. Import the components as .vue files for seamless integration within your project where path of each component is available at the "import" section of a component documentation.

```vue

import { Button } from 'slim-ui';

```

In the next step, register the component with the tag name you'd like to use.

```vue

Vue.component('su-button', Button);

```

Then you'll be able to utilize the component in your application.

```template

Primary

```

### Sample usage

```html



  Primary



import { Button } from 'slim-ui';

export default {

  components: {

    'su-button': Button

  }

}

```

## Documentation

SlimUI Docs are powered by VuePress and the source can be viewed [here](https://github.com/mevinoth/vp-docs).

## License

MIT

## Credits

Kailash ([@knadh](https://github.com/knadh)),

Vivek ([@vividvilla](https://github.com/vividvilla))