@ddowns_juniper/juniper-ui
v1.0.8
Published
A Vue component library skeleton using TypeScript, Rollup and Storybook
Downloads
1
Maintainers
Readme
Vue Component Library
For Vue 3
This project skeleton was created to help people get started with creating their own Vue component library using:
- Vue (V3)
- Rollup
- TypeScript
It features:
- Storybook to help you create and show off your components
- Jest enabling testing of your Vue components
Read my blog post about why and how I created this project skeleton ▸
Check out this CodeSandbox to see the component library in action ▸
Development
Testing
npm run test
Building
npm run build
Storybook
To run a live-reload Storybook server on your local machine:
npm run storybook
To export your Storybook as static files:
npm run storybook:export
Publishing
Hosting via NPM
First, make sure you have an NPM account and are logged into NPM using the npm login
command.
Then update the name
field in package.json
to reflect your NPM package name in your private or public NPM registry. Then run:
npm publish
The "prepublishOnly": "npm run build"
script in package.json
will execute before publish occurs, ensuring the build/
directory and the compiled component library exist.
Usage
Let's say you created a public NPM package called harvey-vue-component-library
with the SampleComponent
component created in this repository.
First, install the component library:
npm i --save harvey-vue-component-library
Next, the component library's peerDependencies must be installed:
npm i --save vue@^3.0.0 vue-class-component@^8.0.0
Usage of the component will be:
<template>
<SampleComponent
headingText="Hello world!"
bodyText="Made with love by Harvey"
/>
</template>
<script>
import { SampleComponent } from "harvey-vue-component-library";
export default {
name: "App",
components: {
SampleComponent: SampleComponent,
},
};
</script>
);
export default App;