Overview
Hi everyone 👋🏼
In this article, I'm going to look at my three favorite libraries for developing Vue applications. These are all libraries that I have used throughout my experience with this framework and that I have found interesting.
Let's start 🤙🏼
1. Prime Vue
PrimeVue is a complete UI suite for Vue.js consisting of a set of UI components. The project's primary goal is to boost developer productivity by offering reusable solutions that are easy to tune and customize as an in-house library.
PrimeVue was developed by PrimeTek, a world-renowned provider of popular component suites, which is also responsible for developing PrimeReact.
It's a comprehensive framework, packed with ready-to-use components and extremely flexible when it comes to customizing it to your needs. It's on the rise rapidly and has gained a lot of popularity among Vue developers in the last period.
primefaces
/
primevue
Next Generation Vue UI Component Library
PrimeVue
PrimeVue is a rich set of open source UI Components for Vue. See PrimeVue homepage for live showcase and documentation.
Download
PrimeVue is available at npm.
# Using npm
npm install primevue
# Using yarn
yarn add primevue
# Using pnpm
pnpm add primevue
Plugin
PrimeVue plugin is required to be installed with the use function to set up the default configuration.
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue);
Theming
PrimeVue has two theming has modes; styled or unstyled.
Styled Mode
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the Themes section for the complete list of available themes to choose from.
// theme
import 'primevue/resources/themes/aura-light-green/theme.css';
Unstyled Mode
…
2. Buefy
Buefy is a lightweight UI component library based on Vue.js and Bulma CSS.
It provides a set of stylized components using Bulma's classes, using the full power of Vue.js, encapsulating the logic for each component.
As with Bulma, one of the strengths of this framework is definitely its flexibility: you can customize the theme and style according to what you need.
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.
Check out the official
@ntohq/Buefy-nextfork in development forVue v3.0.0+support.
Features
- Keep your current Bulma theme / variables easily
- Supports both Material Design Icons and FontAwesome
- Very lightweight with none internal dependencies aside from Vue & Bulma
- About 88KB min+gzip (with Bulma included)
- Semantic code output
- Follows Bulma design and some of the Material Design UX
- Focus on usability and performance without over-animating stuff
Documentation
The documentation is in the docs directory, it serves as the demo as well.
Browse online documentation here.
Quick start
You need Vue.js version 2.6+. (Vue 3 is supported here)
1 Install via npm
npm install buefy
2 Import and use Buefy
Bundle
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy);
…
3. Oruga UI
Oruga is a lightweight UI components library for Vue.js without any dependency.
It offers a set of easily customisable components and doesn't depend on any specific style.
Oruga provides you with a set of functional components, so you can focus only on the UI/UX aspects of your application and can be entirely flexible for future changes without having to touch a line of JavaScript.
oruga-ui
/
oruga
🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly
(🐛) => 🦋
Oruga is a lightweight library of UI components for Vue.js without CSS framework dependency
Note
Oruga for Vue 2.x deprecated
Due to EOL for Vue 2.x at the end of the year, from now on Oruga for Vue 2 is deprecated. Further enhancements will only be developed for Oruga-next. See #496.
Contact us 👾
Support us ✌🏻
Features
Oruga is a lightweight UI components library for Vue.js without any dependency It offers a set of easily customisable components and doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS, etc...). Therefore, it doesn't provide a grid system or CSS utilities, but you can integrate any CSS framework you like. Oruga provides you with a set of functional components, so you can focus only on…
4. [BONUS] Bulma CSS
Bulma is not a framework based on Vue.js, it's a simple lightweight framework without any JavaScript dependencies.
In other words, Bulma is a CSS library, with ONLY CSS and it provides CSS classes to help you style your HTML code.
Bulma stands out for its ease of use and very low learning curve, compatible with all kind of frontend frameworks.
Bulma is a modern CSS framework based on Flexbox.
Quick install
Bulma is constantly in development! Try it out now:
NPM
npm install bulma
or
Yarn
yarn add bulma
Bower
bower install bulma
Import
After installation, you can import the CSS file into your project using this snippet:
@import 'bulma/css/bulma.css'
CDN
https://www.jsdelivr.com/package/npm/bulma
Feel free to raise an issue or submit a pull request.
CSS only
Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css
You can either use that file, "out of the box", or download the Sass source files to customize the variables.
There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.
Browser Support
Bulma uses autoprefixer to make (most) Flexbox…
Conclusion
I have listed what for me are the most valid frameworks for a Vue.js project, I hope this article has been helpful.
Happy coding!✨
Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻
Linktree: https://linktr.ee/domenicotenace
Follow me on dev.to for other articles 👇🏻
Top comments (0)