Skip to content

Feat: Support Vuetify V4 #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
snacksbro wants to merge 16 commits into
base: master
Choose a base branch
from
Draft

Feat: Support Vuetify V4 #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6bcd0f3
chore(js-libs): Update path to generate_python.py for generated files
snacksbro Sep 24, 2026
54bec66
feat(v4): Add vite bundle scaffolding
snacksbro Sep 24, 2026
bc33975
fix(generate-python): Use third .parent call
snacksbro Sep 21, 2026
f290e6b
chore(module): Ignore v4-serve
snacksbro Sep 21, 2026
5c571c4
chore(v4): Add generated vuetify4 widgets
snacksbro Sep 21, 2026
1270342
feat(ui): Add vuetify4
snacksbro Sep 21, 2026
3f4a53c
feat(vuetify4): Expose modules into Trame namespace
snacksbro Sep 21, 2026
692ebf4
chore(pyproject): Bump version
snacksbro Sep 22, 2026
14fc394
ci: Add vuetify 4 + labs to CI steps
snacksbro Sep 24, 2026
3d14e06
chore(codespell): Ignore generated v4 widgets
snacksbro Sep 24, 2026
729c03a
fix(generate-python): Use the v4 module properly
snacksbro Sep 24, 2026
8dd1461
fix(generate-python): Import v3 module properly
snacksbro Sep 24, 2026
ee9e2ce
build(js-libs): Add helper script to install deps
snacksbro Sep 24, 2026
6507faa
chore(manifest): Include v4-serve and v4-lab-serve
snacksbro Sep 24, 2026
1601726
chore(v4): Fix typo referencing vue4
snacksbro Sep 24, 2026
9b6843b
Revert "chore(pyproject): Bump version"
snacksbro Sep 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .codespellrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
[codespell]
skip = **/package-lock.json,trame_vuetify/widgets/vuetify3.py
skip = **/package-lock.json,trame_vuetify/widgets/vuetify3.py,trame_vuetify/widgets/vuetify4.py
38 changes: 38 additions & 0 deletions .github/workflows/test_and_release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,25 @@ jobs:
mkdir -p v3-lab-serve/{fonts,css}
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css -Lo v3-lab-serve/css/mdi.css
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2 -Lo v3-lab-serve/fonts/materialdesignicons-webfont.woff2

- name: Build Vuetify 4 Components
run: |
mkdir -p trame_vuetify/module/v4-serve/{fonts,css}
cd trame_vuetify/module/v4-serve
curl https://cdn.jsdelivr.net/npm/vuetify@4.2.1/dist/vuetify.min.css -Lo vuetify4.css
curl https://cdn.jsdelivr.net/npm/vuetify@4.2.1/dist/vuetify.min.js -Lo vuetify4.js
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css -Lo css/mdi.css
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2 -Lo fonts/materialdesignicons-webfont.woff2

- name: Build Vuetify 4 Lab Components
run: |
cd js-libs/v4-lab
npm ci
npm run build
cd ../../trame_vuetify/module
mkdir -p v4-lab-serve/{fonts,css}
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css -Lo v4-lab-serve/css/mdi.css
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2 -Lo v4-lab-serve/fonts/materialdesignicons-webfont.woff2
release:
needs: [pre-commit, pytest, test-npm-build]
runs-on: ubuntu-latest
Expand Down Expand Up @@ -143,6 +162,25 @@ jobs:
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css -Lo v3-lab-serve/css/mdi.css
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2 -Lo v3-lab-serve/fonts/materialdesignicons-webfont.woff2

- name: Build Vuetify 4 Components
run: |
mkdir -p trame_vuetify/module/v4-serve/{fonts,css}
cd trame_vuetify/module/v4-serve
curl https://cdn.jsdelivr.net/npm/vuetify@4.2.1/dist/vuetify.min.css -Lo vuetify4.css
curl https://cdn.jsdelivr.net/npm/vuetify@4.2.1/dist/vuetify.min.js -Lo vuetify4.js
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css -Lo css/mdi.css
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2 -Lo fonts/materialdesignicons-webfont.woff2

- name: Build Vuetify4-lab Components
run: |
cd js-libs/v4-lab
npm ci
npm run build
cd ../../trame_vuetify/module
mkdir -p v4-lab-serve/{fonts,css}
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css -Lo v4-lab-serve/css/mdi.css
curl https://cdn.jsdelivr.net/npm/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2 -Lo v4-lab-serve/fonts/materialdesignicons-webfont.woff2

- name: Python Semantic Release
id: release
uses: python-semantic-release/python-semantic-release@v10.6.2
Expand Down
2 changes: 2 additions & 0 deletions MANIFEST.in
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
graft trame_vuetify/module/v2-serve/fonts
graft trame_vuetify/module/v3-serve
graft trame_vuetify/module/v3-lab-serve
graft trame_vuetify/module/v4-serve

@jourdain jourdain Sep 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if that file is still needed. But normally this is taking care by

https://github.com/Kitware/trame-vuetify/blob/master/pyproject.toml#L41-L48

Try building the wheel when you remove that file all together to validate that it is true.

graft trame_vuetify/module/v4-lab-serve
graft trame_vuetify/module/roboto
recursive-include trame_vuetify/module/v2-serve *.min.js *.css
include trame_vuetify/LICENSE
Expand Down
19 changes: 19 additions & 0 deletions js-libs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Building

## Generating the Bundles

### Vuetify 3

1. Navigate to `v3-lab/`
2. Run `npm i` to install Vuetify v3
3. Run `npm run build` to generate the bundled JS, this should be present in `trame_vuetify/module/v3-lab-serve/trame-vuetify-lab.js`

### Vuetify 4

1. Navigate to `v4-lab/`
2. Run `npm i` to install Vuetify v4
3. Run `npm run build` to generate the bundled JS, this should be present in `trame_vuetify/module/v4-lab-serve/trame-vuetify-lab.js`

## Compiling the Python Bindings + Retrieving Fonts

Run `./build-bundles.sh`.
49 changes: 49 additions & 0 deletions js-libs/build-bundles.sh
View file
Open in desktop

@snacksbro snacksbro Sep 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the build script I mentioned in the PR description, I was using it a lot for testing and figured I'd push it if this is something you find useful, I can have it removed otherwise

Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
#!/bin/bash

export SRC_URL=https://cdn.jsdelivr.net/npm

# Vuetify 3
export V3_VERSION=vuetify@3.12.10
export V3_DST_PATH=../trame_vuetify/module/v3-serve
export V3_LAB_DST_PATH=../trame_vuetify/module/v3-lab-serve
mkdir -p $V3_DST_PATH/{fonts,css}
mkdir -p $V3_LAB_DST_PATH/{fonts,css}

# Make and download Vuetify 3
curl "$SRC_URL/$V3_VERSION/dist/vuetify.min.css" -Lo "$V3_DST_PATH/vuetify3.css"
curl "$SRC_URL/$V3_VERSION/dist/vuetify.min.js" -Lo "$V3_DST_PATH/vuetify3.js"

# Prepare icons + fonts for regular Vuetify 3
curl "$SRC_URL/@mdi/font@7.x/css/materialdesignicons.min.css" -Lo "$V3_DST_PATH/css/mdi.css"
curl "$SRC_URL/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2" -Lo "$V3_DST_PATH/fonts/materialdesignicons-webfont.woff2"

# Prepare icons + fonts for Vuetify 3 Lab
curl "$SRC_URL/@mdi/font@7.x/css/materialdesignicons.min.css" -Lo "$V3_LAB_DST_PATH/css/mdi.css"
curl "$SRC_URL/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2" -Lo "$V3_LAB_DST_PATH/fonts/materialdesignicons-webfont.woff2"

# Re-generate the Python bindings
curl "$SRC_URL/$V3_VERSION/dist/json/web-types.json" -Lo ./v3/web-types.json
./v3/generate_python.py

# Vuetify 4
export V4_VERSION=vuetify@4.2.1
export V4_DST_PATH=../trame_vuetify/module/v4-serve
export V4_LAB_DST_PATH=../trame_vuetify/module/v4-lab-serve
mkdir -p $V4_DST_PATH/{fonts,css}
mkdir -p $V4_LAB_DST_PATH/{fonts,css}

# Make and download Vuetify 4
curl "$SRC_URL/$V4_VERSION/dist/vuetify.min.css" -Lo "$V4_DST_PATH/vuetify4.css"
curl "$SRC_URL/$V4_VERSION/dist/vuetify.min.js" -Lo "$V4_DST_PATH/vuetify4.js"

# Prepare icons + fonts for regular Vuetify 4
curl "$SRC_URL/@mdi/font@7.x/css/materialdesignicons.min.css" -Lo "$V4_DST_PATH/css/mdi.css"
curl "$SRC_URL/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2" -Lo "$V4_DST_PATH/fonts/materialdesignicons-webfont.woff2"

# Prepare icons + fonts for Vuetify 4 Lab
curl "$SRC_URL/@mdi/font@7.x/css/materialdesignicons.min.css" -Lo "$V4_LAB_DST_PATH/css/mdi.css"
curl "$SRC_URL/@mdi/font@7.x/fonts/materialdesignicons-webfont.woff2" -Lo "$V4_LAB_DST_PATH/fonts/materialdesignicons-webfont.woff2"

# Re-generate the Python bindings
curl "$SRC_URL/$V4_VERSION/dist/json/web-types.json" -Lo ./v4/web-types.json
./v4/generate_python.py
4 changes: 1 addition & 3 deletions js-libs/v2/generate_python.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,9 +241,7 @@ def __init__(self, children=None, **kwargs):
"##########################################################\n"
)
vuetify_module.write("# DO NOT EDIT: GENERATED FILE\n")
vuetify_module.write(
"# => instead run: $ROOT/vue-components/generate_python.py\n"
)
vuetify_module.write("# => instead run: $ROOT/js-libs/v2/generate_python.py\n")
vuetify_module.write(
"##########################################################\n\n"
)
Expand Down
11 changes: 6 additions & 5 deletions js-libs/v3/.header.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,19 @@ def __init__(self, _elem_name, children=None, **kwargs):
super().__init__(_elem_name, children, **kwargs)

@jourdain jourdain Sep 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch

if self.server:
if USE_LAB:
from trame_vuetify.module import vue3_lab
from trame_vuetify.module import v3_lab

self.server.enable_module(vue3_lab)
self.server.enable_module(v3_lab)
else:
from trame_vuetify.module import vue3
from trame_vuetify.module import v3

self.server.enable_module(vue3)
self.server.enable_module(v3)


try:
import numpy as np
from numbers import Number

import numpy as np
except Exception:
# dataframe_to_grid won't work
pass
Expand Down
6 changes: 2 additions & 4 deletions js-libs/v3/generate_python.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import sys
from pathlib import Path

BASE_DIR = Path(__file__).parent.parent
BASE_DIR = Path(__file__).parent.parent.parent
Comment thread
jourdain marked this conversation as resolved.
DEST_FILE = BASE_DIR / Path("trame_vuetify/widgets/vuetify3.py")
INPUT_JSON = BASE_DIR / Path("js-libs/v3/web-types.json")
HEADER_FILE = Path(__file__).with_name(".header.py")
Expand Down Expand Up @@ -290,9 +290,7 @@ def __init__(self, children=None, **kwargs):
"##########################################################\n"
)
vuetify_module.write("# DO NOT EDIT: GENERATED FILE\n")
vuetify_module.write(
"# => instead run: $ROOT/vue-components/generate_python.py\n"
)
vuetify_module.write("# => instead run: $ROOT/js-libs/v3/generate_python.py\n")
vuetify_module.write(
"##########################################################\n\n"
)
Expand Down
Loading
Loading