{"id":13536035,"url":"https://github.com/QingWei-Li/vuep","last_synced_at":"2025-04-02T02:32:06.544Z","repository":{"id":38485966,"uuid":"77316374","full_name":"QingWei-Li/vuep","owner":"QingWei-Li","description":"🎡 A component for rendering Vue components with live editor and preview.","archived":false,"fork":false,"pushed_at":"2022-12-06T16:05:18.000Z","size":1099,"stargazers_count":886,"open_issues_count":40,"forks_count":103,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-10-30T21:32:01.924Z","etag":null,"topics":["component","editor","playground","preview","vue","vue-components"],"latest_commit_sha":null,"homepage":"https://cinwell.com/vuep/","language":"JavaScript","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/QingWei-Li.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}},"created_at":"2016-12-25T07:56:55.000Z","updated_at":"2024-09-16T10:28:08.000Z","dependencies_parsed_at":"2023-01-23T16:46:05.423Z","dependency_job_id":null,"html_url":"https://github.com/QingWei-Li/vuep","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvuep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvuep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvuep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvuep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QingWei-Li","download_url":"https://codeload.github.com/QingWei-Li/vuep/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222795273,"owners_count":17038797,"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":["component","editor","playground","preview","vue","vue-components"],"created_at":"2024-08-01T09:00:33.937Z","updated_at":"2024-11-03T01:30:16.436Z","avatar_url":"https://github.com/QingWei-Li.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","vue","UI组件","Components \u0026 Libraries","UI Components","插件","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form","PC端"],"readme":"# Vuep (vue playground)\n\n[![Build Status](https://travis-ci.org/QingWei-Li/vuep.svg?branch=master)](https://travis-ci.org/QingWei-Li/vuep)\n[![Coverage Status](https://coveralls.io/repos/github/QingWei-Li/vuep/badge.svg?branch=master)](https://coveralls.io/github/QingWei-Li/vuep?branch=master)\n[![npm](https://img.shields.io/npm/v/vuep.svg)](https://www.npmjs.com/package/vuep)\n\n\n\u003e 🎡 A component for rendering Vue components with live editor and preview.\n\n\n\n![image](https://cloud.githubusercontent.com/assets/7565692/21482443/093e4970-cbaf-11e6-89f0-eae73fc49741.png)\n\n## Links\n\n- Docs: https://cinwell.com/vuep/\n- An online playgound: https://vuep.netlify.com\n\n\n\n## Installation\n\n### Yarn\n```bash\nyarn add vuep codemirror\n# npm i vuep codemirror -S\n```\n\n### HTML tag\n\n```html\n\u003c!-- Import theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"//unpkg.com/vuep/dist/vuep.css\"\u003e\n\n\u003c!-- depend vue --\u003e\n\u003cscript src=\"//unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"//unpkg.com/vuep\"\u003e\u003c/script\u003e\n```\n\n## Quick start\n\n**Need the full (compiler-included) build of Vue**\n\nwebpack config\n```javascript\n{\n  alias: {\n    'vue$': 'vue/dist/vue.common'\n  }\n}\n```\n\n```javascript\nimport Vue from 'vue'\nimport Vuep from 'vuep'\nimport 'vuep/dist/vuep.css'\n\nVue.use(Vuep /*, { codemirror options } */)\n// or Vue.component('Vuep', Vuep)\n\nnew Vue({\n  el: '#app',\n\n  created: function () {\n    this.code = `\n      \u003ctemplate\u003e\n        \u003cdiv\u003eHello, {{ name }}!\u003c/div\u003e\n      \u003c/template\u003e\n\n      \u003cscript\u003e\n        module.exports = {\n          data: function () {\n            return { name: 'Vue' }\n          }\n        }\n      \u003c/script\u003e\n    `\n  }\n})\n```\n\n\n### Usage A\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cvuep :template=\"code\"\u003e\u003c/vuep\u003e\n\u003c/div\u003e\n```\n\n\n### Usage B\nyou can write in HTML file or even a markdown file.\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cvuep template=\"#example\"\u003e\u003c/vuep\u003e\n\u003c/div\u003e\n\n\u003cscript v-pre type=\"text/x-template\" id=\"example\"\u003e\n  \u003ctemplate\u003e\n    \u003cdiv\u003eHello, {{ name }}!\u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    module.exports = {\n      data: function () {\n        return { name: 'Vue' }\n      }\n    }\n  \u003c/script\u003e\n\u003c/script\u003e\n```\n\n\n### Scope\n\nYou can customize scope by passing an object to the scope property. \n\nThis object can contain component available in main scope to include them into Vuep.\n\n- **features.js**: Component to showcase into Vuep\n```javascript\nexport default {\n  props: {\n    features: Array\n  },\n  template: `\u003cdiv class=\"features\"\u003e\n\u003ch3\u003eFeatures\u003c/h3\u003e\n\u003cul\u003e\n  \u003cli v-for=\"feature in features\"\u003e{{ feature }}\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e`\n}\n```\n\n- **app.js**: Application that needs to showcase Features component through Vuep\n```javascript\nimport Vue from 'vue'\n\nimport Features from 'features' // Import component\n\nnew Vue({\n  el: '#app',\n  data: function () {\n    return {\n      scope: { Features }, // Set the scope of vuep\n      value: `\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cfeatures :features=\"features\"\u003e\u003c/features\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    components: {\n      Features // This variable is available through scope and can be used to register component\n    },\n    data () {\n      return {\n        features: [\n          'Vue Single File Component support',\n          'Scoped style',\n          'UMD and CommonJS build',\n          'Define JavaScript scope'\n        ]\n      }\n    }\n  }\u003c\\/script\u003e`\n      }\n    }\n  })\n```\n\n- **app template**: \n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cvuep :value=\"value\" :scope=\"scope\"\u003e\u003c/vuep\u003e\n\u003c/div\u003e\n```\n\n## Inspired\n\n- https://facebook.github.io/react/\n- https://github.com/FormidableLabs/component-playground\n\n## Contributing\n\n- Fork it!\n- Create your feature branch: `git checkout -b my-new-feature`\n- Commit your changes: `git commit -am 'Add some feature'`\n- Push to the branch: `git push origin my-new-feature`\n- Submit a pull request :D\n\n\n## Development\n\n```shell\nyarn \u0026\u0026 yarn dev\n# npm i \u0026\u0026 npm run dev\nopen test.html\n```\n\n## LICENSE\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQingWei-Li%2Fvuep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FQingWei-Li%2Fvuep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQingWei-Li%2Fvuep/lists"}