As a Vue.js developer, the process of setting up a new project can often be challenging and time-consuming. Fortunately, @antfu has created a powerful starter template called Vitesse to make this task much more manageable. In this article, we will examine Vitesse in detail, explore why you should consider using it, and delve into my favorite features and plugins.

What is Vitesse, and Why Should You Try It?

Vitesse is a pre-built Vue 3 template that offers core features and modern plugins out of the box, making it simple and straightforward to kickstart your Vue.js project. 

The template includes a popular Vue 3 tech stack consisting of Vite, TypeScript, Pinia, Vitest, and more. I will cover these technologies in greater detail later in this article. It is MIT licensed, firmly maintained, and has a large and active community, making it a reliable and well-supported option for your project. Additionally, Vitesse offers many variations that can fit most of your needs, and creating your own is effortless. Even if you don’t use all of its features, Vitesse can still increase your development time.

Vitesse variations

One of the advantages of Vitesse is its flexibility. It has many variations to choose from, depending on your project’s needs. You can also create your own, and PR to add it to the official list! Here are some of the popular variants:

  • Lite Version – This variant is perfect if you’re looking for a minimal setup. It removes some features like i18n, layouts, SSG, PWA, and markdown to give you a leaner project.
  • vitesse-nuxt3 – This variant provides all the benefits of Vitesse’s powerful utility library with the added convenience of being pre-configured for use with Nuxt 3.
  • vitesse-ssr-template – Vitesse with SSR.
  • Vitesse-Enterprise Variant – This variant is for enterprise-level applications. It comes with features like husky for pre-commit standards checking, more format and lint options, SCSS support, GitHub actions, deployment on Vercel, alias @ to <rootDir>, separation of concerns, and many other features.
  • Vitesse-Stackter-Clean-Architecture Variant – This variant is for developers who prefer a modular clean architecture pattern over a monolithic one. This variant offers a modular clean architecture pattern that makes your code more maintainable and scalable.

Regarding UI libraries, Vitesse is compatible with many popular libraries like TailwindCSS, Element Plus, Bootstrap, and Ant Design Vue. Full list of variations you can find here.

Vitesse features and plugins

VueUse

Vitesse’s VueUse is a game-changing utility for Vue’s composition API, providing over 200 pre-made utilities. Some features are even available as renderless components, eliminating the need for time-consuming implementation and unit testing. Vueuse is also an excellent resource for learning how to write composables. You can dive into their source code or follow the official guides available in their documentation. Here are a few powerful features that can save you valuable time. 

  • Time functions – format dates easily with useDateFormat, or automatically update the time ago string with useTimeAgo as the time changes.
  • @vueuse/head – the perfect solution to dynamically change your HTML <head> tag with ease. With useHeadSafe, you can safely pass inputs and restrict values to ensure maximum security.
  • useRefHistory – track changes for reactive data. Ships with undo/redo functionality! 🔥
  • useDraggable – Make elements draggable. Additionally as component usage props storageKey and storageType can be passed to the component and enable the persistence of the element position.
  • @vueuse/motion – Simple and powerful API that aims at helping you add animations with few lines of code. It lets you write animations with two methods, from the template with directives or from the script with composables. You can also create your own custom directives.
  • Elements methods – besides useDraggable there are many useful methods such as – useMutationObserver that let you watch for changes being made to the DOM tree, useMouseInElement – Reactive mouse position related to an element, useDropZone for file drop, useWindowSize – reactive windows size, useWindowScroll – reactive x and y scroll values, useDocumentVisibility – for tracking Document.visibilityState and that’s not even all elements method you can use.
  • Browser functions – such as useBluetooth, useBreakpoints, useBrowserLocation, useClipboard, useCssVar, useEventListener, useFileSystemAccess, useFullscreen, and webWorkers utilities, and those just a few interesting ones.
  • Sensors – useBattery, device motion & orientation & pixel ratio, useGeolocation, useInfiniteScroll, usePageLeave, speech recognition & synthesis, parallax, idle, and much more
  • State – createGlobalState, injectionState, Reactive LocalStorage/SessionStorage + others
  • Network – useFetch for abort requests, intercept requests before they are fired, automatically refetch requests when the URL changes, useWebSocket – Reactive WebSocket client, useEventSource
  • I can’t cover them all because this article would be too long, but there are also other functions categories such as Animations, Component, Watch, Reactivity, Array, Utilities, @Electron, @Firebase, @Integrations, @Math, @Motion, @Router, @RxJS, @SchemaOrg and @Soundand even firebase or math.

Vue Macros

Next, we have vue-macros impressive tool, which provides syntactic sugar and new macros for Vue 3. I’ll be your code magician and dazzle you with examples that’ll make your head spin (in a good way, of course).

  • defineModel()  – If you’re still struggling to remember how to implement two-way binding props in Vue, fear not! Vue macros are here to save the day. With the defineModel() macro, you can accomplish this task in a single line of code. Not only does this save you a few lines of code, but it also improves code readability and eliminates duplication. 

Equivalent code in Vue.js:

  • definePropsRefs() -> destructure props safely 

Equivalent code in Vue.js:

  • defineProps() ->  imported types are supported in <script setup> type-based-macros

Equivalent code in Vue.js (note that it throws compiler error):

  • defineOptions() -> allows you to define component options inside <script setup>

Equivalent code in Vue.js:

  • Additionally, the reactivity transform is excellent for those who are tired of using the ref syntax ‘.value.’ 

Vitesse testing

Now, let’s dive into testing. Vitesse comes pre-configured with both Cypress and Vitest, complete with example tests to help you get started quickly. Why is it a good choice? Its utilities cover a wide range of use cases, from testing the behavior of Vue components to testing stores and API calls. Moreover, Vitesse is designed with test-driven development in mind. For example, the library includes a test runner that can quickly run all tests or only specific tests and a test watcher that automatically runs tests as code changes are made. It’s also easy to use and well-documented, making it easy for developers to get started.

Also, Cypress is included. It’s a popular modern tool for E2E testing with tools and features like a powerful test runner, automatic waiting, and real-time reloading. With its intuitive API and robust test recording capabilities.

Other great features include file-based routing, SSR and PWA, auto-import (for components and APIs), Critters for inlining critical CSS and lazy-loading the rest, and Markdown import support. Vite-plugin-vue-inspector provides the ability to automatically jump to the local IDE when you click an element of the browser, vite-plugin-vue-layouts for efficiently managing layouts.

Contact

Would you like to discuss front-end development opportunities?

Talk to us!

Embracing Vitesse – a seamless Vue 3 project experience

In conclusion, Vitesse is an exceptional starter template for your Vue 3 projects, offering a wide array of features and plugins that cater to various needs and preferences. Its flexibility, compatibility with popular UI libraries, and the inclusion of powerful utilities like VueUse and vue-macros make it a must-try for every Vue.js developer. Additionally, with integrated testing tools like Cypress and Vitest, you can ensure the quality and reliability of your code. Give Vitesse a try and experience a more streamlined, efficient, and enjoyable Vue development process.