Migrate from Vue to Set Input Value Bricks

PixieBrix is not compatible with Vue3, so if you're using the @pixies/vue/set-values brick, you'll need to migrate to the Set Input Value brick @pixiebrix/forms/set.

If your mod was built in the Page Editor, you can make the change there, otherwise you'll need to head to the Advanced: Workshop to find the YAML file for the mod, and make the following changes.

What you need to do

Go through your YAML file and, for every instance of:

@pixiebrix/vue/set-values

Make these changes (detailed walkthrough below):

• Update the brick ID

• Add rootMode: document

• Add dispatchEvent: true

• Restructure the config section to use inputs: with selector and value pairs

No other logic needs to change. The values and selectors you already have remain the same. Only the structure and brick type need to be updated.

Finding your existing Vue brick

In your YAML file, find any brick that looks like this (your current version):

- id: "@pixiebrix/vue/set-values"
  window: opener
  templateEngine: nunjucks
  config:
    component: "#some-selector"
    values:
      field_name: "{{ someValue }}"

Press CMD/Ctrl + F inside the YAML to search for specific bricks.

What you need to change

For each of those bricks, you need to convert it to the Set Input value brick format @pixiebrix/forms/set.

Specifically:

1. Replace the brick ID

Change:

@pixiebrix/vue/set-values

to:

@pixiebrix/forms/set

1. Add the following new properties at the top level of the brick:

rootMode: document
dispatchEvent: true

1. Move the existing component and values fields into a new structure under config.inputs.

Previously: 
owner_name: "{{ output }}"

New:
- selector: "#owner-name"
  value: "{{ output }}"

Example of the conversion

Before (old format):

- id: "@pixiebrix/vue/set-values"
  window: opener
  templateEngine: nunjucks
  config:
    component: "#owner-name"
    values:
      owner_name: "{{ output }}"
      owner_city: "{{ parsedAddress.city }}"

After (new format):

- id: "@pixiebrix/forms/set"
  rootMode: document
  templateEngine: nunjucks
  dispatchEvent: true
  config:
    isRootAware: true
    inputs:
      - selector: "#owner-name"
        value: "{{ output }}"
      - selector: "#owner-city"
        value: "{{ parsedAddress.city }}"