{"id":6385,"library":"ipyvue","title":"ipyvue","description":"ipyvue is a Python library that provides a Jupyter widget base for building interactive applications using Vue.js. It allows developers to create custom Jupyter widgets with Vue.js templates and data reactivity. The library is actively maintained with frequent minor releases addressing bug fixes and introducing new features, currently at version 1.12.0.","status":"active","version":"1.12.0","language":"en","source_language":"en","source_url":"https://github.com/widgetti/ipyvue","tags":["jupyter","ipywidgets","vue","frontend","interactive","widgets"],"install":[{"cmd":"pip install ipyvue","lang":"bash","label":"Install ipyvue"}],"dependencies":[{"reason":"ipyvue builds on top of ipywidgets for its Jupyter integration and widget framework.","package":"ipywidgets","optional":false}],"imports":[{"symbol":"VueTemplate","correct":"from ipyvue import VueTemplate"}],"quickstart":{"code":"from ipyvue import VueTemplate\nfrom IPython.display import display\n\nclass HelloWorld(VueTemplate):\n    template = \"\"\"\n        <template>\n            <div>Hello, {{ name }}!</div>\n            <input v-model=\"name\" placeholder=\"Enter your name\">\n        </template>\n    \"\"\"\n    data = {\n        'name': 'World'\n    }\n\nwidget = HelloWorld()\ndisplay(widget)\n# In a Jupyter notebook/Lab cell, 'widget' on the last line\n# would implicitly display it without 'display()'.","lang":"python","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.11.2"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.11.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.11.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.10.0"}],"env_vars":null,"last_verified":"2026-04-15T00:00:00.000Z","next_check":"2026-07-14T00:00:00.000Z"}