Hey ther DEV.to community!
Vue is my favorite JavaScript framework for front-end and I use it pretty much every day. So I decided to share the best frameworks that can enhance your Vue experience and increase the quality of your app.
If you are new to Vue you can start by checking out the Vue cheat sheet which in it I included almost every simple aspect of Vue:
In case you are confused by the term "Best Vue frameworks" since Vue itself is a framework, there is a simple explanation! Vue is a framework itself that's true but because it is very popular and the community behind it is huge, it got so many libraries and frameworks (which use Vue) to make some tasks easier. So yes a framework can have a framework in the world of JavaScript, LAND OF FRAMEWORKS.
Note that this list is not in order and being mentioned first doesn't mean being better.
Frameworks
A framework built on top of Vue helps you organize your Vue components and usually gives you a pre-defined router. Usually setting up a Vue project using Vue CLI is not an enjoyable task. Setting up a router can take some time which gets reduced to zero when using a framework for instance. Here are the best frameworks I used.
Nuxt.js
Nutx.js is probably the most famous framework amongst Vue frameworks and is my first choice in every project if suitable. It gives you the option to design an SPA or a Universal app depending on your needs. You can also generate a static website using Nuxt.js and host it on GitHub or Netlify as well.
Nuxt.js gives you the choice to choose between few back-end servers. Although Nuxt.js recommends to use none (which I agree with it) but in case you want to have a back-end server you get to choose one. There are plenty of options including Express.js and Adonis.
Another feature that thrills me is that Nuxt.js gives you the option to choose a UI framework like Vueitfy or Ant Design when setting up your project and it is very good to have the best compatibility when doing so.
Nuxt.js has Vuex built-in and only thing you need to do is defining your stores! It is a fun journey with Nuxt.js!
You can checkout Nuxt.js' official website at: https://nuxtjs.org/
Gridsome
Gridsome is a static site generator for Vue and is famous to be blazing fast. Gridsome gives you the power to bring your data from any headless CMS, WordPress and many more famous softwares. It is also possible to bring your data from your database or markdown files and it supports GraphQL for querying your data.
Gridsome is a good choice if you want to host your website on a static website hosting service like Netlify or GitHub pages.
Gridsome is the counterpart of Gatsby for React.
You can check Gridsome's official website at: https://gridsome.org/
VuePress
VuePress is another static site generator but it is not as robust as Gridsome or Nuxt.js. VuePress is used for designing simple websites such as documentations. If you are not planning on having a huge a ecosystem and want to have a minimal website VuePress is probably the best choice.
Here is VuePress' website: https://vuepress.vuejs.org/
Quasar
Quasar is yet another famous framework built on top of Vue. I've not had a chance to work with it yet but heard a lot about it.
And here is @pedro_dgcouto's experience with it:
So, Quasar Framework literally makes my life easier. Being in a
small company and working on different projects, it's good to have
some consistency in the code. The framework has almost any
component that you've might want or need and you can expand the
components to make it your own. Also, they have the best practices
in code and the Quasar team makes regular updates with bug fixes
and new features as well.
Here is Quasar's official website: https://quasar.dev/
I've been using it almost for 2 years by now!
UI Frameworks
Vue is popular and it has adopted many famous frameworks like Bulma to its ecosystem and has made people make some other awesome UI frameworks! Here is some of the best ones you can rely on!
Vuetify
Vuetify is a really huge UI framework providing you with tons of beautiful components! Vuetify is my first choice when designing web apps especially when using Nuxt.js because Nuxt.js gives you the option to install Vuetify with no effort at all.
Vuetify is robust! And when I say robust I don't mean just few tweaks. It gives you the option to change your colour palette and every component syncs in perfectly along with thousands of options.
Vueitfy components have hundreds of options and events which enables you to customize their behaviour easily.
Another good factor about Vuetify is that it supports RTL languages which is a huge matter for me since I live in Iran and the language here is Persian (written from right to left).
So far I've used Vuetify in more than 10 commercial apps and I've faced no problem or very easy to fix if there were any.
Here is Vuetify's official website: https://vuetifyjs.com/
Ant Design
Ant Design is really good-looking and polished but a heavy UI framework.
I've used Ant Design few times and I was happy with it but the weight of this framework bothered me when I used it on a commercial project. It wasn't such a big deal but I feel Vuetify is way more optimized and compressed than Ant Design.
Another thing that throws me off of Ant Design is the documentation which happens to be Chinese and not all of it is translated to English yet.
All these aside, Ant Design is really good-looking and worth it to be a part of your project.
Here is Ant Design for Vue's website: https://www.antdv.com/
Buefy
Buefy is a Vue UI framework based on Bulma. Bulma is a CSS framework that got really popular and almost every one was speaking about Bulma for a while. Buefy is beautiful, minimal and lightweight.
Buefy is not a vast UI framework, at least not as vast as Vuetify or Ant Design is but can be sufficient for many projects.
Here is Buefy's official website: https://buefy.org/
I hope you enjoyed.
Tell me what you think about this list in the comments section.
BTW I'm looking for work. If you have anything to do feel free to contact me.
Top comments (8)
PrimeVUE (primefaces.org/primevue/).
For my Angular projects, I use the PrimeNG (primefaces.org/primeng/) counterpart.
Both UI Libraries have the same components, so really fine once you've become familiar with one of them.
Thanks for sharing about Vue. dev.to needs more of that :)
This list will definitely help many with making the right decision for their next project.
I have one project written with Vuetify, but I personally find the components rather verbose. Now I am also in the middle of redesigning some things to make it less look like any Google project.
Wow I don't think I could learn and vie frameworks, would be nice but I know, react, react native, vue and few animation frameworks, but if I do have extra memory space would like to learn one of them
There is one missing... Quasar Framework. 😊
You are right.
Unfortunately, I have not had a chance to work with Quasar. If you have any experience with it I'd appreciate if you wrote a paragraph about it and sent it to me. I'd add it to the post with your id tagged.
Sure!
quasar.dev/
So, Quasar Framework literally makes my life easier. Being in a small company and working on different projects, it's good to have some consistency in the code. The framework has almost any component that you've might want or need and you can expand the components to make it your own. Also, they have the best practices in code and the Quasar team makes regular updates with bug fixes and new features as well.
I've been using it almost for 2 years by now!
I never heard of Quasar until now. Going down the rabbit hole, thanks!
You should try it! 😊
If you have any doubts, just let me know 😉