Symbol-IT Vue Components Library

1. ⏳ Installation

npm i @symbol-it/symbolit-vue-components

After installation you have import the library' style symbolit-vue-components.css

For a Nuxt project, add this line in nuxt.config.js

css: [
{ src: '@symbol-it/symbolit-vue-components/dist/symbolit-vue-components.css', lang: 'css' },
],

2. 💡 Create a new component

1. Create your component X.vue in /src/components/X

2. Create index.js with exports of your component in /src/components/X

Example

import SButton from './SButton'

export { SButton }
export default SButton

3. Add your component in the exports components list in /src/components/index.js

Example

export * from './SButton'

4. Create a storybook story X.stories.js for your component in /src/components/X

import SButton from './SButton.vue';

export default {
  title: 'Components/SButton',
  component: SButton
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { SButton },
  template: '<s-button @onClick="onClick"  v-bind="$props" >Submit</s-button>',
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
};

export const Outlined = Template.bind({});
Outlined.args = {
  outline: true
};

5. Test your component from storybook:

npm run storybook

You will have access to your component from http://localhost:6006/

3. 🗞 Publish your component to NPM

To publish your component, you need :

1. Change the package.json version
2. Once your code merged in the main branch, create a new release from github repository https://github.com/Symbol-it/symbolit-vue-components/releases

The GitHub Actions will publish it automatically after creating a new release.