ipyvue

Warnings

• gotcha Prior to v1.11.2, a data value of `0` (integer zero) was incorrectly transformed into an empty object (`{}`) when passed from Python to Vue, leading to unexpected behavior in templates.
  Fix: Upgrade to ipyvue v1.11.2 or newer. If stuck on an older version, explicitly cast `0` to a string or another distinct non-object type if it causes issues.
• gotcha Before v1.11.1, templates that were empty or had their `<template>` tags on a single line or omitted could cause rendering errors in some environments.
  Fix: Upgrade to ipyvue v1.11.1 or newer. Ensure your Vue templates are well-formed with distinct `<template>` start and end tags on separate lines and contain valid content.
• gotcha In versions prior to v1.11.0, the `v_model` directive in Vue templates could not be set or updated after the initial render of the component. Changes to the Python-side data bound to `v_model` would not propagate to the frontend.
  Fix: Upgrade to ipyvue v1.11.0 or newer to enable dynamic `v_model` updates. For older versions, ensure `v_model` is only used for initial binding and state changes are handled via event listeners and direct data manipulation.
• gotcha Starting with v1.10.0, ipyvue began sending all serializable event data (e.g., key presses, mouse clicks) with events. If your code on older versions relied on a limited subset of event data, this change might expose more data than expected.
  Fix: Review event handlers to ensure they correctly process potentially richer event data payloads. No direct fix needed if richer data is acceptable, but be aware of the change in data structure.

Install

• pip install ipyvue Install ipyvue

Imports

• VueTemplate

  from ipyvue import VueTemplate

Quickstart

This example defines a simple Jupyter widget using `ipyvue.VueTemplate`. It renders a 'Hello, [name]!' message and an input field to update the 'name' data property reactively. The `template` property holds the Vue.js template, and `data` provides initial reactive properties.

from ipyvue import VueTemplate
from IPython.display import display

class HelloWorld(VueTemplate):
    template = """
        <template>
            <div>Hello, {{ name }}!</div>
            <input v-model="name" placeholder="Enter your name">
        </template>
    """
    data = {
        'name': 'World'
    }

widget = HelloWorld()
display(widget)
# In a Jupyter notebook/Lab cell, 'widget' on the last line
# would implicitly display it without 'display()'.