Migrating from Vue

Vue and WildflowerJS both use reactive state, direct mutation, declarative templates, and a component-based architecture. They differ in syntax and tooling. Vue uses custom directives and Single-File Components with an optional build step, and WildflowerJS uses standard data-* attributes and plain HTML with no build step at any point.

Who this guide is for: Vue 3 developers (Composition API or Options API) who want to understand WildflowerJS equivalents for every Vue concept. If you are coming from Vue 2, the same principles apply; most differences are between Vue's custom syntax and WildflowerJS's data-attribute approach.

Mental Model Shift

How the two differ in approach, before the syntax:

Concept	Vue 3	WildflowerJS
File format	Single-File Components (`.vue`) with `<template>`, `<script>`, `<style>` sections	Plain HTML + separate JS file, no custom file format to learn
Template syntax	Custom directives: `v-if`, `v-for`, `@click`, `{{ }}`	Standard `data-*` attributes, valid HTML that passes any validator
Reactivity access	`ref().value` unwrapping, `reactive()` proxies	Direct property access: `this.count`, no `.value` anywhere
API surface	Composition API and Options API (two patterns to choose from)	Single component definition pattern, one way to define everything
Build step	Recommended (Vite, Vue CLI); SFCs require compilation	No build step ever needed, works directly from a CDN or static file
Rendering	Virtual DOM with template compilation to render functions	Direct DOM manipulation with fine-grained binding resolution at runtime

What transfers: if you know Vue, you already understand reactive state, computed properties, and declarative templates. WildflowerJS uses the same concepts with less ceremony, and there is no .value, build tool, or custom syntax to learn.

Directive Mapping

This table maps every common Vue directive to its WildflowerJS equivalent:

Vue	WildflowerJS	Notes
`{{ count }}`	`data-bind="count"`	Text interpolation, place on the element that should display the value
`v-html="content"`	`data-bind-html="content"`	Raw HTML binding
`@click="method"` / `v-on:click="method"`	`data-action="method"`	Click is the default event type
`@input="method"`	`data-action="input:method"`	Prefix non-click events with `eventName:`
`v-model="prop"`	`data-model="prop"`	Two-way binding for form inputs
`v-if="condition"`	`data-render="condition"`	Adds/removes element from DOM
`v-show="condition"`	`data-show="condition"`	Toggles CSS `display` property
`v-for="item in items"`	`data-list="items"`	List container with a `<template>` child for each item
`:key="item.id"`	`data-key="id"`	Placed on the list container, not the item
`:class="expr"`	`data-bind-class="expr"`	Dynamic class binding
`:style="expr"`	`data-bind-style="expr"`	Dynamic style binding
`:href="url"` / `:src="img"`	`data-bind-attr="{ href: url }"` / `data-bind-attr="{ src: img }"`	Dynamic attribute binding, object expression
`v-slot` / `#default`	`data-slot="name"` + `data-slot-container="name"`	Named slot system
`computed: {}` / `computed()`	`computed: {}`	Same concept: cached derived values
`watch()`	`onStoreUpdate()`	For reacting to store changes; component state changes trigger bindings automatically

Side-by-Side: Todo List

Here is the same Todo application written in both frameworks:

Vue 3 (Composition API)

<script setup>
import { ref, computed } from 'vue'

const todos = ref([])
const newTodo = ref('')
const remaining = computed(() =>
    todos.value.filter(t => !t.done).length
)

function addTodo() {
    if (!newTodo.value.trim()) return
    todos.value.push({
        id: Date.now(),
        text: newTodo.value,
        done: false
    })
    newTodo.value = ''
}

function removeTodo(index) {
    todos.value.splice(index, 1)
}
</script>

<template>
    <div>
        <h3>Todos ({{ remaining }} remaining)</h3>
        <input v-model="newTodo"
               @keydown.enter="addTodo" />
        <button @click="addTodo">Add</button>
        <ul>
            <li v-for="(todo, index) in todos"
                :key="todo.id">
                <input type="checkbox"
                       v-model="todo.done" />
                <span :style="{
                    textDecoration: todo.done
                        ? 'line-through' : 'none'
                }">
                    {{ todo.text }}
                </span>
                <button @click="removeTodo(index)">
                    &times;
                </button>
            </li>
        </ul>
    </div>
</template>

WildflowerJS

<div data-component="todo-app">
    <h3>Todos (<span data-bind="remaining">0</span>
        remaining)</h3>
    <input data-model="newTodo"
           data-action="keydown.enter:addTodo" />
    <button data-action="addTodo">Add</button>
    <ul data-list="todos" data-key="id">
        <template>
            <li>
                <input type="checkbox"
                       data-model="done" />
                <span data-bind="text"
                      data-bind-style="{ textDecoration: done ? 'line-through' : 'none' }"></span>
                <button data-action="removeTodo">
                    &times;
                </button>
            </li>
        </template>
    </ul>
</div>

wildflower.component('todo-app', {
    state: { todos: [], newTodo: '' },

    computed: {
        remaining() {
            return this.todos.filter(
                t => !t.done
            ).length;
        }
    },

    addTodo() {
        if (!this.newTodo.trim()) return;
        this.todos.push({
            id: Date.now(),
            text: this.newTodo,
            done: false
        });
        this.newTodo = '';
    },

    removeTodo(event, element, details) {
        this.todos.splice(details.index, 1);
    }
});

Notice the differences: there is no .value unwrapping, no import statements, and no <script setup> or <template> sections, because the HTML is the template. The action handler receives details.index automatically, so the index does not have to be passed through the template.

Pattern-by-Pattern Migration

Component Definition

Vue uses Single-File Components or <script setup>. WildflowerJS uses a data-component attribute in HTML and a plain JavaScript object.

Vue 3 (SFC / script setup)

<!-- UserCard.vue -->
<script setup>
import { ref } from 'vue'

const name = ref('Alice')
const email = ref('alice@example.com')
</script>

<template>
    <div class="user-card">
        <h3>{{ name }}</h3>
        <p>{{ email }}</p>
    </div>
</template>

WildflowerJS

<!-- In your HTML file -->
<div data-component="user-card">
    <h3 data-bind="name"></h3>
    <p data-bind="email"></p>
</div>

// user-card.js (or inline script)
wildflower.component('user-card', {
    state: {
        name: 'Alice',
        email: 'alice@example.com'
    }
});

Reactive State

Vue requires ref() or reactive() wrappers and .value access in script. WildflowerJS state is declared in a plain object and accessed directly.

Vue 3

import { ref, reactive } from 'vue'

// Primitives use ref()
const count = ref(0)
count.value++              // .value required

// Objects use reactive()
const user = reactive({
    name: 'Alice',
    age: 30
})
user.name = 'Bob'          // Direct mutation OK

// Arrays
const items = ref([])
items.value.push({ id: 1 })  // .value required

WildflowerJS

wildflower.component('example', {
    state: {
        count: 0,
        user: { name: 'Alice', age: 30 },
        items: []
    },

    update() {
        this.count++;             // Direct access
        this.user.name = 'Bob';  // Direct mutation
        this.items.push({ id: 1 }); // No wrappers
    }
});

No wrappers: there is no ref(), reactive(), or .value. Everything is a plain property on this.

Computed Properties

Computed properties work almost identically in both frameworks. The syntax differs, but the concept (cached values that update when dependencies change) is the same.

Vue 3 (Composition API)

import { ref, computed } from 'vue'

const price = ref(10)
const quantity = ref(3)

const total = computed(() =>
    price.value * quantity.value
)

// Access: total.value (in script)
// Access: {{ total }} (in template)

WildflowerJS

wildflower.component('order', {
    state: { price: 10, quantity: 3 },

    computed: {
        total() {
            return this.price * this.quantity;
        }
    },

    // Access: this.total (in JS)
    // Access: data-bind="total" (in HTML)
});

Event Handling

Vue uses @event shorthand or v-on:event. WildflowerJS uses data-action with an optional event prefix.

Vue 3

<!-- Click (default) -->
<button @click="save">Save</button>

<!-- Other events -->
<input @input="onInput" />
<input @keydown.enter="submit" />
<div @mouseenter="highlight"></div>

<!-- Inline expressions -->
<button @click="count++">+1</button>

WildflowerJS

<!-- Click (default) -->
<button data-action="save">Save</button>

<!-- Other events -->
<input data-action="input:onInput" />
<input data-action="keydown.enter:submit" />
<div data-action="mouseenter:highlight"></div>

<!-- No inline expressions
     Logic lives in methods -->
<button data-action="increment">+1</button>

Conditional Rendering

Vue has v-if, v-else-if, v-else, and v-show. WildflowerJS has data-render (DOM insertion/removal) and data-show (CSS display toggle).

Vue 3

<!-- DOM insertion/removal -->
<div v-if="isLoggedIn">Welcome!</div>
<div v-else>Please log in.</div>

<!-- CSS display toggle -->
<div v-show="isVisible">Content</div>

<!-- Chained conditions -->
<div v-if="status === 'loading'">Loading...</div>
<div v-else-if="status === 'error'">Error!</div>
<div v-else>Ready</div>

WildflowerJS

<!-- DOM insertion/removal -->
<div data-render="isLoggedIn">Welcome!</div>
<div data-render="!isLoggedIn">Please log in.</div>

<!-- CSS display toggle -->
<div data-show="isVisible">Content</div>

<!-- Chained conditions: inline expressions -->
<div data-show="status === 'loading'">Loading...</div>
<div data-show="status === 'error'">Error!</div>
<div data-show="status !== 'loading' && status !== 'error'">Ready</div>

List Rendering

Vue uses v-for with :key on each item. WildflowerJS uses data-list with data-key on the container and a <template> child.

Vue 3

<ul>
    <li v-for="user in users" :key="user.id">
        <strong>{{ user.name }}</strong>
        <span>{{ user.email }}</span>
        <button @click="removeUser(user.id)">
            Delete
        </button>
    </li>
</ul>

WildflowerJS

<ul data-list="users" data-key="id">
    <template>
        <li>
            <strong data-bind="name"></strong>
            <span data-bind="email"></span>
            <button data-action="removeUser">
                Delete
            </button>
        </li>
    </template>
</ul>

Key difference: In WildflowerJS, bindings inside a list template (data-bind="name") automatically resolve against each list item. No user. prefix needed. The action handler receives the item and index via the details parameter.

Forms

Both frameworks support two-way form binding. The syntax is nearly identical.

Vue 3

<input v-model="username" />
<textarea v-model="bio"></textarea>
<select v-model="role">
    <option value="admin">Admin</option>
    <option value="user">User</option>
</select>
<input type="checkbox" v-model="agree" />

WildflowerJS

<input data-model="username" />
<textarea data-model="bio"></textarea>
<select data-model="role">
    <option value="admin">Admin</option>
    <option value="user">User</option>
</select>
<input type="checkbox" data-model="agree" />

Stores (Pinia → wildflower.store)

Pinia separates state, getters, and actions into distinct blocks. WildflowerJS uses the same unified structure as components: state, computed, and top-level methods.

Vue (Pinia)

import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
    state: () => ({
        items: [],
        discount: 0
    }),

    getters: {
        total: (state) =>
            state.items.reduce(
                (sum, i) => sum + i.price, 0
            ),
        discountedTotal() {
            return this.total * (1 - this.discount)
        }
    },

    actions: {
        addItem(item) {
            this.items.push(item)
        },
        clear() {
            this.items = []
        }
    }
})

// In a component:
import { useCartStore } from '@/stores/cart'
const cart = useCartStore()
cart.addItem({ name: 'Widget', price: 10 })

WildflowerJS

wildflower.store('cart', {
    state: {
        items: [],
        discount: 0
    },

    computed: {
        total() {
            return this.items.reduce(
                (sum, i) => sum + i.price, 0
            );
        },
        discountedTotal() {
            return this.total * (1 - this.discount);
        }
    },

    addItem(item) {
        this.items.push(item);
    },
    clear() {
        this.items = [];
    }
});

// In a component:
wildflower.component('checkout', {
    subscribe: { cart: ['items'] },

    buyNow() {
        const cart = this.stores.cart;
        console.log('Total:', cart.total);
    }
});

No separate blocks: WildflowerJS stores use computed: {} instead of Pinia's getters, and methods go at the top level instead of inside an actions block. The same pattern you use for components works for stores.

Slots

Vue uses <slot> in child templates and v-slot / #name in parents. WildflowerJS uses data-slot-container (child) and data-slot (parent).

Vue 3

<!-- Card.vue (child) -->
<template>
    <div class="card">
        <div class="card-header">
            <slot name="header">Default Header</slot>
        </div>
        <div class="card-body">
            <slot>Default body content</slot>
        </div>
    </div>
</template>

<!-- Parent usage -->
<Card>
    <template #header>My Title</template>
    <p>Card body goes here.</p>
</Card>

WildflowerJS

<!-- In your HTML -->
<div data-component="card">
    <!-- Component layout -->
    <div class="card">
        <div class="card-header"
             data-slot-container="header"></div>
        <div class="card-body"
             data-slot-container="body"></div>
    </div>

    <!-- Parent-provided content -->
    <div data-slot="header">My Title</div>
    <div data-slot="body">
        <p>Card body goes here.</p>
    </div>
</div>

Props

Vue passes props with :prop="value" bindings. WildflowerJS uses data-prop-* attributes.

Vue 3

<!-- Parent -->
<UserAvatar :name="user.name" :size="48" />

<!-- UserAvatar.vue -->
<script setup>
const props = defineProps({
    name: String,
    size: { type: Number, default: 32 }
})
</script>
<template>
    <img :width="size" :alt="name" />
</template>

WildflowerJS

<!-- Parent -->
<div data-component="user-avatar"
     data-prop-name="user.name"
     data-prop-size="48"></div>

wildflower.component('user-avatar', {
    props: {
        name: { type: 'string' },
        size: { type: 'number', default: 32 }
    },

    init() {
        console.log(this.props.name);
        console.log(this.props.size);
    }
});

Common Gotchas

These are the most frequent mistakes Vue developers make when switching to WildflowerJS:

No .value needed. In Vue, you access refs with count.value in script. In WildflowerJS, state is always accessed directly: this.count, not this.count.value. There is no ref/reactive distinction; all state properties work the same way.

No separate template section. Vue puts HTML in a <template> block inside an SFC. In WildflowerJS, your HTML file is the template. The data-component attribute marks which DOM element the component controls. JavaScript goes in a separate <script> tag or .js file.

Methods go at the top level. In Pinia, methods go inside an actions: {} block. In Vue Options API, methods go in methods: {}. In WildflowerJS, methods are top-level properties of the component or store definition, with no nesting.

No v-else. WildflowerJS does not have an else counterpart for data-render or data-show. Instead, use two elements with opposite conditions: data-show="isLoggedIn" and data-show="!isLoggedIn". For more complex logic, use computed properties.

No transition directives. Vue's <Transition> and <TransitionGroup> components have no direct equivalent. Use CSS transitions on elements (the framework toggles classes and display states) or use the WildflowerJS transitions API for lifecycle-aware animations.

Store computed goes in computed: {}. Pinia uses a getters block for derived state. WildflowerJS uses the same computed: {} block in stores as in components. There is no getters block.

Migration Checklist

Follow these steps to convert a Vue application to WildflowerJS, one component at a time:

Extract the template. Copy the contents of the Vue <template> block into an HTML file. Replace the component's root element with data-component="component-name".
Convert <script setup> to wildflower.component(). Move ref() values into state: {}, computed() calls into computed: {}, and standalone functions to top-level methods.
Replace v-* directives with data-* attributes. Use the directive mapping table above. Replace {{ }} interpolations with data-bind on a wrapping <span> element.
Remove .value from all ref accesses. Search your JavaScript for .value and remove it. In WildflowerJS, this.count reads and writes state directly.
Convert Pinia stores to wildflower.store(). Move getters into computed: {}. Move actions to the top level. Change state: () => ({}) to state: {}.
Replace Vue Router with RouteManager. Define routes using wildflower.createRouter({ routes: [...] }). Use data-show or page-loading patterns for route views. Replace <router-link> with plain <a> tags. The router intercepts navigation automatically.
Remove build tooling (if desired). WildflowerJS works without Vite, Webpack, or any build step. Include the framework from a CDN or local file and load your components directly.
Test each component. Verify state updates, computed values, list rendering, and event handling work correctly. Use the browser console to check for binding errors.

Incremental migration: You do not have to convert everything at once. WildflowerJS components are self-contained, so you can migrate one page or section at a time while the rest of your application remains in Vue.

Previous From React

Next From Solid