# 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](https://docs.pixiebrix.com/developing-mods/advanced-workshop "mention") 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<br>

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 }}"
```

{% hint style="info" %}
Press CMD/Ctrl + F inside the YAML to search for specific bricks.&#x20;
{% endhint %}

**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

```

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

```
rootMode: document
dispatchEvent: true

```

3. **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 }}"
```