Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vue-styleguidist/vue-live below:

vue-styleguidist/vue-live: A component to demo components, inspired by react-live

A lightweight playground for live editing VueJs code in the browser

Install the dependency

npm install --save vue-live

The simplest way to render components is as a VueJs template:

<template>
  <VueLive
    :code="`<date-picker />`"
    :components="{ DatePicker }"
    @error="(e) => handleError(e)"
  />
</template>

<script>
import { VueLive } from "vue-live";
// import the css separately for easier SSR
import "vue-live/lib/vue-live.esm.css";
import DatePicker from "vuejs-datepicker";

export default {
  components: { VueLive },
  data() {
    return {
      // make DatePicker available in template
      DatePicker,
    };
  },
};
</script>

Check out the demo for alternative syntaxes to write your showcases.

The default version at @latest is for vue 3 and up.

To install the version for vue 2, use the following:

npm install --save vue-live@1

When 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.

<template>
  <VueLive
    code="<h1>make this example {{ fail }}</h1>"
    @error="(e) => log('Error on first example', e)"
  />
</template>

When 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.

<template>
  <VueLive :code="code" @success="error = undefined" />
</template>

Type String

Specifies the initial code to be evaluated

<template>
  <VueLive code="<button>test</button>" />
</template>

Type vue component

Layout to be used for displaying the

Example

<template>
  <VueLive :layout="layout" />
</template>
<script>
import layout from "./Layout.vue";

export default {
  data() {
    return { layout };
  },
};
</script>

layout.vue

<template>
  <div class="my-vuelive">
    <div class="my-vuelive-editor">
      <slot name="editor"></slot>
    </div>
    <div class="my-vuelive-preview">
      <slot name="preview"></slot>
    </div>
  </div>
</template>
<style>
.my-vuelive {
  border: 1px solid #ccc;
  border-radius: 10px;
}

.my-vuelive-editor {
  margin: 8px;
}

.my-vuelive-preview {
  margin: 8px;
}
</style>

Type Object:

• key: registration name
• value: VueJs component object

Register some components to be used in the vue-live instance.

Example

<template>
  <VueLive :components="registeredComponents" code="<DatePicker />" />
</template>
<script>
import DatePicker from "./DatePicker.vue";

export default {
  data() {
    return {
      registeredComponents: {
        DatePicker,
      },
    };
  },
};
</script>

Type Object:

• key: registration name
• value: VueJs directive object

You can use this prop in the same fashion as components above.

Type Object:

• key: query in the require/import statement
• value: value returned by an es5 reauire statement

To 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.

Example

<template>
  <VueLive :requires="preRequiredObjects" :code="code" />
</template>
<script>
import DatePicker from "./DatePicker.vue";

export default {
  data() {
    return {
      // lodash can be pre-packaged by the bundler
      // so it can be required at runtime
      preRequiredObjects: {
        lodash: require("lodash"),
      },
      code: `
import _ from 'lodash'

const val = _.each({1,2,3}, (i, v) => {
  return \`\${i} value \${v}\`
})

<li v-for="v in val">
  v : {{v}}
</li>
      `,
    };
  },
};
</script>

Type Boolean

JSX 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.

Example

<template>
  <vue-live :code="code" jsx />
</template>
<script>
export default {
  data() {
    return {
      code: `
const args = {
  type: "button",
  value: "update me"
};

export default {
  render() {
    return <input {...args} />;
  }
};      
      `,
    };
  },
};
</script>

Type Number

Time between a change in the code and its effect in the preview.

Note If a change happens before the prview has changed, the timer is reset.

Type Object

Props passed directly to vue-prism-editor as a spread

Type Object

Data object that wil be merged with the output data of the preview.

Example

```vue
<template>
  <VueLive
    :components="registeredComponents"
    :data-scope="dataScope"
    code="<DatePicker :value='today' />{{ today }}"
  />
</template>
<script>
import DatePicker from "./DatePicker.vue";

export default {
  data() {
    return {
      registeredComponents: {
        DatePicker,
      },
      // Without this variable declaration,
      // today will not have a value when entering the
      // particularly useful when examples or only a template
      dataScope: {
        today: new Date(),
      },
    };
  },
};
</script>

Type Boolean

Makes sure that every variable in the template actually exists when the user starts editing.

Throws an error in te preview field when the variable dont exist.

Type Boolean default: true

Shows a red indicator when the parser errors with the code given.

npm run test:unit
npm run test:e2e

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4