# smartly-vue
POC - vue framefork for design system/ component library

Demo: https://smartly-vue.herokuapp.com/

### Usage: 

Note: We haven't publish the package yet but you can play around using `https://www.npmjs.com/package/smartly-vue-test`

#### Global registration
```
import Vue from 'vue';
import SmartlyVue from 'smartly-vue';

Vue.use(SmartlyVue);
```

#### On Demand (Global)
```
import Vue from 'vue';
import { MsButton, MsInput } from 'smartly-vue';

Vue.use(MsButton);
Vue.use(MsInput);
```

#### On Demand (Local) Per component
```
import { MsButton, MsInput } from 'smartly-vue';

 components: {
    MsInput,
    MsButton
 },
```

### Import CSS

#### On main file
```
import 'smartly-vue/dist/smartly-vue.css'
```

Or if you are using nuxt

#### nuxt.config.js
```
  css: [
    'smartly-vue/dist/smartly-vue.css'
  ],
```

## Project setup
```
npm install
```


## Vuejs
https://vuejs.org/v2/guide/

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

## Storybook
https://storybook.js.org/docs/basics/introduction/

### Compiles and hot-reloads for development
```
npm run storybook
```

### Compiles and minifies for production
```
npm run build-storybook
```

#### Creating storybook stories
You can add a new file named `index.stories.js` inside the component directory:

```
/MsButton
  - index.js
  - index.stories.js
  - MsButton.vue
```

index.stories.js
```
import { storiesOf } from '@storybook/vue';
import MsButton from './MsButton.vue';

storiesOf('Component - MsButton', module)
  .add('default', () => ({
    components: { MsButton },
    template: '<ms-button color="red">Hi there</ms-button>',
  }));
```


### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Deploying to heroku
https://devcenter.heroku.com/articles/git

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).