Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
storybook-vue-addon
Advanced tools
Readme
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>
<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 vite storybook builder is supported and
@storybook/builder-vite
version 0.2.7 or higher is required.
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"
],
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
.dev
: Build in watch mode.lint
: Check for eslint and prettier issues.test
: Run the tests.example:vite
: Open the example storybook (using vite).play
: Run the playground (currently not used).release
: Release a new version to npm.FAQs
Storybook stories in native Vue format
The npm package storybook-vue-addon receives a total of 888 weekly downloads. As such, storybook-vue-addon popularity was classified as not 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 1 open source maintainer 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.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.