Today I want to thank everyone who support and will support my projects . For you, today, I introduce UI Initiative - Premium templates & plugins for Framework7 and Swiper which are free for projects’ patrons!
Right now there are 11 items in the UI Initiative catalog, but this collection will consistently grow, and you can expect a few new products every month!
Let me know in the comments what kind of apps templates and plugins you would like to see in the catalog?
@nolimits4web One question, though: Will there be Framework7 VUE versions for the templates or plugins?
e.g. GameCards.f7.jsx or the other React-components/examples?
If not, I’d recommend keeping the examples with F7core and vanilla JS, because it’s much easier to follow, if you’re not used to React…
Right now all templates (except AppStore and WhatsApp) are for Framework7-Core only, and I went with JSX syntax intentionally as it is really easy to port to React (uses same JSX) and Svelte (syntax very similar to JSX). As for Vue, it also supports JSX:
So JSX is kind of the most universal solution here, because coding all templates for 4 frameworks (core, react, vue & svelte) would be very time-consuming task and not really maintainable.
As for F7 plugins, like Tel Input and Avatar Picker, they are provided with separate components for all frameworks.
Anyway, if you have hard time understanding stuff there and need help, let me know, and I can help convert required files/components for you to Vue
thanks - sounds good…
I never used React and therefore didn’t try to re-write things to get used in F7 / F7Vue, so I think it would be helpful to get 1 example, how to use jsx components in F7vue… (or can I just place the .jsx files into components and then import?
1.
e.g in cookingo there’s something like: asyncComponent: () => import('../pages/item.f7.jsx'),
in routes.js. But since there’s no pages in cookingo, I am wondering how that translates to F7Vue…
the readme in expanding collection states, there’s afully working example included, but it is not… For me there’s only the Swiper expanding-collectionjs and scss files…
I think there are a lot of examples including official Vue JSX examples and guides. You need to install that Vue JSX plugin for Vite and you can use .jsx files instead of .vue with JSX syntax.
Then you need to port (convert) framework7-core code (pages and components) to Vue components (with JSX or not).
If you don’t feel comfortable with JSX then convert it to Vue components, for example CookinGo pages/item.f7.jsx transforms into the following .vue component: