Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuedx/preview
Quick prototyping and UI feedback tool built on top Vite
https://github.com/vuedx/preview
storybook vite vue vuejs3
Last synced: 3 months ago
JSON representation
Quick prototyping and UI feedback tool built on top Vite
- Host: GitHub
- URL: https://github.com/vuedx/preview
- Owner: vuedx
- License: mit
- Created: 2020-08-01T06:42:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T02:42:21.000Z (about 1 year ago)
- Last Synced: 2024-06-04T00:39:50.153Z (5 months ago)
- Topics: storybook, vite, vue, vuejs3
- Language: TypeScript
- Homepage:
- Size: 3.03 MB
- Stars: 92
- Watchers: 6
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# VueDX/Preview
**Preview** is a UI feedback tool built on top Vite.
## Features
- Render any component in a sandbox environment
- Responsive previews of a component
- Use `` blocks as unit test fixtures/examples
## Getting Started
### VS Code
- Install [Preview](https://marketplace.visualstudio.com/items?itemName=znck.preview) extension.
- When editor is focused on a `.vue` file, you can
- Run `Preview: Show preview` command
- Click on  button on editor tab.
### Vite
- Install `@vuedx/preview` as dev dependency
```
npm add -D @vuedx/preview
```
- Add plugin to vite config file
```ts
import VuePlugin from '@vitejs/plugin-vue';
import { PreviewPlugin } from '@vuedx/preview';
export default {
plugins: [VuePlugin(), PreviewPlugin()],
};
```
### Standalone
- Run `npx -y @vuedx/preview` in root directory of a Vue project
## Guide
### Defining Previews
Use `` custom block to define previews. e.g.
```vue
const props = defineProps({
type: String,
});
Primary Button
Secondary Button
```
We try to generate previews when no `` blocks are defined. However, the automatic generation is trivial and only works for simpler cases for now.
We are exploring automatic generation using static code analysis, and **active looking for feedback**. You can help us by creating issues when generated preview is not helpful or any suggestions that might improve previews.
### Mocking HTTP Requests
#### Delayed response
Use `$p.http.delayed()` helper to stub a delayed response.
```vue
```
### Importing components in previews
> TODO: document this.
### Using previews for unit tests
> TODO: document this.
## Known Limitations
1. Using `` blocks could create noise and editor tools like "search in all files" would be difficult to use. We want to explore alternative to `` block:
- Using `.preview` file next to `.vue` file using same SFC-like structure
## Support
This package is part of [VueDX project](https://github.com/znck/vue-developer-experience), maintained by [Rahul Kadyan](https://github.com/znck). You can [💖 sponsor him](https://github.com/sponsors/znck) for continued development of this package and other VueDX tools.