Storybook docs

If you going to debug component stylings in a more easier way you can use our Storybook preset to style and test components in isolation.

Installation

1. Install the package as a dev dependency and apply Vueless Storybook preset to the project.

npm

npm install -D @vueless/storybook
npx @vueless/storybook

yarn

yarn add -D @vueless/storybook
yarn @vueless/storybook

pnpm

pnpm add -D @vueless/storybook --pnpm
pnpm exec @vueless/storybook

bun

bun add @vueless/storybook -d
bunx @vueless/storybook

Which:

• creates .storybook folder with all needed configuration in the project's root.

• adds commands into the project package.json to run and build Storybook locally.

• creates .npmrc config (for pnpm project only).

If the .storybook folder already exists, the command will back it up by renaming it to .storybook-backup-{timestamp}. You should migrate your custom configuration (if any) and remove the backup folder manually afterward.

2. Run the Storybook ✨

npm run sb:dev

Other available commands:

# run Storybook in docs mode (same as seen on ui.vueless.com)
npm run sb:dev:docs

# build Storybook
npm run sb:build

# preview built Storybook locally
npm run sb:preview

Hiding unused components in Storybook

If you don’t plan to use certain Vueless components, you can hide them from Storybook by setting the storybook key to false in the specific component’s config.

For example, if you don’t plan to use UPagination and UBadge in your project, you can configure them as follows:

vueless.config.{js,ts}

export default {
  component: {
    UPagination: {
      storybook: false,
    },
    UBadge: {
      storybook: false,
    },
  },
};