Elevate Your Vue 3 Projects: 6 Awesome Vite-powered templates

If you are a Vue.js developer then you are definitely familiar with the 2 popular ways of setting up a Vue project. Either by using the Vue CLI or by using Vite.

Vite has gradually emerged as a popular choice among web developers for its faster build times, seamless integrations, and it’s ease of use. Vite is a modern build tool that was created specifically for the needs of modern web development.

But did you know that with the help of the Vue.js ecosystem, Vite offers some amazing templates to quickly get you started on creating your perfect web development project. Whether you are looking to create a web application, desktop application or mobile application, these templates guarantee a quick start to your dream Vue.js powered project.

In this article, we will explore a few of these templates.

let’s get started!

Vitesse: Unleash the Speed!

First up, we have Vitesse, the ultimate Vue and Vite starter template designed by the one and only Anthony Fu. This template is a technological masterpiece, incorporating cutting-edge technologies that will make your jaw drop:

• UnoCSS - Brace yourself for the instant, on-demand atomic CSS engine that will blow your mind.
• Iconify - Get access to a vast universe of icons from any icon sets you can imagine.
• Pure CSS Icons via UnoCSS - Elevate your designs with a treasure trove of pure CSS icons.
• Vue Router - Unleash the power of file system-based routing with vite-plugin-pages and vite-plugin-vue-layouts.
• Pinia - Dive into the intuitive, type-safe, light, and flexible store for Vue, powered by the composition API.
• ESLint with @antfu/eslint-config - Experience coding nirvana with a meticulously crafted ESLint configuration.

And that's just the tip of the iceberg! Vitesse is stacked with feature:

• ⚡️ Vue 3, Vite, pnpm, esbuild - The ultimate stack designed for speed demons.
• 🗂 File-based routing - Say goodbye to tedious manual routing setups.
• 📦 Components auto importing - Let the magic happen as your components magically appear where they're needed.
• 🍍 State Management via Pinia - Keep your state in check with the power of Pinia.
• 📑 Layout system - Say hello to organized and reusable layouts for your pages.
• 📲 PWA - Transform your web app into a progressive web app with ease.
• 🎨 UnoCSS - Experience the future of atomic CSS with instant, on-demand styles.
• 😃 Use icons from any icon sets with classes - Unlock a world of icons and add them effortlessly with simple classes.
• 🌍 I18n ready - Prepare your app for global domination with internationalization support.
• 🔎 Component Preview - Get a sneak peek of your components with a built-in preview feature.
• 🗒 Markdown Support - Unleash your creativity and document your code with Markdown.

And that's just scratching the surface! Brace yourself for the speed, power, and convenience that Vitesse brings to the table.

Installation:

To harness the full power of Vitesse, follow these simple steps:

npx degit antfu/vitesse my-vitesse-app

cd my-vitesse-app

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

fast-crud: Empower Your CRUD Journey

If you're ready to embark on a lightning-fast CRUD journey, fast-crud is your ticket to success. This options-oriented crud development framework, based on Vue 3, will supercharge your development process. Fast-crud offers an abundance of features:

• Options-oriented crud programming - Say goodbye to repetitive code and embrace the power of options-oriented programming.
• Data Dictionary - Unlock the potential of data dictionaries and make your data management a breeze.
• Extends - Extend fast-crud's functionality and tailor it to your specific needs.
• Multi UI support - Enjoy the freedom to choose the UI library that best fits your project, with support for Vite, Vue 3, Ant-design System, Element Plus, and NaiveUI.

Installation:

To embark on your fast-crud adventure, follow these steps:

git clone https://gitee.com/fast-crud/fast-crud.git

# run antdv demo
cd fast-crud/packages/demo-antdv

# or run element demo
cd fast-crud/packages/demo-element

# run
npm install
npm run demo

Vite Tauri Template: Unleash the Power of the Desktop

Do you dream of taking your web apps to the desktop realm? Look no further because Vite Tauri Template is here to make your dreams come true!

Tauri, the modern technology behind this template, can transform your web apps into desktop apps for multiple platforms like Windows, macOS, Linux, and soon, even Android and iOS.

Brace yourself for the power-packed stack that awaits you:

• Vite - The lightning-fast build tool that will leave you in awe.
• Vue 3 - The framework that needs no introduction.
• Tauri - The magic behind turning web apps into desktop apps.
• Vuetify 3 - Elevate your designs with the iconic Vuetify library.

Installation:

Before embarking on your desktop adventure, make sure to set up your workspace according to Tauri's Getting Started guide.

Once you're ready, follow these steps:

1. Clone the repository:
   • git clone https://github.com/yooneskh/vite-tauri-template app-name
   • yarn (or npm install, but yarn is preferred)
2. Customize the following files according to your app:
   • .index.html
   • ./package.json
   • ./public/favicon.svg
   • ./src-tauri/icons/*
   • ./src-tauri/tauri.conf.json

Ionic-Vue-Capacitor: The Cross-Platform Marvel

Tauri has shown you the power of desktop apps, but what about mobile apps?

Introducing Ionic, a game-changer that allows web developers to create cross-platform mobile apps for both iOS and Android from a single codebase.

With Ionic-Vue-Capacitor, you can effortlessly harness the power of Vue 3 and Ionic without the hassle of setting up both technologies separately. Prepare to be amazed by what this template offers:

• Ionic framework - Your one-stop shop for mobile UI and seamless integrations.
• Cross-platform compatibility - Build your app once and deploy it on both iOS and Android platforms.
• Vue 3 - The beloved Vue framework at your fingertips.

Installation:

To start your adventure with Ionic-Vue-Capacitor, follow these steps:

// Clone the repository
git clone https://github.com/reslear/ionic-vue-capacitor.git

Please make sure to read the Ionic documentation to familiarize yourself with using Ionic. It's also recommended to use VSCode and the Volar Extension for an enhanced development experience.

Vitequality: Test-Driven Development Excellence

As web developers, building robust applications for our users is paramount. That's why writing tests and ensuring code quality are essential parts of the software development process.

Vitequality is here to help you achieve testing excellence. This Vite scaffolded project, combined with Vue 3 and Typescript, comes equipped with a suite of powerful tools, reminiscent of a VUE CLI project.

Here's a taste of what awaits you:

• Vue Router - Seamlessly navigate between different views with Vue Router.
• Pinia - Unlock the power of intuitive, type-safe, and flexible store management using the composition API.
• ESLint - Ensure high code quality with ESLint and additional plugins.
• Jest - Embrace unit testing and boost your confidence in your codebase with Jest and Vue Testing Library.
• Cypress - Take your testing game to the next level with end-to-end testing using Cypress.

Installation:

To embark on your journey of code quality and testing excellence, follow these steps:

// Clone the repository
git clone https://github.com/cstuncsik/vitequality.git

cd vitequality

// Install dependencies
yarn install

// Start the development server
yarn dev

Ultimate Vue3 + Vite + TS base: Your Solid Foundation

Are you ready to experience the ultimate Vue 3 starter template? This Vite and Vue 3 template is a force to be reckoned with. Loaded with powerful technologies like Vue Router 4, TypeScript, and Pinia, it provides a solid foundation for your projects.

And that’s not all. Brace yourself for an array of features that will elevate your development process:

• Latest Vue3.2.37 - Latest vue & requirements.
• Localizations - i18n Ready.
• Router System - Vue router V4.
• Mixins - Vue mixins are configured.
• Enviroments - Development and production .env files.
• Git - Vue gitignore and README with MIT license.
• Unit test - Vitest for component testing.
• Docs - Vitepress for documentations.
• Lodash & Axios - Lodash/axios are pre installed.
• State Management - Pinia is used for state management.
• Vue Router 4 - Vue router 4 is used for routing.
• Lazy Load - Components are lazy loaded in routes.
• Logger - Basic logger plugin.
• Validator - Validator plugin to validate inputs.
• Build ready - Build configs are all set.
• Less - Less is installed and configured.

Installation and usage

To build your project on a solid foundation, follow these steps:

git pull

npm install

// start the development server
npm run dev

// build for deployment
npm run build

// run test with exit code
npm run test

// test with uni
npm run test:ui

// start docs development server
npm run docs:dev

// build docs for deployment
npm run docs:build

To conclude, we’ve looked at some of the most amazing Vue 3 templates available with Vite. You can discover a lot more of these awesome templates in the awesome-vite collection.

Remember, these templates are just the beginning. The Vue ecosystem is constantly evolving, so keep exploring, experimenting, and pushing the boundaries of what you can achieve. Happy coding!