{"id":15666,"library":"jupyter-vue","title":"Jupyter Vue Widgets Base","description":"jupyter-vue is the JavaScript/TypeScript frontend component of the ipyvue Python library, providing a foundation for building interactive Jupyter widgets using Vue.js. It enables developers to integrate reactive Vue components directly into Jupyter notebooks and JupyterLab environments. The library is actively maintained, currently at version 1.12.0, with regular minor releases addressing bug fixes and introducing new features. Its key differentiator is simplifying the creation of complex, interactive frontend components within Jupyter by leveraging the Vue.js framework for reactivity and templating, abstracting away much of the boilerplate typically associated with traditional Jupyter widget development. This allows for more dynamic and rich user interfaces.","status":"active","version":"1.12.0","language":"javascript","source_language":"en","source_url":"https://github.com/mariobuikhuizen/ipyvue","tags":["javascript","jupyter","widgets","ipython","ipywidgets","jupyterlab-extension"],"install":[{"cmd":"npm install jupyter-vue","lang":"bash","label":"npm"},{"cmd":"yarn add jupyter-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add jupyter-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for rendering Vue components in the Jupyter frontend.","package":"vue","optional":false},{"reason":"Core Jupyter widgets framework providing the foundational model-view architecture for frontend-backend communication.","package":"@jupyter-widgets/base","optional":false}],"imports":[{"note":"While `jupyter-vue` provides the bridging mechanism, custom widget frontend logic or complex component definitions often directly import Vue itself.","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"For developers extending `jupyter-vue` to create custom widget models on the JavaScript frontend, inheriting from the base Vue widget model.","wrong":"const VueTemplateModel = require('jupyter-vue').VueTemplateModel","symbol":"VueTemplateModel","correct":"import { VueTemplateModel } from 'jupyter-vue'"},{"note":"For developers extending `jupyter-vue` to create custom widget views on the JavaScript frontend, inheriting from the base Vue widget view.","wrong":"const VueTemplateView = require('jupyter-vue').VueTemplateView","symbol":"VueTemplateView","correct":"import { VueTemplateView } from 'jupyter-vue'"}],"quickstart":{"code":"from ipyvue import VueTemplate\nfrom IPython.display import display\n\nclass InteractiveCounter(VueTemplate):\n    template = \"\"\"\n    <template>\n        <div style=\"border: 1px solid #ccc; padding: 10px; border-radius: 5px; background-color: #f9f9f9;\">\n            <h3 style=\"color: #333;\">Vue Counter Widget</h3>\n            <p>Current Count: <strong style=\"color: #007bff;\">{{ count }}</strong></p>\n            <button @click=\"increment\" style=\"margin-right: 5px; padding: 8px 15px; border: none; border-radius: 4px; background-color: #28a745; color: white; cursor: pointer;\">Increment</button>\n            <button @click=\"decrement\" style=\"padding: 8px 15px; border: none; border-radius: 4px; background-color: #dc3545; color: white; cursor: pointer;\">Decrement</button>\n            <p style=\"margin-top: 15px;\">User Input: <em style=\"color: #6c757d;\">{{ inputText }}</em></p>\n            <input v-model=\"inputText\" placeholder=\"Type something here...\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;\">\n        </div>\n    </template>\n    \"\"\"\n    data = {\n        'count': 0,\n        'inputText': 'Hello ipyvue!'\n    }\n\n    def increment(self):\n        self.count += 1\n\n    def decrement(self):\n        self.count -= 1\n\nwidget = InteractiveCounter()\ndisplay(widget)\n# In a Jupyter Notebook/Lab cell, 'widget' on the last line\n# would implicitly display it without an explicit 'display()' call.\n","lang":"python","description":"Demonstrates creating and displaying a reactive Vue component widget using the `ipyvue` Python library, which relies on `jupyter-vue` for frontend rendering. This example includes a counter with increment/decrement buttons and a text input field, showcasing two-way data binding and method calling between Python and Vue."},"warnings":[{"fix":"Enable globally via environment variable `IPYVUE_SCOPED_CSS_SUPPORT=1` before starting Jupyter, or per widget instance using `scoped_css_support=True` in the Python `VueTemplate` class definition or constructor.","message":"Scoped CSS support within VueTemplate templates is disabled by default for backwards compatibility. CSS rules defined in `<style scoped>` tags will apply globally unless explicitly enabled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always assign a new object to mutable traitlets to trigger synchronization: e.g., `self.my_list = self.my_list + [new_item]` or `self.my_dict = {**self.my_dict, 'key': 'value'}`.","message":"In-place mutations of Python list or dictionary traitlets (e.g., `my_list.append(item)`) are not automatically detected by `ipywidgets` for synchronization with the frontend. A new list or dictionary object must be assigned to the traitlet for changes to propagate.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consult `ipyvue` and `jupyterlab` documentation for recommended dependency versions. Use `jlpm` (JupyterLab's pinned `yarn` version) for frontend builds and ensure consistent dependency versions across your project and JupyterLab's installed extensions.","message":"Ensure proper version compatibility between `jupyter-vue`, Vue.js, and your JupyterLab/Notebook environment, especially when developing custom JupyterLab extensions. Mismatches in `@jupyterlab/*` or `@lumino/*` dependencies can lead to build or runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review any custom event handlers that process `data` from frontend events to ensure they correctly handle the expanded set of serializable event properties now being sent.","message":"The behavior of sending event data with events like key presses and mouse clicks was significantly enhanced in v1.10.0 to send all serializable event data. While primarily a feature, this could implicitly change behavior for applications relying on older, limited event data structures.","severity":"breaking","affected_versions":">=1.10.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"After `pip install ipyvue` (which handles the frontend installation), run `jupyter nbextension enable --py --sys-prefix ipyvue` for Jupyter Notebook. For JupyterLab (version 3+ typically handles this automatically), if issues persist, `jupyter labextension install @jupyter-widgets/jupyterlab-manager` might be needed. Always restart your Jupyter kernel and browser page after enabling extensions.","cause":"The `jupyter-vue` JavaScript frontend extension is not properly installed or enabled in the Jupyter environment, preventing the Python backend model from finding its corresponding frontend rendering logic. The browser console might show 'Failed to load model class 'XModel' from module 'jupyter-vue''.","error":"Error displaying widget: model not found"},{"fix":"Install the Python package using pip: `pip install ipyvue`. Ensure your Jupyter environment is using the Python kernel where `ipyvue` is installed.","cause":"The 'ipyvue' Python package is not installed in the active Python environment or the environment where Jupyter is running.","error":"ModuleNotFoundError: No module named 'ipyvue'"},{"fix":"Ensure the `template` string provided to `ipyvue.VueTemplate` is valid HTML with correct Vue.js syntax, including wrapping the main component content within a single `<template>` tag.","cause":"Vue template parsing error, often due to a malformed template string or missing `<template>` tags in the Python `template` traitlet.","error":"Unexpected token < in JSON at position X (or similar parsing errors related to templates)"},{"fix":"For Google Colab, enable the custom widget manager and ensure `ipyvue` is installed within the Colab environment: `from google.colab import output; output.enable_custom_widget_manager(); !pip install ipyvue`.","cause":"This issue typically arises in environments like Google Colab where the Jupyter widget manager struggles to correctly load or resolve the `jupyter-vue` JavaScript module.","error":"Unknown dependency jupyter-vue (in Google Colab or similar environments)"}],"ecosystem":"npm"}