{"id":20168998,"url":"https://github.com/vue-styleguidist/vue-live","last_synced_at":"2025-05-15T06:06:18.582Z","repository":{"id":34847452,"uuid":"183832288","full_name":"vue-styleguidist/vue-live","owner":"vue-styleguidist","description":"A component to demo components, inspired by react-live","archived":false,"fork":false,"pushed_at":"2025-03-26T06:09:28.000Z","size":3880,"stargazers_count":263,"open_issues_count":13,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T11:12:52.093Z","etag":null,"topics":["demo","documentation","live","preview","react-live","vuejs"],"latest_commit_sha":null,"homepage":"http://vue-live.surge.sh/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-styleguidist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-04-27T23:53:01.000Z","updated_at":"2025-04-09T18:49:09.000Z","dependencies_parsed_at":"2024-11-14T01:11:06.649Z","dependency_job_id":"aed877f1-9909-4d01-928d-720c3c0d1c04","html_url":"https://github.com/vue-styleguidist/vue-live","commit_stats":{"total_commits":247,"total_committers":15,"mean_commits":"16.466666666666665","dds":0.5303643724696356,"last_synced_commit":"98c15d44ca689a574cfb85701b58cc19f506532b"},"previous_names":[],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styleguidist%2Fvue-live","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styleguidist%2Fvue-live/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styleguidist%2Fvue-live/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styleguidist%2Fvue-live/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-styleguidist","download_url":"https://codeload.github.com/vue-styleguidist/vue-live/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283339,"owners_count":22045140,"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":["demo","documentation","live","preview","react-live","vuejs"],"created_at":"2024-11-14T01:11:02.818Z","updated_at":"2025-05-15T06:06:13.557Z","avatar_url":"https://github.com/vue-styleguidist.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","TypeScript","Utilities [🔝](#readme)"],"sub_categories":["Utilities"],"readme":"# vue-live\n\nA lightweight playground for live editing VueJs code in the browser\n\n[![Build Status](https://travis-ci.com/vue-styleguidist/vue-live.svg?branch=master)](https://app.travis-ci.com/github/vue-styleguidist/vue-live)\n[![NPM Version](https://img.shields.io/npm/v/vue-live.svg)](https://www.npmjs.com/package/vue-live) [![NPM Downloads](https://img.shields.io/npm/dm/vue-live.svg)](https://www.npmjs.com/package/vue-live)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n---\n\n## Usage\n\nInstall the dependency\n\n```\nnpm install --save vue-live\n```\n\nThe simplest way to render components is as a VueJs template:\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive\n    :code=\"`\u003cdate-picker /\u003e`\"\n    :components=\"{ DatePicker }\"\n    @error=\"(e) =\u003e handleError(e)\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueLive } from \"vue-live\";\n// import the css separately for easier SSR\nimport \"vue-live/lib/vue-live.esm.css\";\nimport DatePicker from \"vuejs-datepicker\";\n\nexport default {\n  components: { VueLive },\n  data() {\n    return {\n      // make DatePicker available in template\n      DatePicker,\n    };\n  },\n};\n\u003c/script\u003e\n```\n\nCheck out the [demo](http://vue-live.surge.sh) for alternative syntaxes to write your showcases.\n\n### Install for Vue 2.X\n\nThe default version at `@latest` is for vue 3 and up.\n\nTo install the version for vue 2, use the following:\n\n```\nnpm install --save vue-live@1\n```\n\n## Events\n\n### `@error`\n\nWhen the template compilation or the script evaluation fail, errors are returned in this box. Hooking on these errors will not prevent them from displaying on the preview panel but will allow you to provide more info to your users about how to fix what they see.\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive\n    code=\"\u003ch1\u003emake this example {{ fail }}\u003c/h1\u003e\"\n    @error=\"(e) =\u003e log('Error on first example', e)\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### `@success`\n\nWhen the template compilation and the script evaluation succeed, the `@success` event is emitted. If you provided extra info to your user about previous errors, you can use this event to clear the error message.\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive :code=\"code\" @success=\"error = undefined\" /\u003e\n\u003c/template\u003e\n```\n\n## Props\n\n### `code`\n\n**Type** String\n\nSpecifies the initial code to be evaluated\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive code=\"\u003cbutton\u003etest\u003c/button\u003e\" /\u003e\n\u003c/template\u003e\n```\n\n### `layout`\n\n**Type** vue component\n\nLayout to be used for displaying the\n\nExample\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive :layout=\"layout\" /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport layout from \"./Layout.vue\";\n\nexport default {\n  data() {\n    return { layout };\n  },\n};\n\u003c/script\u003e\n```\n\n`layout.vue`\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"my-vuelive\"\u003e\n    \u003cdiv class=\"my-vuelive-editor\"\u003e\n      \u003cslot name=\"editor\"\u003e\u003c/slot\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"my-vuelive-preview\"\u003e\n      \u003cslot name=\"preview\"\u003e\u003c/slot\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cstyle\u003e\n.my-vuelive {\n  border: 1px solid #ccc;\n  border-radius: 10px;\n}\n\n.my-vuelive-editor {\n  margin: 8px;\n}\n\n.my-vuelive-preview {\n  margin: 8px;\n}\n\u003c/style\u003e\n```\n\n### `components`\n\n**Type** Object:\n\n- key: registration name\n- value: VueJs component object\n\nRegister some components to be used in the vue-live instance.\n\nExample\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive :components=\"registeredComponents\" code=\"\u003cDatePicker /\u003e\" /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport DatePicker from \"./DatePicker.vue\";\n\nexport default {\n  data() {\n    return {\n      registeredComponents: {\n        DatePicker,\n      },\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n### `directives`\n\n**Type** Object:\n\n- key: registration name\n- value: VueJs directive object\n\nYou can use this prop in the same fashion as `components` above.\n\n### `requires`\n\n**Type** Object:\n\n- key: query in the require/import statement\n- value: value returned by an es5 reauire statement\n\nTo allow require statements on a code evaluated in the browser, we have to pre-package all dependencies. This allows bundlers to know in advance what external dependencies will be allowed in the code.\n\nExample\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive :requires=\"preRequiredObjects\" :code=\"code\" /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport DatePicker from \"./DatePicker.vue\";\n\nexport default {\n  data() {\n    return {\n      // lodash can be pre-packaged by the bundler\n      // so it can be required at runtime\n      preRequiredObjects: {\n        lodash: require(\"lodash\"),\n      },\n      code: `\nimport _ from 'lodash'\n\nconst val = _.each({1,2,3}, (i, v) =\u003e {\n  return \\`\\${i} value \\${v}\\`\n})\n\n\u003cli v-for=\"v in val\"\u003e\n  v : {{v}}\n\u003c/li\u003e\n      `,\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n### `jsx`\n\n**Type** Boolean\n\nJSX does not always play nice with vue templates. If you want to expose vue templates, leave this option off. If you plan on using render functions with JSX, you will have to turn this option on.\n\nExample\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-live :code=\"code\" jsx /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      code: `\nconst args = {\n  type: \"button\",\n  value: \"update me\"\n};\n\nexport default {\n  render() {\n    return \u003cinput {...args} /\u003e;\n  }\n};      \n      `,\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n### `delay`\n\n**Type** Number\n\nTime between a change in the code and its effect in the preview.\n\n\u003e **Note** If a change happens before the prview has changed, the timer is reset.\n\n### `editorProps`\n\n**Type** Object\n\nProps passed directly to [vue-prism-editor](https://github.com/koca/vue-prism-editor) as a spread\n\n### `dataScope`\n\n**Type** Object\n\nData object that wil be merged with the output data of the preview.\n\nExample\n\n````vue\n```vue\n\u003ctemplate\u003e\n  \u003cVueLive\n    :components=\"registeredComponents\"\n    :data-scope=\"dataScope\"\n    code=\"\u003cDatePicker :value='today' /\u003e{{ today }}\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport DatePicker from \"./DatePicker.vue\";\n\nexport default {\n  data() {\n    return {\n      registeredComponents: {\n        DatePicker,\n      },\n      // Without this variable declaration,\n      // today will not have a value when entering the\n      // particularly useful when examples or only a template\n      dataScope: {\n        today: new Date(),\n      },\n    };\n  },\n};\n\u003c/script\u003e\n````\n\n### `checkVariableAvailability`\n\n**Type** Boolean\n\nMakes sure that every variable in the template actually exists when the user starts editing.\n\nThrows an error in te preview field when the variable dont exist.\n\n### `squiggles`\n\n**Type** Boolean default: `true`\n\nShows a red indicator when the parser errors with the code given.\n\n## How to contribute\n\n```sh\nnpm ci\n```\n\n### Compiles and hot-reloads for development\n\n```sh\nnpm run start\n```\n\n### Compiles and minifies library for production using rollup\n\n```sh\nnpm run build\n```\n\n### Run unit and e2e tests\n\n```sh\nnpm run test:unit\nnpm run test:e2e\n```\n\n### Lints and fixes files\n\n```sh\nnpm run lint\n```\n\n\u003c!-- now works with vue 3.3.X --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-styleguidist%2Fvue-live","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-styleguidist%2Fvue-live","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-styleguidist%2Fvue-live/lists"}