Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/litingyes/vite-plugin-vue-preview
a vite plugin for code preview / 一个代码预览插件
https://github.com/litingyes/vite-plugin-vue-preview
code-preview demo editor plugin vite vitepress vue
Last synced: about 2 months ago
JSON representation
a vite plugin for code preview / 一个代码预览插件
- Host: GitHub
- URL: https://github.com/litingyes/vite-plugin-vue-preview
- Owner: litingyes
- License: mit
- Created: 2023-02-18T08:58:55.000Z (over 1 year ago)
- Default Branch: 1.x
- Last Pushed: 2024-05-01T14:21:54.000Z (5 months ago)
- Last Synced: 2024-05-18T17:47:44.701Z (4 months ago)
- Topics: code-preview, demo, editor, plugin, vite, vitepress, vue
- Language: Vue
- Homepage: https://vite-plugin-vue-preview.netlify.app/
- Size: 6.92 MB
- Stars: 35
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - Code preview for Vue SFC in Markdown, supports online editing. (Plugins / Vue)
README
vite-plugin-vue-preview
A Vite plugin made for previewing and editing Vue components in Markdown and, of course, exporting a **VuePreview** component to be used directly in Vue applications.
> [!TIP]
> For most simple code preview scenarios that don't strongly bind to a vue component, it's even more recommended to use the [sandboxrun](https://github.com/liting-yes/sandboxrun.git)
## Demo
## Install
```bash
pnpm add vite-plugin-vue-preview@1
```
## Features
- Support for Vue/Vitepress applications
- Support code preview
- Support online editing
## Props
### VuePreview
```TS
interface Props {
// Initialization code string
code: string
// Whether to collapse the code when the component is mounted
collapse: boolean
// Whether to turn on ssr
ssr: boolean
// Whether the incoming props string is encoded by encodeURIComponent (necessary mainly in vitepress)
encode: boolean
// The body style in the iframe element
previewBodyStyle: Partial | string
// Styling of the root component in the iframe element
previewAppStyle?: Partial | string
// Third-party dependencies (CDN) that can be introduced by the demo component
importMap?: Record | string
}
```
## CSS Styles
```CSS
/* VuePreview border-radius */
--vue-preview-radius
/* VuePreview border-color */
--vue-preview-color-border
/* VuePreview box-shadow */
--vue-preview-box-shadow
/* VuePreview color */
--vue-preview-color-icon
/* VuePreview hover:color */
--vue-preview-color-icon-bg-hover
/* VuePreview background-color of loading model */
--vue-preview-color-model-bg
/* VuePreview color of loading icon */
--vue-preview-color-loading
```
## Usage
### Vue
> Import the VuePreview component and style
```TS
import { createApp } from 'vue'
import { VuePreview } from 'vite-plugin-vue-preview'
import 'vite-plugin-vue-preview/style.css'
const app = createApp()
app.component('VuePreview', VuePreview)
```
### Vitepress
> Import the VuePreview component / style and plugin
```TS
// vite.config.ts
import { defineConfig } from 'vite'
import { VuePreviewPlugin } from 'vite-plugin-vue-preview'
export default defineConfig({
plugins: [VuePreviewPlugin()],
})
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { VuePreview } from 'vite-plugin-vue-preview'
import 'vite-plugin-vue-preview/style.css'
export default {
...DefaultTheme,
enhanceApp(ctx) {
DefaultTheme.enhanceApp(ctx)
ctx.app.component('VuePreview', VuePreview)
},
}
```
Once you've set up the above, you're ready to use it in your markdown file:
```vue preview
<template>
<h1>Demo: vite-plugin-vue-preview</h1>
</template>
```
## Plugin Configuration
There is no elegant way to pass component **Props** in a MarkDown file, so passing in specific component Props is supported in the plugin configuration for global configuration
```TS
// vite.config.ts
import { defineConfig } from 'vite'
import { vuePreviewPlugin } from 'vite-plugin-vue-preview'
export default defineConfig({
plugins: [vuePreviewPlugin({
props: {
previewBodyStyle: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
previewAppStyle: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
importMap: {
'@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
},
},
})],
})
```