DEV Community

Cover image for 7 Open Source Projects You Should Know - Vue Edition ✔️ [BONUS]
Domenico Tenace for This is Learning

Posted on • Edited on • Originally published at Medium

7 Open Source Projects You Should Know - Vue Edition ✔️ [BONUS]

Overview

Hi everyone 👋🏼​
This will be an article a little different from the others: in fact I will not take projects written in a certain language, but this time I will talk about a technology derived from a language, in this case JavaScript and the technology I will talk about is Vue.js, a very famous frontend framework (if you want to learn more about the topic here is my dedicated series 😉)
Let's start 🤙🏼


1. Beer CSS

Beer CSS is an open source project with many super features like based on Material Design 3, ready to use with any JS framework, highly focused on DX and others 🍺

GitHub logo beercss / beercss

Build material design interfaces in record time... without stress for devs... 🍺💛

Beer CSS logo

License Downloads minzipped size Version Pull Request Issues

Beer CSS

Build material design interfaces in record time...

...without stress for devs 🍺💛

Cheers, www.beercss.com

Sponsors

Beer CSS is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome sponsors and backers. If you'd like to join them, please consider sponsoring Beer CSS's development.

Open Collective sponsors

Sponsors

Backers

Github sponsors

Sponsors

Why?

  • 🥇 The first CSS framework based on Material Design 3.
  • ⬇️ 10x smaller than others CSS frameworks based on Material Design.
  • 🧙‍♂️ Translates Material Design to HTML semantic standard.
  • 🤓 Ready to use with any JS framework.
  • 🪄 Highly focused on DX.
  • 🚫 No build steps, configurations or dependencies.
  • ✨ Build modern interfaces without any custom CSS.

Applying "the beer way" in css?

This project was guided by the "Germany Beer Purity Law" or "Reinheitsgebot" created in 1516. This law states that beer should only be brewed with the following ingredients…




2. Kongponents

Kongponents is a Vue component library of frequently needed UI elements. They were developed to solve Kong's application needs, but are generic enough to use in any web application 🦍

GitHub logo Kong / kongponents

🦍 Kong Vue Component Library

Kongponents

Kong Kongponents

Publish Commitizen friendly Netlify Status

Kongponents is a Vue component library of frequently needed UI elements. They were developed to solve Kong's application needs, but are generic enough to use in any web application.

Documentation

Kongponents Docs are powered by VitePress and the source can be viewed here.

Committing Changes

This repo uses Conventional Commits.

Commitizen and Commitlint are used to help build and enforce commit messages.

It is highly recommended to use the following command in order to create your commits:

pnpm commit
Enter fullscreen mode Exit fullscreen mode

This will trigger the Commitizen interactive prompt for building your commit message.

Enforcing Commit Format

Lefthook is used to manage Git Hooks within the repo. A commit-msg hook is automatically setup that enforces commit message stands with commitlint, see lefthook.yaml.




3. Dashy

Dashy is an open source, highly customizable, easy to use, privacy-respecting dashboard app.
Includes status-checking, widgets, themes, icon packs, a UI editor and tons more! 🤯

GitHub logo Lissy93 / dashy

🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!

Dashy

Dashy helps you organize your self-hosted services by making them accessible from a single place

User Showcase | Live Demo | Getting Started | Documentation | GitHub


Dashy is kindly sponsored by Umbrel - the personal home cloud and OS for self-hosting

Note

Version 3.0.0 has been released, and requires some changes to your setup, see #1529 for details.

Table of Contents

Features 🌈

  • 📃 Support for multiple pages
  • 🚦 Real-time status monitoring for each of your apps/links

4. Vuestic Admin

Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy maintenance, and high accessibility. Built on Vuestic UI, Vue 3, Vite, Pinia, and Tailwind CSS 🫠

GitHub logo epicmaxco / vuestic-admin

Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy maintenance, and high accessibility. Built on Vuestic UI, Vue 3, Vite, Pinia, and Tailwind CSS. Maintained by Epicmax (@epicmaxco).

Vuestic UI Logo

Free and beautiful Admin Template utilizing Vue 3, Vite, Pinia, and Tailwind CSS. Designed for building efficient, responsive, and fast-loading admin interfaces.
Developed by Epicmax.
Based on Vuestic UI library

Live Demo | About Vuestic Admin | Vuestic UI documentation

Vuestic Admin is built with Vuestic UI. See our issues contributing guide and join discussions on our Discord server to help us improve Vuestic Admin & Vuestic UI experience.

Quick start

Use following command to quickly scaffold new Vuestic Admin or empty Vite or Nuxt project with Vuestic UI.

npm create vuestic@latest
Enter fullscreen mode Exit fullscreen mode

After Vuestic Admin is installed, run npm install to install dependcies, then run npm run dev to start local development server.

Documentation

Documentation, guides, examples and tutorials are available on ui.vuestic.dev

Official Discord Server

Ask questions at the official community discord server

Features

  • Vue 3, Vite, Pinia, and Tailwind CSS - Fast and efficient…

5. Tiny RDM

Tiny RDM is a lightweight Redis desktop client with modern user interface. It compatible with installation on Linux, Mac and Windows. It is designed specifically for developers and ops engineers, making interactions with Redis servers more convenient and enjoyable 🦾

GitHub logo tiny-craft / tiny-rdm

Tiny RDM (Tiny Redis Desktop Manager) - A modern, colorful, super lightweight Redis GUI client for Mac, Windows, and Linux.

Tiny RDM

License GitHub release GitHub All Releases GitHub stars GitHub forks Discord X

Tiny RDM is a modern lightweight cross-platform Redis desktop manager available for Mac, Windows, and Linux.

screenshot screenshot

Feature

  • Super lightweight, built on Webview2, without embedded browsers (Thanks to Wails).
  • Provides visually and user-friendly UI, light and dark themes (Thanks to Naive UI and IconPark).
  • Multi-language support (Need more languages ? Click here to contribute).
  • Better connection management: supports SSH Tunnel/SSL/Sentinel Mode/Cluster Mode/HTTP proxy/SOCKS5 proxy.
  • Visualize key value operations, CRUD support for Lists, Hashes, Strings, Sets, Sorted Sets, and Streams.
  • Support multiple data viewing format and decode/decompression methods.
  • Use SCAN for segmented loading, making it easy to list millions of keys.
  • Logs list for command operation history.
  • Provides command-line mode.
  • Provides slow logs list.
  • Segmented loading and querying for List/Hash/Set/Sorted Set.
  • Provide value decode/decompression for List/Hash/Set/Sorted Set.
  • Integrate with Monaco Editor
  • Support real-time commands monitoring.
  • Support import/export data.
  • Support publish/subscribe.
  • Support…

6. PPTist

PPTist is a web-based presentation application. This application replicates most of the commonly used features of Microsoft Office PowerPoint. It supports various essential element types such as text, images, shapes, lines, charts, tables, videos, audio, and formulas. You can edit and present slides directly in a web browser 👀

GitHub logo pipipi-pikachu / PPTist

An online presentation application that replicates most of the commonly used features of Microsoft Office PowerPoint, allowing for the editing and presentation of PPT online. It also supports the export of PPT files.

stars forks license language issue

简体中文 | English

🎨 PPTist

PowerPoint-ist(/'pauəpɔintist/), A web-based presentation (slideshow) application. This application replicates most of the commonly used features of Microsoft Office PowerPoint. It supports various essential element types such as text, images, shapes, lines, charts, tables, videos, audio, and formulas. You can edit and present slides directly in a web browser.

Try it online👉:https://pipipi-pikachu.github.io/PPTist/

✨ Highlights

  1. Easy Development: Built with Vue 3.x and TypeScript, it does not rely on UI component libraries and avoids third-party components as much as possible. This makes styling customization easier and functionality extension more convenient.
  2. User Friendly: It offers a context menu available everywhere, dozens of keyboard shortcuts, and countless editing detail optimizations, striving to replicate a desktop application-level experience.
  3. Feature Rich: Supports most of the commonly used elements and functionalities found in PowerPoint, supports exporting in various formats, and offers basic editing and previewing on mobile devices.

🚀

7. Radix Vue

Radix Vue is an open-source UI component library for building high-quality, accessible design systems and web apps.
It is an unofficial community-led Vue port of Radix UI 🕵️

GitHub logo unovue / radix-vue

Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.


Logo

Radix Vue

An unofficial Vue port of Radix UI.
Radix is an unstyled, customisable UI Library with built in accessibility for building top quality design systems

NPM version NPM Downloads GitHub stars

Get involved!

Documentation | Getting Started | Examples | Why Radix Vue?

hero image design by: icarusgkx, melkam

Installation

pnpm add radix-vue
Enter fullscreen mode Exit fullscreen mode
npm install radix-vue
Enter fullscreen mode Exit fullscreen mode
yarn add radix-vue
Enter fullscreen mode Exit fullscreen mode

Documentation

For full documentation, visit radix-vue.com.

Releases

For changelog, visit releases.

Contributing

We would love to have your contributions! All PRs all welcomed! We need help building the core components, docs, tests, stories! Join our discord and we will get you up and running!

Dev Setup

Docs

  1. Clone the repo
  2. Run pnpm i
  3. Run pnpm build to run build radix-vue locally
  4. Run pnpm docs:dev to run vitepress
  5. Open http://localhost:5173

Package

  1. Clone the repo
  2. Run pnpm i
  3. Run pnpm story:dev to run histoire (storybook)
  4. Open http://localhost:6006

Authors

Credits

All credits go…





Conclusion

This list lists seven open source projects that are worth checking out, either to use them or even to contribute🖖
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 👇🏻

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹

Buy Me A Coffee

Top comments (8)

Collapse
 
giuliano1993 profile image
Giuliano1993

Is today Vue day and I didn't know? 😂 Great to find some good OS Vue tool to try 😎 And I really like this series of article BTW 😁

Collapse
 
dvalin99 profile image
Domenico Tenace

Every day, is a Vue day 🤣
Thank you for feedback!

Collapse
 
paulsanjay81 profile image
Sanjay Paul

Wow! Great list Domenico. Will sure keep an eye on those.

Collapse
 
martinbaun profile image
Martin Baun

A quick look at Vuestic Admin and already liking it. I'll use it in my next project

Collapse
 
dvalin99 profile image
Domenico Tenace

I recommend that you also look at Vuestic, the basis of that project :)

Read this article: dev.to/giuliano1993/vuestic-vue-co...

Collapse
 
mezieb profile image
Okoro chimezie bright

thanks for sharing

Collapse
 
dvalin99 profile image
Domenico Tenace

You're welcome, it was a pleasure 🤗

Collapse
 
hacktheworld_easy profile image
hacktheworld_easy

Nice!!