yewstack / yewtify

Vuetify components for the Yew Framework

Yewtify

Vuetify components for the Yew framework.

Usage

Add this crate to your dependencies list in Cargo.toml:

yewtify = { git = "https://github.com/yewstack/yewtify" }

And use components in html! macro:

html! {
    <yewtify::App>
        <yewtify::NavigationDrawer>
        </yewtify::NavigationDrawer>
    </yewtify::App>
}

Already available components

• App (v-app)
• NavigationDrawer (v-navigation-drawer)
• List (v-list)
• ListItem (v-list-item)
• ListItemAction (v-list-item-action)
• ListItemAvatar (v-list-item-avatar)
• ListItemContent (v-list-item-content)
• ListItemTitle (v-list-item-title)

Adding additional components

This is still a work in progress... feel free to add additional components.

To port a component that hasn't been ported yet open this folder:

https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/components

Choose a component you need and add it to the src/components directory.

yewtify's Issues

Add integration tests.

I think that integration tests would help to ensure that the components work as intended.

Fail to build

~/works/yewtify$ cargo build
Compiling yewtify v0.0.0 (/home/xxxx/works/yewtify)
error: failed to run custom build command for yewtify v0.0.0 (/home/xxxx/works/yewtify)

Caused by:
process didn't exit successfully: /home/xxxx/works/yewtify/target/debug/build/yewtify-fe819398fe506c0c/build-script-build (exit code: 1)
--- stderr
Error: environment variable not found

Future, direction & best way to contribute?

Hey there @deniskolodin. This project caught my eye, it is definitely exactly what I have been looking for.

I would love to help out. I am in the process of cutting a JS app over to Yew, it is currently using material-ui, but a refresh based on Veutify SASS/styles should be perfectly fine.

If you are happy with the base of this project, looks like your recommended pattern on adding new components described in the README is the best way to move forward. Looks like the SASS imports will need to updated in addition to implementing the component. Anything else which will need to be done?

Also, I'm planning on just forking, and moving at maximum speed. However, in order to avoid conflicts perhaps I'll open intermittent PRs to try to get review and feedback. That work?

Any concerns you think should be addressed before forward?

Cannot add dependency

Hi, when I try to add this project as a dependency, I get this error:

Error: Error during execution of `cargo metadata`:     Updating git repository `https://github.com/yewstack/yewtify`
    Updating git submodule `[email protected]:vuetifyjs/vuetify.git`
error: failed to get `yewtify` as a dependency of package `bot-webui v0.1.0 (/home/christian/Projekte/Rust/discord-bot-web/bot-webui)`

Caused by:
  failed to load source for dependency `yewtify`

Caused by:
  Unable to update https://github.com/yewstack/yewtify

Caused by:
  failed to update submodule `vuetify`

Caused by:
  failed to fetch submodule `vuetify` from [email protected]:vuetifyjs/vuetify.git

Caused by:
  failed to authenticate when downloading repository

  * attempted ssh-agent authentication, but no usernames succeeded: `git`

  if the git CLI succeeds then `net.git-fetch-with-cli` may help here
  https://doc.rust-lang.org/cargo/reference/config.html#netgit-fetch-with-cli

Caused by:
  error authenticating: no auth sock variable; class=Ssh (23)

I don't know if this is a cargo-specific bug or if it has something to do with your repository. Tried forking it and using my own repo, but to no success. The fixes I found in the output or on the internet didn't help.

System: Arch Linux x86_64, Kernel 5.9.14, latest git

Any special needs for bigger components like `v-data-table`?

Hi! I referenced in the main yew repo that my company is going to be using Yew for some internal tools, and I think the work I'm doing can, and should, be ported over here.

We're currently running a Vuetify app for our internal management system, and the data table is just too slow with the amount of things we need on screen. I've already done a lot of work porting our version of v-data-table to yew, and far it's FAST. I'm very interested in giving that back to the community.

For reference, it takes about 15-20 seconds in production to render 250 of our rows on regular Vuetify, but in my (admittedly unoptimized) yew data table project, it takes only maybe 1-2, and most of that is serde deserializing the 250 row JSON payload or WASM taking a second to load.

Is there anything special I should do for a big component like the data table? That touches quite a few components, but it's mostly internal ones like headers, rows, controls, etc.