Looking for inspiration for your next Vuetify based project? Then here is the list of best Vuetify examples that you can get inspired from. Before we start the collection of Vuetify examples, let’s look at what Vuetify is and why it is getting popular.
What is Vuetify?
VuetifyJS is a complete UI framework built on top of Vue.js. The project aims to provide developers with the tools they need to build rich and engaging user experiences. Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification.
Besides, it takes a mobile-first approach to design, which means your application just works out of the box, whether on a phone, tablet, or desktop computer.
Now, Vuetify is developed exactly according to Material Design specifications with every component meticulously crafted to be modular, responsive, and performant. You can also customize your application with unique and dynamic Layouts and customize the styles of your components using SASS variables.
Besides, Vuetify has a very active development cycle and is patched weekly, responding to community issues and reports at breakneck speed, allowing you to get your hands on bug fixes and enhancements more often. In addition, every major release is accompanied by 18 months of Long-term support for the previous minor version.
Unlike other frameworks, when you develop with Vuetify, you are never alone as it has large community support.
Advantages of Vuetify:
Vuetify offers the following advantages:
- Enables beauty for graphically challenged devs
- Wide range of components and active development
- New age components
- Easy integration
- Open Source
- Not tied to jQuery
- Awesome Component collection
- Awesome Documentation
Now, Let’s start the list of Vuetify Examples.
The Best Vuetify Examples:
Check out some of the best Vuetify Examples 2022.
Materio – Free Vuetify Vuejs Admin Template (Free🎁 & Best🤩)
Materio Free VueJS Vuetify Admin Dashboard Template – is the latest most developer-friendly 🤘🏻 & highly customizable✨ Admin Dashboard Template based on Vuetify. If you’re a developer looking for a Vuejs Admin Template enriched with features and a highly customizable look no further than Materio🤩 . Besides, the highest industry standards are considered to bring you the very best Vuetify admin template that is not just fast🚀and easy to use, but highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle. If you are working on any VueJS project, then this template can be helpful.
Furthermore, you can use this one of the best innovative free Vuetify VueJS admin templates to create eye-catching, high-quality, and high-performing single-page applications. Besides, your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices.
- 1 Simple Dashboard, 1 Chart Library
- Single vertical menu
- Simple Light/Dark theme
- Basic Cards, pages, and tables
- Simple From Elements⚡
- Single vertical menu
Check the Figma Version:
Vue Material Admin Template is a Vue Based Material Design Admin Template. This template uses Vuetifyjs as the base framework. If you are looking for the best Vuetify Examples then this can be the one you can take inspiration from. While working with Vuetify you can also check the Vuetify Admin Template Github for your project.
A fully-featured calendar, event, and scheduling library of components. It is a collection of components that visualizes DaySpan Calendars and Schedules using Vuetify. Besides, this library strives to offer all the functionality any modern calendar app could support and more.
Not only can this be used for calendar apps, but any application where the user wishes to control when events should occur within a system. It is one of the best Vuetify examples on the list. Furthermore, every feature of the library can be toggled with local and global settings, and all text can be localized. You may also check the Bootstrap admin template Github in case you are working with bootstrap.
Materio Vuetify Laravel Vuejs Admin Dashboard Template – is the latest most developer-friendly & highly customizable Admin Dashboard Template based on Vuetify. If you’re a developer looking for a Vuejs Admin Template enriched with features and highly customizable look no further than the Materio Vuetify Vuejs admin template. Besides, the highest industry standards are considered to bring you one of the best Vuetify admin templates that are not just fast and easy to use, but highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.
Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them. Furthermore, it comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. In addition, it offers amazing features as follows.
- Pure Vu.JS, No Jquery Dependency
- Integrated with Laravel
- Utilizes Vuex, Vue Router, Webpack
- Code Splitting, Lazy loading
- JWT Authentication
- Laravel Passport
- Laravel Sanctum
- Access Control (ACL)
- i18n Page
- Multi-lingual Support
- 2 chart libraries
- 3 Dashboard
- SASS Powered and many more.
You can check the VueJS Admin Template GitHub as well if you are working on a pure vuejs based app.
Tip tap is a Vuetify editor. Component simplifies the integration of tiptap editor with Vuetify.
- Used Vuetify components
- Ssupport for different types of icons
- Internationalization with automatic detection of the current language through Vuetify.
- Markdown support
- Easy to start using
- Props and events are available
- TypeScript support
Simple Web-based configuration generator for WireGuard.
- Self-hosted and web-based
- Automatically select IP from the network pool assigned to the client
- QR-Code for convenient mobile client configuration
- Sent email to the client with QR-code and client config
- Enable / Disable client
- Generation of
wg0.confafter any modification
- IPv6 ready
- User authentication (Oauth2 OIDC)
- Pretty cool look
An Electron and Nuxt.js / Vue.js quick start boilerplate with Vue-CLI scaffolding, electron-builder, unit/e2e testing, Vue-dev tools. Besides, It has the ability to easily package your electron app using electron-builder and many more.
- Auto-updating for easy development
- ES6/ES7 compilation without any extra work
- Typescript support [WIP](only in renderer process for now)
- Parallel code compilation
- Installed latest vue-devtools
A chat built with Vue + Vuex + Vuetify + Firebase. You can look up this Vuetify example on GitHub for inspiration. It will help you develop a chat app using Vuetify.
A Firebase-like theme built with Vuetify.
If you have to generate Forms or you have to edit Data presented as JSON- or JS-Objects, then take a closer look at Vuetify-Form-Base and try it. It is one of the best Vuetify Examples. Besides, this Vuetify project can make your work much easier and save you time. Also, this Form Generator works as a Vue.js 2.0 Component and can simplify your Work by automatically creating Forms, based on your Schema-Definition. Furthermore, it is one of the best Vuetify examples on the list.
In addition, if you don’t define a Schema, then Vuetify-Form-Base tries to generate a schema automatically. This works if the Data Values are of Type ‘string’, ‘number’, or ‘bool’.
Besides, it uses the well-known and excellent Component Framework Vuetify 2.0 to style and layout your Form. Vuetify Controls have a clear, minimalistic design and support responsive design. If necessary add specific layouts by using the implemented Vuetify Grid System.
Payshare is the equivalent of a whiteboard in the kitchen of your shared flat where everyone writes down how much he paid for groceries, who paid for the cinema ticket or pizza for whom, and so on, while it does the math for you to figure out who should buy the next round.
Furthermore, the project is built with Django 2.1, Django-REST-Framework 3, Vue 2.5, Vue-CLI-3, and the wonderful Vuetify 1.1.0. Besides, it is built mainly to be used on a mobile phone, but responsive and very usable on desktop as well. Technically it is a PWA, but right now that is only used to cache the app shell, not any API responses. It uses SQLite as its database, creating a single file for easy backup.
A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify. Besides, this project is a simple Todo PWA (Progressive Web App) inspired by TodoMVC. Furthermore, it is perfect to learn the basics about Vue.js, Vuex, and Vuetify technologies.
A swipe-out example built with Vue CLI 3 + Vuetify + Swiper.
- Vue CLI 3 + Webpack + Vue-loader for single file Vue component
- Hot-reload in development
- Lint-on-save with ESLint (Standard)
- Stylus CSS preprocessor
- Vuetify a-la-carte (reduce project’s size in production)
- Progressive Web App
- Service worker
- Workbox options – Cache Google Fonts
Free E-Commerce Website Theme. Besides, it has a clean and minimal design.
- Product details
A Todo Web App made for developers with Vuejs, Vuetify, and Firebase. Besides, a to-do list is based on Status: Ongoing, Complete, Overdue.
- Material Design
- Draggable Todo List
Interactive Vuetify Form Generator with Validation and Input Styling.
- Custom Regex Validation
- Validation with Vuelidate
- Validation with VeeValidate
- Configure Vuetify Loader
- Remove Single Field
With Cloudcsv, you can store all CSV file data in your database. Besides, it has a friendly UI. Furthermore, it also comes with user management, email notifications, and more. Cloud CSV uses Vue CLI + Vuex + Vuetify.
- Create a table
- Main app Settings
- Upload data
- Data Query
- CSV file data upload
- Define the file delimiter
- Get a report of data upload
PWA to track personal purchases, No more paper and pencil to go to the supermarket Vuetify 2.2 + Vue 2.6. Besides, it is also very intuitive and easy to use. More ever, it has a clean interface with few buttons. Furthermore, it also supports multi-languages.
- List of products
- Product categories
- Shopping history
- Shopping cart and many more.
EBMSoft is a software company profile Template built using Vue.js and Vuetify.
Idea hub is a collection of ideas and projects. Besides, it contains from beginner to advance using Vue + Vuetify.
- Desktop Application
- Machine Learning
A better one-tab extension built with Vuetify.
- Popup page with a simple list
- The basic feature of OneTab
- Pin tab list
- Keyboard shortcuts
- Drag and drop re-ordering
- Data and Options sync
- Import and Export
- Add stored tabs to the history
- I18N support (only English and Chinese currently)
An Admin Dashboard based on Vuetify material. This vuetify example is based on Material Design Style – Vuetify. Furthermore, it offers a dynamic Form Builder with text, text area, radios, checkboxes, select, HTML, input types, and JSON config. Also, it comes with a stylus processor. In addition, it also offers a data Grid with server-side sort, search, pagination, and JSON config. Also, there is a configurable side menu with JSON. Besides, it also comes with a built-in local storage proxy for any data type. Besides, it also comes with i18n with Vue i18 support.
- Vue + Vue Router + Vuex + Axios.
- Axios Mock with Axios mock adapter
- Basic and main layouts
Vuetify Module for Nuxt.js.
Vuetified is a laravel Starter App Using Vue, Vuetify, and InertiaJS. (Updated to Laravel 8.0). Besides, it is build on laravel echo (broadcasting real-time events), inertiajs (state), vuejs 2.6 + Vuetify 2.4 (UI), vform and vee-validate v2 (form handling), ziggy (routing on UI).
This Vuetify example is a Project Camp. It is a web application for Project management, CRM, Customer support, and Invoicing. Besides, it is developed using the Laravel PHP framework, Vuetify VueJS. Complete Project Management System (PMS), CRM, Support, and Invoicing application built with Vuetify and Laravel. Furthermore, it offers features like sales, Invoicing, Estimates, Drafts, Invoicing schemes, and many more. Also, it comes with an Inbuilt notification.
- Knowledge base
- Calendar and many more
Vue admin Vuetify is a Front-end component library project based on Vue.js using Vuetify. Need VPN proxy to view.
GenVue is a hostable, web application that lets confidential users upload and share private files. Furthermore, it is build on Net Core 2.0 + Vue.js + Vuex + OpenIddict + Vuetifyjs + EF + SQLServer/Postgress. Besides, the admin can manage users, users groups, file categories, check users’ activity logs.
- Full responsive app accessed by Web or WebAPI (eg. postman client)
- Role level permission (admin, manager, user)
- Besides, users can download files from groups they belong to
- Also, there is a role context page display.
So, here was the collection of the best 20+ Vuetify Examples GitHub 2022. Each Vuetify project is unique and offers useful features. Besides, you can take inspiration from each example to master your developing skills. Also, you can use them for your next Vuetify project.
Now, you’ll surely get many Vuetify examples across the internet. Although, the purpose here to make this collection is to save your precious time. So, save this collection so that you don’t need to waste your time searching here and there.
Although, if you are working on a professional project then you’ll going to need some features that are only available in premium templates. In that case, you can pick Materio Vuetify VueJS Admin Template. It is the best among Vuetify admin templates.
Also, do tell us in the comment section which one you like the most and suggest any other examples that can be included in the list.