Vite Tauri Template

screenshot of Vite Tauri Template
vite
vue
scss
vuetify

Tauri + Vite + Vue 3 + Vuetify 3 desktop app template

Overview

The Vite Tauri Desktop Application Template is a starter template designed for creating a desktop application using web technologies. It utilizes a stack consisting of Vite.js, Tauri, Vue 3, and Vuetify 3. Vite.js is a fast JavaScript bundler with sensible defaults, Tauri allows web apps to be converted into desktop apps for various platforms, Vue 3 is an incremental frontend framework with improved features, and Vuetify 3 is a component library for Vue 3.

Features

  • Blazing Fast Bundling: Vite.js is a modern bundler for JavaScript that offers exceptional speed.
  • Desktop App Conversion: Tauri enables the transformation of web apps into efficient desktop applications for multiple platforms.
  • Improved Frontend Framework: Vue 3 provides an excellent frontend framework with a range of improvements including the Composition API and dynamic CSS binding.
  • Versatile Component Library: Vuetify 3 offers a comprehensive collection of premade components that make application development easier and enjoyable.

Development

There are two ways to develop your app using the Vite Tauri template:

  1. Browser Development: Launch Vite in the browser using the following command:
yarn serve

This will allow you to test and develop your app in the browser at http://localhost:8080.

  1. Tauri Window Development: To develop in a Tauri window, follow these steps:
  • Open two terminal windows.
  • In the first terminal, run the following command to launch Vite and configure Unified Network to use Tauri for API calls:
yarn serve:tauri
  • In the second terminal, run the following command to launch the Tauri window and view your app:
yarn serve:native

Please note that there are two main differences between development in the browser and in the Tauri window:

  • The entity executing the HTTP calls: In the browser, you are subject to CORS rules, while in Tauri mode, Tauri's native module performs the HTTP calls, bypassing CORS issues.
  • The renderer engine: In the browser, the latest modern engine is typically used, but in Tauri, the OS's web engine is utilized, which may not be as advanced as modern browsers.

Building

To build your web application and package it with Tauri, use the following command:

yarn build

This will create the packaged application in the "./src-tauri/target/releases" directory.

Summary

The Vite Tauri Desktop Application Template provides a convenient starting point for developing desktop applications using web technologies. It offers a fast bundler, the ability to convert web apps to desktop apps, and the benefits of Vue 3 and Vuetify 3. The installation process is straightforward, and there are options for developing in both the browser and a Tauri window. Building the application is also made easy with a simple command. Overall, this template is a valuable resource for those looking to create desktop applications efficiently.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

vuetify
Vuetify

Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.