"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5787"],{3880:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>l,metadata:()=>n,assets:()=>d,vueSDKDemo:()=>c,toc:()=>p,contentTitle:()=>a});var n=JSON.parse('{"id":"sdk/vue","title":"Vue SDK","description":"The vue SDK is a thin wrapper around the JavaScript SDK to provide an easy to use vue component, yet retaining the full power, by having access to the SDK methods.","source":"@site/docs/sdk/vue.mdx","sourceDirName":"sdk","slug":"/sdk/vue","permalink":"/docs/sdk/vue","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/vue.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"React SDK","permalink":"/docs/sdk/react"},"next":{"title":"Svelte","permalink":"/docs/sdk/svelte"}}'),o=s("5893"),r=s("65"),i=s("3365");let l={},a="Vue SDK",d={},c={vue:`<script setup>
  import LiveCodes from 'livecodes/vue';
  
  const params = {
    html: '<h1>Hello World!</h1>',
    css: 'h1 {color: blue;}',
    js: 'console.log("Hello, Svelte!")',
    console: 'open',
  };
</script>

<template>
  <LiveCodes :params="params" />
</template>
`},p=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"TypeScript Support",id:"typescript-support",level:3},{value:"Props",id:"props",level:3},{value:"Events",id:"events",level:3},{value:"Styles",id:"styles",level:3},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"vue-sdk",children:"Vue SDK"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["The vue SDK is a thin wrapper around the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript SDK"})," to provide an easy to use vue component, yet retaining the full power, by having access to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["It has a very simple ",(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/sdk/vue.ts",children:"implementation"})," which you can easily modify in case you need."]}),"\n",(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsxs)(t.p,{children:["Please refer to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/#installation",children:"SDK installation"})," section."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:["The vue component is provided as the default export from ",(0,o.jsx)(t.code,{children:"livecodes/vue"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:"<script setup>\n  import LiveCodes from 'livecodes/vue';\n<\/script>\n\n<template>\n  <LiveCodes />\n</template>\n"})}),"\n",(0,o.jsx)(t.h3,{id:"typescript-support",children:"TypeScript Support"}),"\n",(0,o.jsxs)(t.p,{children:["Prop types are exported as ",(0,o.jsx)(t.code,{children:"Props"})," from ",(0,o.jsx)(t.code,{children:"livecodes/vue"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:'<script setup lang="ts">\n  import LiveCodes, { type Props } from \'livecodes/vue\';\n  const options: Props = {\n    // embed options\n  };\n<\/script>\n\n<template>\n  <LiveCodes v-bind="options" />\n</template>\n'})}),"\n",(0,o.jsxs)(t.p,{children:["TypeScript types are ",(0,o.jsx)(t.a,{href:"/docs/api/globals",children:"documented here"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.p,{children:["All ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," are available as props with the corresponding types."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:"<script setup>\n  import LiveCodes from 'livecodes/vue';\n\n  const config = {\n    markup: {\n      language: 'markdown',\n      content: '# Hello World!',\n    },\n  };\n<\/script>\n\n<template>\n  <LiveCodes :config=\"config\" view=\"result\" />\n</template>\n"})}),"\n",(0,o.jsx)(t.p,{children:"In addition, the following prop is also available:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"height"})}),"\n",(0,o.jsxs)(t.p,{children:["Type: ",(0,o.jsx)(t.code,{children:"string"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["Sets the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#height",children:"height of playground container"})," element."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:"<script setup>\n  import LiveCodes from 'livecodes/vue';\n<\/script>\n\n<template>\n  <LiveCodes height=\"500px\" />\n</template>\n"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:'"sdkReady"'})}),"\n",(0,o.jsxs)(t.p,{children:["Type: ",(0,o.jsx)(t.code,{children:"(sdk: Playground) => void"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["When the playground initializes, the event ",(0,o.jsx)(t.code,{children:'"sdkReady"'})," is emitted. The event handler function is provided with an instance of the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript SDK"})," representing the current playground. This allows making use of full capability of the SDK by calling ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:"<script setup lang=\"ts\">\n  import type { Playground } from 'livecodes';\n  import LiveCodes, { type Props } from 'livecodes/vue';\n\n  const options: Props = {\n    config: {\n      markup: {\n        language: 'html',\n        content: '<h1>Hello World!</h1>',\n      },\n    },\n  };\n\n  let playground: Playground | undefined;\n  const onReady = (sdk: Playground) => {\n    playground = sdk;\n  };\n\n  const run = async () => {\n    await playground?.run();\n  };\n<\/script>\n\n<template>\n  <LiveCodes v-bind=\"options\" @sdk-ready=\"onReady\" />\n  <button @click=\"run\">run</button>\n</template>\n"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h3,{id:"styles",children:"Styles"}),"\n",(0,o.jsxs)(t.p,{children:["Styles can be applied to the component ",(0,o.jsx)(t.a,{href:"https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes",children:"as usual"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["By default, a set of ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#default-styles",children:"default styles"})," are applied to the playground container. Styles passed to the component override these default styles."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:"<script setup>\n  import LiveCodes from 'livecodes/vue';\n\n  const style = {\n    margin: 'auto',\n    width: '80%',\n  };\n<\/script>\n\n<template>\n  <LiveCodes :style=\"style\" />\n</template>\n"})}),"\n",(0,o.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n","\n",(0,o.jsx)(i.Z,{params:c,height:"80vh"}),"\n",(0,o.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/#installation",children:"SDK Installation"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JS/TS SDK"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/react",children:"React SDK"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/svelte",children:"Using SDK in Svelte"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/embeds",children:"Embedded Playgrounds"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var n=s("5893"),o=s("4200"),r=s("7294"),i=s("8294");function l(e){let t=(0,r.useRef)(null),[s,o]=(0,r.useState)(e.className||""),[l,a]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[p,h]=(0,r.useState)(),[u,m]=(0,r.useState)(JSON.stringify(e.config||"")),[v,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:l,config:d,...f}=e;if(o(s||""),a(n||{}),c(r),p&&v===JSON.stringify(f)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{p?.setConfig(e)}):d&&p.setConfig(d)}else g(JSON.stringify(f)),p?.destroy(),(0,i.T)(t.current,{config:d,...f}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,r.useEffect)(()=>()=>{p?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:l,"data-height":d})}var a=s("1858"),d=s("3262"),c=s("1705"),p=s("7645"),h=s("8168"),u=s("8228"),m=s("5050");function v(e){let[t,s]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[l,a]=(0,r.useState)(e.react),[v,g]=(0,r.useState)(e.vue),[f,y]=(0,r.useState)(e.svelte),j="3.7rem",[x,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(j),k=(0,r.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(o,"ts")),a(e(l,"jsx")),g(e(v,"html")),y(e(f,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":x,style:{height:x?j:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!x),C()},children:"show code"}),(0,n.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(p.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(p.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:o})}),(0,n.jsx)(p.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:l})}),(0,n.jsx)(p.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:v})}),(0,n.jsx)(p.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:f})})]})})})]})}function g(e){let{className:t,style:s,showCode:r,height:i,...d}=e,{colorMode:c}=(0,o.I)(),p=e=>JSON.stringify(e,null,2),h=`
import { createPlayground } from 'livecodes';

const options = ${p(d)};
createPlayground('#container', options);

`.trimStart(),u=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${p(d)};
createPlayground('#container', options);

`.trimStart(),m=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${p(d)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),g=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${p(d)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,f=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${p(d)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(v,{js:h,ts:u,react:m,vue:g,svelte:f})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,l=n||"headless"===i,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),p=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":o);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,v="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",r=a.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),l?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===p&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===p&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},p))}),i.onload=()=>{e(i)},i.src=c.href,r||a.appendChild(i)}),f=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===p&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),y=()=>m?Promise.reject(v):new Promise(async e=>{f.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},p),await f,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(m)return n(v);await y();let o=P();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===p&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:t},p)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(v);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==p||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let k=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return j("exec",[e,...s])},destroy:()=>f.settled?j("destroy").then(k):m?Promise.reject(v):(k(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:l,lite:a,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let p=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),p.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{p.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=p.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);