Symbol-IT Vue Components Library
⏳ Installation
1. 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' },
],
💡 Create a new component
2.
/src/components/X
1. Create your component X.vue in
index.js
with exports of your component in /src/components/X
2. Create Example
import SButton from './SButton'
export { SButton }
export default SButton
/src/components/index.js
3. Add your component in the exports components list in Example
export * from './SButton'
X.stories.js
for your component in /src/components/X
4. Create a storybook story 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/
🗞 Publish your component to NPM
3. To publish your component, you need :
- Change the package.json version
- 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.