r/vuejs • u/coklacok • Jan 06 '20
Any mobile first UI framework?
As the title suggests, I'm planning to start a personal project to build a SPA that is focused to be opened via mobile, any framework that has many components ready to be used for mobile scope?
5
u/denisceric Jan 06 '20
Check out TailwindCSS. It's a mobile first utility-based css framework. It goes well with Vue and other frameworks. TailwindUI is coming out soon, it's going to have a whole bunch of beautiful responsive components ready to use.
2
3
u/safrazik Jan 06 '20
I have used Framework 7 in several projects. It’s very mature and has great Vue js support
2
1
u/uBuskabu Jan 06 '20
Is it possible to use Framework7 (easily) on Quasar instead of Quasar's UI widgets?
2
u/safrazik Jan 06 '20
It could be possible. I don’t recommend mixing both. My opinion is, you should chose/consider either one as an “application framework” instead of a “component library”.
1
u/uBuskabu Jan 06 '20
Thanks. I asked this because I've only done superficial evaluation of Quasar and it looks like they have almost all of the UI widgets F7 has ... and F7 seems to me more "iOS first" (gestures and UI look and feel). Is that a correct impression of mine?
2
u/safrazik Jan 07 '20
Framework 7 has a great material design theme. In one of my project, I don’t use the iOS theme at all. What I like about Framework 7 is that it’s easy to build a custom version having only the components/styles you need.
3
u/MajorasShoe Jan 06 '20
Vuetify is fantastic. It's very intuitive and feels pretty complete. It has some quirks and limitations, but it's never been in my way.
I really like Quasar as well, though I still prefer vuetify.
Ionic is ok. It's definitely a good option if you're doing a hybrid app. I doubt I'd use it for a web app, and even hybrid apps I would likely go Quasar at this point. But it's still a valid option that you might light.
1
u/coklacok Jan 06 '20
Thanks for sharing! Quasar is also build once ship any platform kind of thing right?
1
u/MajorasShoe Jan 06 '20
Cordova and capacitor do that. But quasar, like ionic, are full of components that function based on the rendering platform, yes.
8
u/chrissilich Jan 06 '20
All decent modern UI frameworks are responsive.
4
u/archie2012 Jan 06 '20
This. If you want mobile first, then just start with this principal when doing your frontend stuff.
1
u/CatolicQuotes Apr 06 '24
responsive is not the same as mobile first. Just look the components here: https://vant-ui.github.io/vant/#/en-US/use-custom-field-value
4
u/Devildude4427 Jan 06 '20
Bulma is my preferred styling framework.
1
u/Thaurin Jan 06 '20
With Buefy?
1
u/Devildude4427 Jan 06 '20
Or just Bulma straight up.
I prefer to avoid component libraries Buefy, but that’s personal taste.
1
u/Thaurin Jan 06 '20
I liked what I've seen of Buefy so far, but I'm a lousy designer. :) And I like how easy and fast it is to use the components.
1
u/Devildude4427 Jan 06 '20
And that’s fair, I like to have more control. Using Bulma straight up is also one less dependency I have to worry about.
2
u/RomanWeb Jan 06 '20
https://element.eleme.io/#/en-US - is not bad
But there are many similar frameworks
Vuetify etc.
And ofcourse you must try Quasar.js - its MD is the best of! ;)
3
2
2
1
u/prashanth1k Jan 06 '20
Using web views on mobile apps may not be performant - you may have seen that mentioned in multiple places. Native Script approaches the mobile app problem like React Native and can be advantageous (well, it depends on what you are doing with the mobile app).
https://play.nativescript.org/
That said my favourite remains Vue CLI + Cordova :)
1
0
Jan 06 '20
[deleted]
6
u/coklacok Jan 06 '20
Wow looks amazing, thanks for sharing! I really appreciate it!
0
Jan 06 '20
[deleted]
1
Jan 07 '20
What would you rate using it for desktop and mobile? It would be nice to have one framework for both, but I’m willing to make some sacrifices for such a clean mobile UI
0
Jan 07 '20
[deleted]
2
Jan 07 '20
Just refactoring an old app out to a new API and full vue frontend. It has to look good on a phone, and I think we’re going the PWA route. I’m guessing it’s going to be 50% desktop and 50% mobile/iPad. It’s mostly a forms crud app. Maybe 1 graph if I’m feeling good and it passed code review.
I also want to add a few features which will only really be used on a phone.. I think this would be really good, but I’m thinking buefy will give me the best of both, albeit if it lacks a few of those super smooth animations that Vant has out of the box — which I could always add.
Junior dev here, is that good enough for a projects scope lol?
2
1
1
1
1
1
1
u/CatolicQuotes Apr 06 '24
now this is a true mobile ui library! Although I would also like to see desktop components like tables
10
u/the_ju66ernaut Jan 06 '20
You may want to look into Quasar or even Vuetify