# 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](/developing-mods/advanced-workshop.md) 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 }}"
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pixiebrix.com/how-to/migrate-from-vue-to-set-input-value-bricks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.