As a Vue.js developer, initiating a new project can often prove difficult and time-intensive. Thankfully, Anthony Fu @antfu has developed a potent starting template named Vitesse, simplifying this task considerably. In this piece, we’ll delve into the details of Vitesse, why it warrants your consideration, and my preferred features and plugins.
As a Vue.js developer, initiating a new project can often prove difficult and time-intensive. Thankfully, Anthony Fu @antfu has developed a potent starting template named Vitesse, simplifying this task considerably. In this piece, we’ll delve into the details of Vitesse, why it warrants your consideration, and my preferred features and plugins.
Exploring Vitesse: Why You Should Give It a Shot
Vitesse is a ready-to-use Vue 3 template, packed with core functionalities and up-to-date plugins, designed to expedite your Vue.js project launch.
This template comprises a well-liked Vue 3 tech stack including Vite, TypeScript, Pinia, Vitest, and more. I will provide an in-depth discussion about these technologies later in this write-up. Being under MIT license, rigorously maintained, and supported by a vast and active community, Vitesse stands as a dependable and strongly backed choice for your project. Furthermore, Vitesse offers a multitude of variations that can cater to most of your requirements, and tailoring your own is a breeze. Even if you don’t leverage all of its capabilities, Vitesse can still enhance your development speed.
Variations of Vitesse
Vitesse stands out for its adaptability. It offers a wide range of variations to suit your project’s unique requirements. Moreover, you have the option to devise your own, and submit a PR to include it in the official list! Here are some widely-used variations:
- Lite Edition – Ideal for those seeking a streamlined setup, this version omits features like i18n, layouts, SSG, PWA, and markdown to offer you a more compact project.
- vitesse-nuxt3 – This version combines Vitesse’s potent utility library and is pre-set for use with Nuxt 3, offering an added level of convenience.
- vitesse-ssr-template – This is Vitesse, enhanced with SSR.
- Vitesse-Enterprise Variant – This version is designed for enterprise-scale applications. It includes features such as husky for pre-commit standard checking, additional format and lint options, SCSS support, GitHub actions, deployment on Vercel, alias @ for <rootDir>, separation of concerns, and numerous other features.
- Vitesse-Stackter-Clean-Architecture Variant – This version is tailored for developers favoring a clean, modular architecture pattern over a monolithic one. It provides a clean, modular architecture pattern that enhances the maintainability and scalability of your code.
As for UI libraries, Vitesse aligns with many well-liked libraries like TailwindCSS, Element Plus, Bootstrap, and Ant Design Vue. A complete list of variations can be found here.
Vitesse plugins and features
Vitesse’s VueUse
VueUse, a feature of Vitesse, revolutionizes the use of Vue’s composition API by offering more than 200 pre-built utilities. Some of these features are even rendered as components, saving developers valuable time by eliminating the need for extensive implementation and unit testing. VueUse also serves as an invaluable learning resource for creating composables. You can delve into their source code or consult the official guides in their documentation. Here are a few impressive features that could save you a lot of time.
- Time functions – useDateFormat facilitates easy date formatting, and useTimeAgo automatically updates the ‘time ago’ string as time changes.
- @vueuse/head – An excellent solution for dynamically altering your HTML <head> tag. Using useHeadSafe allows you to securely pass inputs and limit values for optimal security.
- useRefHistory – This allows you to track changes in reactive data, complete with undo/redo functionality! ?
- useDraggable – This makes elements draggable and allows component usage props like storageKey and storageType to be passed to the component, thereby maintaining the element’s position.
- @vueuse/motion – This API offers simple yet robust functionalities to help you add animations with minimal coding. It facilitates animation scripting with two methods, from the template with directives or from the script with composables. You can also create your own custom directives.
- Elements methods – In addition to useDraggable, there are various useful methods like useMutationObserver to monitor changes in the DOM tree, useMouseInElement for reactive mouse positioning relative to an element, useDropZone for file drop, useWindowSize for reactive windows size, useWindowScroll for reactive x and y scroll values, useDocumentVisibility for tracking Document.visibilityState and many more.
- Browser functions – There are a host of functions like useBluetooth, useBreakpoints, useBrowserLocation, useClipboard, useCssVar, useEventListener, useFileSystemAccess, useFullscreen, and webWorkers utilities, just to name a few.
- Sensors – You can use useBattery, device motion & orientation & pixel ratio, useGeolocation, useInfiniteScroll, usePageLeave, speech recognition & synthesis, parallax, idle, and many more.
- State – Includes features such as createGlobalState, injectionState, Reactive LocalStorage/SessionStorage + others
- Network – Features such as useFetch for aborting requests, intercepting requests before they’re sent, automatic refetching of requests when the URL changes, useWebSocket – Reactive WebSocket client, useEventSource.
- There are many more functions under categories such as Animations, Component, Watch, Reactivity, Array, Utilities, @Electron, @Firebase, @Integrations, @Math, @Motion, @Router, @RxJS, @SchemaOrg and @Sound, and even Firebase or Math, but I cannot cover them all here due to space constraints.
Vue Macros
Up next is the remarkable tool, vue-macros, which offers syntactic enhancements and fresh macros for Vue 3. I’ll be your coding wizard, presenting examples that will leave you astounded (in a positive sense, of course).
- defineModel() – If the implementation of two-way binding props in Vue continues to puzzle you, take heart! Vue macros come to the rescue. The defineModel() macro enables you to achieve this task in just one line of code. This not only trims down your lines of code but also enhances code comprehensibility and eradicates redundancy.
- definePropsRefs() -> destructure props safely
- defineProps() -> imported types are supported in <script setup> type-based-macros
- defineOptions() -> allows you to define component options inside <script setup>
Vitesse testing
Next, let’s delve into testing. Vitesse is pre-packaged with both Cypress and Vitest, along with sample tests to get you up and running swiftly. What makes it a top pick? Its utilities cater to an extensive array of use cases, from examining Vue components’ behavior to testing stores and API interactions. Furthermore, Vitesse is engineered with a focus on test-driven development. For instance, the library incorporates a test runner that can expediently execute all tests or only specific ones, and a test watcher that automatically runs tests as code modifications are made. Its ease of use and comprehensive documentation also make it straightforward for developers to start using it.
Cypress is also included. A renowned modern tool for E2E testing, it boasts features like a potent test runner, automatic waiting, and real-time reloading. It also offers an intuitive API and powerful test recording capabilities.
Additional remarkable 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 support for importing Markdown. The vite-plugin-vue-inspector allows automatic navigation to the local IDE when you click a browser element, and vite-plugin-vue-layouts facilitates efficient layout management.
Embracing Vitesse – a seamless Vue 3 project experience
All in all, Vitesse stands out as a remarkable starter template for Vue 3 initiatives, presenting a wide spectrum of features and plugins to satisfy a variety of needs and tastes. Its versatility, compatibility with well-known UI libraries and inclusion of powerful tools such as VueUse and vue-macros make it a must-have for any Vue.js developer. What’s more, with built-in testing tools such as Cypress and Vitest, you can verify the robustness and reliability of your code. At Applover Software House, we’re curious to test Vitesse and discover even more efficient and streamlined Vue capabilities.
