Jupyter widgets based on vuetify UI components which implement Google's Material Design Spec with the Vue.js framework.

To install use pip:

$ pip install ipyvuetify
$ jupyter nbextension enable --py --sys-prefix ipyvuetify

# for Jupyter Lab
$ jupyter labextension install jupyter-vuetify

For a development installation (requires npm),

$ git clone https://github.com/mariobuikhuizen/ipyvuetify.git
$ cd ipyvuetify
$ pip install -e .
$ jupyter nbextension install --py --symlink --sys-prefix ipyvuetify
$ jupyter nbextension enable --py --sys-prefix ipyvuetify

For examples see the example notebook.

The Vuetify documentation can be used to find all available components and attributes (in the left side bar or use the search field). Ipyvuetify tries to stay close to the Vue.js and Vuetify template syntax, but there are some differences:

The .sync property modifier functionality can be achieved by using an event named:
update:[propertyNameInCamelCase].

<v-navigation-drawer :mini-variant.sync=...

drawer = v.NavigationDrawer(mini_variant=True, ...)

def update_mini(widget, event, data):
    drawer.mini_variant = data`

drawer.on_event('update:miniVariant', update_mini)

<v-menu>
  <template slot:activator="{ on }">
    <v-btn v-on="on">...</v-btn>
  </template>
  <v-list>
    ...
  </v-list>
</v-menu>

Menu(v_slots=[{
    'name': 'activator',
    'variable': 'x',
    'children': Btn(v_on='x.on', children=[...])
}], children=[
    List(...)
])

For non scoped slots 'scope': 'x' and v_on can be omitted.

For a more web development centric way of development and a closer match to the Vue/Vuetify api, VuetifyTemplate can be used. See the example or .

Make a sub class of VuetifyTemplate, define your own traitlets and set a template string. The traitlets will be accessible from the template as if they were in a vue-model. Methods can be called by defining a method with a prefix vue_ e.g. def vue_button_click(self, data) and calling it from the template e.g. @click="button_click(e)".