Smartly-vue-test NPM

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>',
  }));