{"id":13606989,"url":"https://github.com/litingyes/vite-plugin-vue-preview","last_synced_at":"2025-04-13T20:48:28.939Z","repository":{"id":74891135,"uuid":"603355591","full_name":"litingyes/vite-plugin-vue-preview","owner":"litingyes","description":"a vite plugin for code preview / 一个代码预览插件","archived":false,"fork":false,"pushed_at":"2025-04-01T14:29:41.000Z","size":7864,"stargazers_count":35,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"1.x","last_synced_at":"2025-04-13T20:48:26.754Z","etag":null,"topics":["code-preview","demo","editor","plugin","vite","vitepress","vue"],"latest_commit_sha":null,"homepage":"https://vite-plugin-vue-preview.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/litingyes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-02-18T08:58:55.000Z","updated_at":"2025-04-01T14:28:37.000Z","dependencies_parsed_at":"2023-10-01T16:38:43.956Z","dependency_job_id":"07f6d12b-7633-4ec8-9b09-4f7cf8238371","html_url":"https://github.com/litingyes/vite-plugin-vue-preview","commit_stats":{"total_commits":67,"total_committers":1,"mean_commits":67.0,"dds":0.0,"last_synced_commit":"fcbb0ff8803cad4dec525d34ba34d2a5c21f22ee"},"previous_names":["litingyes/vite-plugin-vue-preview","liting-yes/vite-plugin-vue-preview"],"tags_count":28,"template":false,"template_full_name":"dev-standard/template-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litingyes%2Fvite-plugin-vue-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litingyes%2Fvite-plugin-vue-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litingyes%2Fvite-plugin-vue-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/litingyes%2Fvite-plugin-vue-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/litingyes","download_url":"https://codeload.github.com/litingyes/vite-plugin-vue-preview/tar.gz/refs/heads/1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782280,"owners_count":21160716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-preview","demo","editor","plugin","vite","vitepress","vue"],"created_at":"2024-08-01T19:01:14.506Z","updated_at":"2025-04-13T20:48:28.892Z","avatar_url":"https://github.com/litingyes.png","language":"Vue","funding_links":[],"categories":["Plugins"],"sub_categories":["Vue"],"readme":"\u003ch1 align=\"center\"\u003evite-plugin-vue-preview\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/liting-yes/vite-plugin-vue-preview\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/liting-yes/vite-plugin-vue-preview\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-preview\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vite-plugin-vue-preview\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-preview\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-vue-preview\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-preview\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vite-plugin-vue-preview\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./README.zh-CN.md\"\u003e简体中文\u003c/a\u003e\n\u003c/p\u003e\n\nA 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.\n\n\u003e [!TIP]\n\u003e 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)\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/demo.gif\" /\u003e\n\u003c/p\u003e\n\n## Install\n\n```bash\npnpm add vite-plugin-vue-preview@1\n```\n\n## Features\n\n- Support for Vue/Vitepress applications\n- Support code preview\n- Support online editing\n\n## Props\n\n### VuePreview\n\n```TS\ninterface Props {\n  // Initialization code string\n  code: string\n  // Whether to collapse the code when the component is mounted\n  collapse: boolean\n  // Whether to turn on ssr\n  ssr: boolean\n  // Whether the incoming props string is encoded by encodeURIComponent (necessary mainly in vitepress)\n  encode: boolean\n  // The body style in the iframe element\n  previewBodyStyle: Partial\u003cCSSStyleDeclaration\u003e | string\n  // Styling of the root component in the iframe element\n  previewAppStyle?: Partial\u003cCSSStyleDeclaration\u003e | string\n  // Third-party dependencies (CDN) that can be introduced by the demo component\n  importMap?: Record\u003cstring, string\u003e | string\n}\n```\n\n## CSS Styles\n\n```CSS\n/* VuePreview border-radius */\n--vue-preview-radius\n/* VuePreview border-color */\n--vue-preview-color-border\n/* VuePreview box-shadow */\n--vue-preview-box-shadow\n/* VuePreview color */\n--vue-preview-color-icon\n/* VuePreview hover:color */\n--vue-preview-color-icon-bg-hover\n/* VuePreview background-color of loading model */\n--vue-preview-color-model-bg\n/* VuePreview color of loading icon */\n--vue-preview-color-loading\n```\n\n## Usage\n\n### Vue\n\n\u003e Import the VuePreview component and style\n\n```TS\nimport { createApp } from 'vue'\nimport { VuePreview } from 'vite-plugin-vue-preview'\nimport 'vite-plugin-vue-preview/style.css'\n\nconst app = createApp()\n\napp.component('VuePreview', VuePreview)\n```\n\n### Vitepress\n\n\u003e Import the VuePreview component / style and plugin\n\n```TS\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { VuePreviewPlugin } from 'vite-plugin-vue-preview'\n\n\nexport default defineConfig({\n  plugins: [VuePreviewPlugin()],\n})\n\n// .vitepress/theme/index.ts\nimport DefaultTheme from 'vitepress/theme'\nimport { VuePreview } from 'vite-plugin-vue-preview'\nimport 'vite-plugin-vue-preview/style.css'\n\nexport default {\n  ...DefaultTheme,\n  enhanceApp(ctx) {\n    DefaultTheme.enhanceApp(ctx)\n    ctx.app.component('VuePreview', VuePreview)\n  },\n}\n```\n\nOnce you've set up the above, you're ready to use it in your markdown file:\n\n\u003cpre\u003e\n  \u003ccode\u003e\n\u0026#96;\u0026#96;\u0026#96;vue preview\n\u0026lt;template\u0026gt;\n  \u0026lt;h1\u0026gt;Demo: vite-plugin-vue-preview\u0026lt;/h1\u0026gt;\n\u0026lt;/template\u0026gt;\n\u0026#96;\u0026#96;\u0026#96;\n  \u003c/code\u003e\n\u003c/pre\u003e\n\n## Plugin Configuration\n\nThere 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\n\n```TS\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { vuePreviewPlugin } from 'vite-plugin-vue-preview'\n\nexport default defineConfig({\n  plugins: [vuePreviewPlugin({\n    props: {\n      previewBodyStyle: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n      },\n      previewAppStyle: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexDirection: 'column',\n      },\n      importMap: {\n        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',\n      },\n    },\n  })],\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flitingyes%2Fvite-plugin-vue-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flitingyes%2Fvite-plugin-vue-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flitingyes%2Fvite-plugin-vue-preview/lists"}