Skip to content

Extensions to Vue components

FlexDash uses the Vue "options API" for widgets, which means that each widget is written as a Javascript object. FlexDash extends the set of object fields to encode properties of widgets. It also extends the fields that can be specified for props to add help information. For example, here's a Vue component fragment that has FlexDash-specific fields:

export default {
  name: 'Stat',  // Vue field
  help:          // FlexDash field, skipped by Vue, text shown in FD UI and Node-RED UI
        `Display colored numeric or text status value.
The Stat widget displays a colored centered numerical or text value. Optionally a unit string
can be appended and is rendered as a superscript.
`,

  props: {
    unit: { type: String, default: "",            // Vue fields
            tip: "superscript after the value" }, // FlexDash field
...

Component fields

  • help
  • output
  • output_value

Prop fields

  • tip
  • types (FlexDash performs type conversion)
  • prop names (e.g. _color)