A UI library built with Storybook for Vue 2.
Live demo:
https://vue-storybook-library.netlify.app
# with npm
npm install @jdizm/vue-storybook
# with yarn
yarn install @jdizm/vue-storybook
All exported components are prefixed with a V eg VButton
In your apps main.js / main.ts
# import the base styles
import "@jdizm/vue-storybook/dist/index.css";
# import the components
import { VButton } from "@jdizm/vue-storybook";
# each can be registered via Vue.component()
Vue.component("VButton", VButton);
For development and to modify this storybook library clone this project and:
# run locally
npm run storybook
# run a local demo App.vue
npm run serve
see the storybook docs for more info.
npm run build
update version in package.json
npm publish
The .storybook folder contains all the config files for setting up storybook.
- Configure any addons in the
.storybook/main.jsfile - External scripts, fonts and stylesheets are loaded in
.storybook/preview-head.html - Imports the sass/scss theme and variables in
.storybook/preview.jsviaimport '../theme/main.scss'
- Static assets and resources are located in the
stories/assetsfolder
All the base styling is configured in the theme folder
There are mixins to create custom class names for spacing values according to the theme variables eg m--1 in addition to colorScheme css variabls
Each component has it's own scoped scss file that's directly imported.
- sass mixins and variables
- utility class names for spacing
- css variables for colorScheme
You need to specify @use "@/theme/helpers" as *; at the top of the .scss file.
This will give you access to the mixins and vars via @forward. They are made available as a whole package on the global namespace.
/theme
main.scss
/base
_colorScheme
_reset
_theme
_typography
/helpers
_index
_vars
_mixins
_darkTheme
_lightTheme
Dark and Light mode css variables are added to :root using mixins.
The default color scheme is light mode but will prefer the system ui settings using
@media (prefers-color-scheme: dark) {
@include darkTheme;
}
The color scheme is applied via a light or dark class added to the root html so you can overwrite the default preference
<html lang="en" class="dark">
https://storybook.js.org/docs/vue/workflows/publish-storybook
build storybook: npm run build-storybook
serve locally: npx http-server storybook-static
https://storybook.js.org/docs/vue/workflows/publish-storybook#publish-storybook-online
netlify is configured to deploy the storybook static build directly from main branch.
build folder: /storybook-static production url: https://vue-storybook-library.netlify.app/
This will package the Vue project as a library to be imported in another application.
npm run build
It will need to be published to npm, imported locally or via a git branch.
Clone this git into the project root in /storybook folder
Then add the theme files to the css settings in your project build config..
Vue - vue.config.js Nuxt - nuxt.config.js
Import each component from the folder as needed, instead of from /components, import them directly from /storybook.
For Vue - add the reference to scss files in vue.config.js.
css: [
// import storybook theme
'./storybook/theme/main.scss'
],
For Nuxt - add the reference to scss files in nuxt.config.js.
css: [
// import storybook theme
'./storybook/theme/main.scss'
],
Import the components directly from the /storybook folder.
import Toast from '@/storybook/stories/molecules/Toast.vue'