https://github.com/kitware/trame-router
trame-router brings Vue Router capabilities into trame widgets and ui
https://github.com/kitware/trame-router
trame trame-maintenance-program
Last synced: 11 months ago
JSON representation
trame-router brings Vue Router capabilities into trame widgets and ui
- Host: GitHub
- URL: https://github.com/kitware/trame-router
- Owner: Kitware
- License: mit
- Created: 2022-05-05T23:27:29.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-15T00:56:21.000Z (about 1 year ago)
- Last Synced: 2025-05-30T16:17:22.226Z (about 1 year ago)
- Topics: trame, trame-maintenance-program
- Language: Python
- Homepage:
- Size: 308 KB
- Stars: 1
- Watchers: 8
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.rst
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.rst
- License: LICENSE
Awesome Lists containing this project
README
.. |pypi_download| image:: https://img.shields.io/pypi/dm/trame-router
trame-router enable multi-page navigation |pypi_download|
===========================================================================
.. image:: https://github.com/Kitware/trame-router/actions/workflows/test_and_release.yml/badge.svg
:target: https://github.com/Kitware/trame-router/actions/workflows/test_and_release.yml
:alt: Test and Release
Trame-router extend trame **widgets** and **ui** with **Vue Router** components and helper to streamline its usage with trame.
Vue Router is the official router for Vue.js on which trame is based.
Installing
-----------------------------------------------------------
trame-router can be installed with `pip `_:
.. code-block:: bash
pip install --upgrade trame-router
Usage
-----------------------------------------------------------
The `Trame Tutorial `_ is the place to go to learn how to use the library and start building your own application.
The `API Reference `_ documentation provides API-level documentation.
`The original Vue Router documentation `_ provide a great introduction resource.
The router elements can be used as follow in trame:
.. code-block:: python
# [...]
from trame.ui.router import RouterViewLayout
from trame.widgets import router
with RouterViewLayout(server, "/"):
with vuetify.VCard():
vuetify.VCardTitle("This is home")
with RouterViewLayout(server, "/foo"):
with vuetify.VCard():
vuetify.VCardTitle("This is foo")
with RouterViewLayout(server, "/bar/:id"):
with vuetify.VList():
vuetify.VListItem("Bar {{ $route.params.id }} item 1")
vuetify.VListItem("Bar {{ $route.params.id }} item 2")
vuetify.VListItem("Bar {{ $route.params.id }} item 3")
with SinglePageWithDrawerLayout(server) as layout:
with layout.toolbar:
vuetify.VBtn("Home", to="/")
vuetify.VBtn("Foo", to="/foo")
vuetify.VBtn("Bar 1", to="/bar/1")
vuetify.VBtn("Bar 2", to="/bar/2")
vuetify.VBtn("Bar 3", to="/bar/3")
with layout.content:
router.RouterView()
Environment variables
-----------------------------------------------------------
With vue3 and docker, trame-router can leverage the html5 history mode but by default we use the "hash" mode.
To enable it, you need to define a **TRAME_ROUTER_HISTORY_MODE** environment variable that should either be set to "html5" or "hash".
This can only work if using our docker bundle or with a proper web server configuration when delivering the static HTML/JS/CSS content yourself.
License
-----------------------------------------------------------
trame-router is made available under the MIT License. For more details, see `LICENSE `_
This license has been chosen to match the one use by `Vue Router `_ which is used under the cover.
Community
-----------------------------------------------------------
`Trame `_ | `Discussions `_ | `Issues `_ | `Contact Us `_
.. image:: https://zenodo.org/badge/410108340.svg
:target: https://zenodo.org/badge/latestdoi/410108340
Enjoying trame?
-----------------------------------------------------------
Share your experience `with a testimonial `_ or `with a brand approval `_.
JavaScript dependency
-----------------------------------------------------------
This Python package bundle the following vue-router libraries. For ``client_type="vue2"``, it exposes ``vue-router@3.5.1`` and for ``client_type="vue3"``, it exposes ``vue-router@4.2.4``.
If you would like us to upgrade any of those dependencies, `please reach out `_.