Expressions

Configure the opt-in expressions feature in Vueform Builder.

Prerequisites:

@vueform/vueform 1.13.0
@vueform/builder: 1.11.0

To learn more about how expressions work, check out the Vueform expressions documentation.

Enabling Expressions

To enable expressions in the builder, add the following to your builder.config.js:

// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  expressions: {
    enabled: true,
  },
})

If you're using the simple preset, it's recommended to also enable the names option so element names are visible—this helps when referencing them in expressions:

// builder.config.js

import { defineConfig } from '@vueform/builder'
import simple from '@vueform/builder/presets/simple'

export default defineConfig({
  preset: simple,
  names: true,
  expressions: {
    enabled: true,
  },
})

Once enabled, expressions can be used:

as expression values in text-like inputs and hidden fields
in the content of static elements (like headings or paragraphs)
inside conditions

To see it in action, visit the Developer Demo. Drag in a Text input, then check the Data section in the config panel—there you'll find the 'Use expression value' option.

Adding Custom Functions and Constants

You can extend the expression engine with your own functions and constants by adding them to vueform.config.js. Learn more in the Vueform docs.

Once registered, these will automatically show up in the Expression cheat sheet within the config panel.

You can also define helper descriptions for them in builder.config.js. These can either be plain strings or reference a translation tag in the current builderLocale:

// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  expressions: {
    enabled: true,

    /**
     * The helper texts to display for custom `functions` and `consts`
     * registered in `vueform.config.js` under `expression`. They can
     * contain translation tags that will be automatically resolved to
     * the current `builderLocale`.
     */
    helpers: {
      MY_FUNC: {
        description: 'This function is...',
        params: [
          {
            value: 'value1', // the display name of the param
            description: 'This param is...',
          },
          {
            value: '[value2, ...]', // use this convention for optional spread-like params
            optional: true, // whether the param is optional
            description: 'This param is...',
          }
        ]
      },
      MY_CONST: {
        description: 'my_tag_to_my_const_description', // using a `builderLocale` tag
      },
    },
  },
})

Expressions ​

Enabling Expressions ​

Adding Custom Functions and Constants ​

Expressions

Enabling Expressions

Adding Custom Functions and Constants