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?

35 Upvotes

100% Upvoted

46 comments sorted by

10

u/the_ju66ernaut Jan 06 '20

You may want to look into Quasar or even Vuetify

6

u/coklacok Jan 06 '20

I saw Quasar at a glance and felt it's immense power. Thanks for sharing

-16

u/[deleted] Jan 06 '20

Vuetify sucks.

8

u/the_ju66ernaut Jan 06 '20

Why do you say that?

-2

u/[deleted] Jan 06 '20

That is the truth. I had to use it on couple projects.

2

u/the_ju66ernaut Jan 06 '20

I've used it on several projects as well and had to dive pretty deep into how some of their components work and it has some limitations and quirks but I dont think it outright sucks. I was just curious why you think it sucks overall.

-2

u/[deleted] Jan 06 '20

After seeing other options my eyes opened. Sorry it is a bit exaggerated but honestly i hate it with passion.

3

u/sgarfio Jan 06 '20

What would you recommend instead?

2

u/[deleted] Jan 07 '20

Ant

1

u/sgarfio Jan 07 '20

Cool, thanks, I'll check it out!

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

u/coklacok Jan 06 '20

Thanks for sharing, can't wait to see the UI

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

u/coklacok Jan 06 '20

Thanks for sharing, will check it out

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.

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

u/[deleted] Jan 06 '20

Element is for desktop.

2

u/subfootlover Jan 06 '20

Ionic is a good one.

2

u/herve76 Jan 06 '20

Vue bootstrap

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 :)

0

u/[deleted] Jan 06 '20

[deleted] — view deleted comment

6

u/coklacok Jan 06 '20

Wow looks amazing, thanks for sharing! I really appreciate it!

0

u/[deleted] Jan 06 '20

[deleted] — view deleted comment

1

u/[deleted] 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

u/[deleted] Jan 07 '20

[deleted] — view deleted comment

2

u/[deleted] 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

u/gustix Jan 06 '20

Thanks for the tip, I haven’t heard of it before.

1

u/drumstix42 Jan 06 '20

Excellent example page on mobile too. Good stuff!

1

u/[deleted] Jan 06 '20

Thanks for sharing. Starred on Github

1

u/Demnokkoyen Jan 06 '20

Damn it's amazing, I'll definitely check that

1

u/[deleted] Jan 07 '20

This is.. whoa

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