How to use vue-inbrowser-compiler - 7 common examples

renderComponent(code) {
      let data = {};
      let style;
      try {
        const renderedComponent = compile(
          code,
          this.jsx
            ? { jsx: "__pragma__(h)", objectAssign: "__concatenate__" }
            : {}
        );
        style = renderedComponent.style;
        if (renderedComponent.script) {
          // if the compiled code contains a script it might be "just" a script
          // if so, change scheme used by editor
          this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "js");

          // compile and execute the script
          // it can be:
          // - a script setting up variables => we set up the data property of renderedComponent
          // - a `new Vue()` script that will return a full config object
          const script = renderedComponent.script;

const getScript = code => {
      // script is at the beginning of a line after a return
      // In case we are loading a vue component as an example, extract script tag
      if (isCodeVueSfc(code)) {
        const parts = parseComponent(code);
        return parts && parts.script ? parts.script.content : "";
      }
      //else it could be the weird almost jsx of vue-styleguidist
      return code.split(/\n[\t ]*

renderComponent(code) {
      let data = {};
      let style;
      try {
        const renderedComponent = compile(
          code,
          this.jsx
            ? { jsx: "__pragma__(h)", objectAssign: "__concatenate__" }
            : {}
        );
        style = renderedComponent.style;
        if (renderedComponent.script) {
          // if the compiled code contains a script it might be "just" a script
          // if so, change scheme used by editor
          this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "js");

          // compile and execute the script
          // it can be:
          // - a script setting up variables => we set up the data property of renderedComponent
          // - a `new Vue()` script that will return a full config object
          const script = renderedComponent.script;
          data =
            evalInContext(
              script,
              filepath => requireAtRuntime(this.requires, filepath),
              adaptCreateElement,
              concatenate
            ) || {};
        }
        if (renderedComponent.template) {
          // if this is a pure template or if we are in hybrid vsg mode,

executeCode() {
		this.setState({
			error: null
		})

		const { code, vuex, component, renderRootJsx } = this.props
		if (!code) {
			return
		}

		let style
		let previewComponent = {}

		try {
			const example = compile(code, {
				...this.context.config.compilerConfig,
				...(this.context.config.jsxInExamples
					? { jsx: '__pragma__(h)', objectAssign: 'concatenate' }
					: {})
			})
			style = example.style
			if (example.script) {
				// compile and execute the script
				// it can be:
				// - a script setting up variables => we set up the data function of previewComponent
				// - a `new Vue()` script that will return a full config object
				previewComponent = this.props.evalInContext(example.script)() || {}
			}
			if (example.template) {
				// if this is a pure template or if we are in hybrid vsg mode,
				// we need to set the template up.

[
							b.identifier('null'),
							b.callExpression(
								b.memberExpression(b.identifier('requireInRuntime'), b.identifier('bind')),
								[b.identifier('null'), importPath ? b.literal(importPath) : b.identifier('null')]
							)
						]
					)
			}
			if (config.codeSplit) {
				if (process.env.NODE_ENV !== 'production') {
					// if we are not in prod, we want to avoid running examples through
					// buble all at the same time. We then tell it to calsculate on the fly
					example.compiled = false
				} else {
					const compiledExample = compile(example.content, {
						...config.compilerConfig,
						...(config.jsxInExamples ? { jsx: '__pragma__(h)', objectAssign: 'concatenate' } : {})
					})
					example.compiled = {
						script: compiledExample.script,
						template: compiledExample.template,
						style: compiledExample.style
					}
				}
			}
		}
		return example
	})

render() {
		return (
			
		)
	}
}

if (renderedComponent.template) {
          // if this is a pure template or if we are in hybrid vsg mode,
          // we need to set the template up.
          data.template = `<div>${renderedComponent.template}</div>`;
        }
      } catch (e) {
        this.handleError(e);
        return;
      }

      data.components = this.components;
      if (style) {
        // To add the scope id attribute to each item in the html
        // this way when we add the scoped style sheet it will be aplied
        data._scopeId = `data-${this.scope}`;
        addScopedStyle(style, this.scope);
      }

      if (data.template || data.render) {
        this.previewedComponent = data;
      } else {
        this.handleError({
          message:
            "[Vue Live] no template or render function specified, you might have an issue in your example"
        });
      }
    }
  }