Storybook

To work with components in a more easier way, use our preset for Storybook 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 init

yarn

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

pnpm

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

bun

bun add -D @vueless/storybook
bunx @vueless/storybook init

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.

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

Hide unused components in Storybook

If you don’t plan to use certain Vueless components, you can hide them from Storybook by setting the component name 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 {
  components: {
    UPagination: false,
    UBadge: false,
  },
};

Or, if you want to hide certain Vueless components while keeping their custom configs, set the storybook key to false in the specific component’s config.

vueless.config.{js,ts}

export default {
  components: {
    UPagination: {
      storybook: false,
      ...
    },
    UBadge: {
      storybook: false,
      ...
    },
  },
};