Skip to main content

Vue Router widgets for trame

Project description

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:

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:

# [...]
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 | RoadMap | Contact Us

https://zenodo.org/badge/410108340.svg

Enjoying trame?

Share your experience with a testimonial or with a brand approval.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

trame-router-2.3.0.tar.gz (45.9 kB view details)

Uploaded Source

Built Distribution

trame_router-2.3.0-py3-none-any.whl (47.3 kB view details)

Uploaded Python 3

File details

Details for the file trame-router-2.3.0.tar.gz.

File metadata

  • Download URL: trame-router-2.3.0.tar.gz
  • Upload date:
  • Size: 45.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.8.0 pkginfo/1.11.1 readme-renderer/44.0 requests/2.32.3 requests-toolbelt/1.0.0 urllib3/2.2.2 tqdm/4.66.5 importlib-metadata/8.2.0 keyring/25.3.0 rfc3986/2.0.0 colorama/0.4.6 CPython/3.10.14

File hashes

Hashes for trame-router-2.3.0.tar.gz
Algorithm Hash digest
SHA256 b382bdaad59998d5fcb93613a6e6828d68ff168eff87df56b13604a331294216
MD5 78860180b6b0909c4e63c2aae8bf2873
BLAKE2b-256 99cc57b6737fa47ca8d32b6a5bda1e9d1636ca1233abef9ad63a19d9bcea19ff

See more details on using hashes here.

Provenance

File details

Details for the file trame_router-2.3.0-py3-none-any.whl.

File metadata

  • Download URL: trame_router-2.3.0-py3-none-any.whl
  • Upload date:
  • Size: 47.3 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.8.0 pkginfo/1.11.1 readme-renderer/44.0 requests/2.32.3 requests-toolbelt/1.0.0 urllib3/2.2.2 tqdm/4.66.5 importlib-metadata/8.2.0 keyring/25.3.0 rfc3986/2.0.0 colorama/0.4.6 CPython/3.10.14

File hashes

Hashes for trame_router-2.3.0-py3-none-any.whl
Algorithm Hash digest
SHA256 b1d2b94ead3d6d9a731e544a7fbb343788b71e1c4139f2a5e17f19c5f4fa344d
MD5 84afc17e796618605307c60400b7320d
BLAKE2b-256 4ad24e3d835b47a0eeb11e21b1edc71407bc9d8d6a59a9d3076117ba3523bce8

See more details on using hashes here.

Provenance

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page