vue-styleguidist VS storybook

Yeah there’s a recent issue with the main docblock not being detected when using

Unfortunately, I found no way to add JSDoc comments to the counter-update event. I think it is currently not supported in vue-docgen-api, which Storybook uses under the hood to extract code comments into descriptions. Leave a comment if you know a way how to document events in Vue 3.

At my workplace we set up a small component library for stuff that we regularly (re-)use. It has gained quite some traction within our workplace so now we would like to write a proper and easy to use documentation. We would love to use something like vue-styleguidist which relies on jsDoc to generate a website to showcase and develop components.

I found some promising things like Vue Styleguidist (https://vue-styleguidist.github.io/), but unfortunately it only supports Vue 2 by now. My question is: Do you have experience in documenting your Vue 3 SFC? What tools or toolchain do you use?

Most of the frontend stack at Ecosia is built around with Vue. We also had a design style-guide built using Vue Styleguidist. Our style-guide is essentially a list of all the Vue components used across our frontend applications.

Few days ago I worked on a vue-styleguidist project and I had to use a Google Font.

As a development server, we can use an actual development server of our app, like Create React App (that we use for the examples) or Vite, or another tool like React Styleguidist or Storybook, to test isolated components.

Source: qcatch on Feb 22, 2024 https://github.com/storybookjs/storybook/discussions/25470

[Bug]: Configuration with TailwindCss Next.js using Tailwind with Storybook

Astro has no runtime. This means no unit tests. This also means no Storybook for your Astro components (although, they’re working on it!)

If you're into UI development, then you need to know about Storybook. It's a frontend workshop for building UI components and pages in isolation. The latest version brings some big improvements for testing and documentation with built-in visual testing. There's also React Server Component support, improved controls for React and Vue projects, as well as improved Vite architecture, Vitest testing, and Vite 5 support. Check out all the major changes in the Storybook changelog.

Storybook

We are continuing to make building fullstack websites and application with Analog and Angular as seamless as possible, and extending the Angular ecosystem through integrations with Astro, Nx, [Vitest]https://analogjs.org/docs/features/testing/vitest, Storybook, and more.

Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools.

Expo has first-class support for building full-stack websites with React, so I can leverage that to add Cypress/Playwright for E2E testing and add the Storybook for UI components.

Storybook emerges as a pioneering solution among React debugging tools, offering an interactive environment for developers to create and test UI components. With its robust platform, teams can build, organize, and design UI components, and even entire screens, without the hurdles of business logic and plumbing.