
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
storybook-vue-addon
Advanced tools
A Storybook addon that allows to write stories in native Vue syntax and compiles it to Storybook's CSF format.
Example: Button.stories.vue
<script setup lang="ts">
import Button from './Button.vue'
</script>
<template>
<Stories
title="Stories in Vue format π"
:component="Button"
>
<Story title="Primary">
<Button
background="#ff0"
label="Button"
/>
</Story>
<Story title="Secondary">
<Button
background="#ff0"
label="ππππ―"
/>
</Story>
<Story title="Tertiary">
<Button
background="#ff0"
label="ππππ€"
/>
</Story>
</Stories>
</template>
docs
block, directly in your stories.vue
files (see below for details)<Stories :component="...">
) and not for every storyThis package is currently in an early alpha stage and supports only the fundamental Storybook features. Compatibility with more advanced features and addons is work in progress. Please open an issue if you encounter any bugs or missing integrations.
The way to write stories as idiomatic Vue templates is heavily inspired by the great Histoire.
Note: Currently, only the
@storybook/vue3-vite
builder is supported (or the deprecated@storybook/builder-vite
version 0.2.7 or higher).
Add storybook-vue-addon
to your dev-dependencies.
# npm
npm install --save-dev storybook-vue-addon
# yarn
yarn add -D storybook-vue-addon
# pnpm
pnpm add -D storybook-vue-addon
In .storybook/main.js
, add *.stories.vue
to the stories patterns and storybook-vue-addon
as an addon.
"stories": [
"../src/**/*.stories.mdx",
- "../src/**/*.stories.@(js|jsx|ts|tsx)"
+ "../src/**/*.stories.@(js|jsx|ts|tsx|vue)"
],
...
"addons": [
"@storybook/addon-essentials",
+ "storybook-vue-addon"
],
You can add documentation for your components directly in your story SFC using the custom docs
block.
<template>Define your stories here as above</template>
<docs lang="md">
import { Canvas } from '@storybook/blocks';
# Documentation
Everything in one place. Isn't it great?
You can render stories in the docs using the `<Canvas>` component.
<Canvas />
</docs>
You can use Markdownβs readable syntax (such as # heading) for your documentation, include stories, and freely embed JSX component blocks at any point in the file. See Storybook Docs for more information. There are a few minor differences to standard MDX documentation pages:
<Meta of=...>
tag is not needed.<template>
<Stories>
<Story title="Unchecked">
<Checkbox label="Unchecked" />
</Story>
</Stories>
</template>
<docs>
import { Canvas } from '@storybook/blocks';
<Canvas of={Unchecked} />
</docs>
Volar should be able to automatically recognize the Stories
and Story
components. It is also possible to import them from storybook-vue-addon
:
import type { Stories, Story } from 'storybook-vue-addon/core'
If for whatever reason you process Storybook stories in your build pipeline, you probably want to first transpile the Vue stories to classical CSF stories by adding storybook-vue-addon
to your build.
// vite.config.ts
import VueStories from 'storybook-vue-addon/vite'
export default defineConfig({
plugins: [
VueStories({
/* options */
}),
],
})
Example: playground/
// rollup.config.js
import VueStories from 'storybook-vue-addon/rollup'
export default {
plugins: [
VueStories({
/* options */
}),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('storybook-vue-addon/webpack')({
/* options */
}),
],
}
// nuxt.config.js
export default {
buildModules: [
[
'storybook-vue-addon/nuxt',
{
/* options */
},
],
],
}
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('storybook-vue-addon/webpack')({
/* options */
}),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import VueStories from 'storybook-vue-addon/esbuild'
build({
plugins: [VueStories()],
})
corepack enable
(use npm i -g corepack
for Node.js < 16.10).pnpm install
.Commands:
build
: Build everything. Output can be found in dist
.build:types
: Build the types for the Story
and Stories
components, to ease development in the components.d.ts
file.dev
: Build in watch mode.lint
: Check for eslint and prettier issues.test
: Run the tests.example:vite
: Open the example storybook (using vite). You need to run build
or dev
first.play
: Run the playground (currently not used).release
: Release a new version to npm.Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
0.6.2 (2024-12-18)
FAQs
Storybook stories in native Vue format
The npm package storybook-vue-addon receives a total of 1,719 weekly downloads. As such, storybook-vue-addon popularity was classified as popular.
We found that storybook-vue-addon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last weekβs supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.