Initializing the Tauri Project

Begin by creating a new Tauri project using the official CLI tool.

pnpm create tauri-app

During the interactive setup:

• Specify a project name, e.g., desktop-client.
• Select the TypeScript / JavaScript frontend option.
• Choose your preferrred package manager (e.g., pnpm).
• Select vue as your UI framework.
• Choose either TypeScript or JavaScript.

After creation, navigate into the project directory and install dependencies.

cd desktop-client
pnpm install
pnpm tauri dev

Integrating Quasar UI Framework

Add Quasar and its required dependencies to the project.

pnpm add quasar @quasar/extras
pnpm add -D @quasar/vite-plugin sass@1.32.12

Configure Quasar in the main application entry point (e.g., main.ts).

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

// Import Quasar styles
import '@quasar/extras/material-icons/material-icons.css';
import 'quasar/dist/quasar.css';

import { Quasar } from 'quasar';
import { Notify } from 'quasar';

const appInstance = createApp(App);

appInstance.use(Quasar, {
  plugins: {
    Notify,
  },
  config: {
    notify: { /* Notification configuration */ },
  },
});

appInstance.mount('#app');

Update the Vite configuration (vite.config.ts) to include the Quasar plugin.

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    quasar({
      sassVariables: 'src/quasar-variables.sass',
    }),
  ],
  // ... additional Vite/Tauri configuration
});

Settting up State Management with Pinia

Install Pinia and create the application store.

pnpm i pinia

// store/index.ts
import { createPinia } from 'pinia';

const applicationStore = createPinia();

export default applicationStore;

Import and use the store in main.ts.

// main.ts
import applicationStore from './store';

appInstance.use(applicationStore);

Configuring HTTP Requests with Axios

Add Axios and create an API service instance.

pnpm i axios

// api/httpClient.ts
import axios from 'axios';

const httpService = axios.create({
  baseURL: 'http://localhost:7777/',
  timeout: 120000,
});

// Request interceptor
httpService.interceptors.request.use(
  (config) => {
    // Add authorization headers or other modifications here
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Response interceptor
httpService.interceptors.response.use(
  (response) => {
    // Process response data
    return response.data;
  },
  (error) => {
    // Handle errors globally
    return Promise.reject(error);
  }
);

export default httpService;

Attach the HTTP service to the global Vue application properties for easy access.

// main.ts
import httpService from './api/httpClient';
declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof httpService;
  }
}

appInstance.config.globalProperties.$http = httpService;

Adding Vue Router for Navigation

Install Vue Router and define application routes.

pnpm i vue-router

// router/routes.ts
import { createRouter, createWebHistory } from 'vue-router';

export const routeDefinitions = [
  {
    path: '/login',
    name: 'Login',
    meta: { title: 'Login', requiresAuth: false },
    component: () => import('../components/LoginComponent.vue'),
  },
  {
    path: '/',
    name: 'Dashboard',
    meta: { title: 'Home', requiresAuth: true },
    component: () => import('../components/home/Dashboard.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: routeDefinitions,
});

export default router;

Integrate the router into the main application.

// main.ts
import router from './router/routes';

appInstance.use(router);

Configuring Path Aliases in Vite

Install Node.js types and configure path aliases in the Vite configuration for cleaner imports.

pnpm add @types/node -D

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    quasar({
      sassVariables: 'src/quasar-variables.sass',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@assets': resolve(__dirname, './src/assets'),
      '@views': resolve(__dirname, './src/views'),
      '@components': resolve(__dirname, './src/components'),
    },
  },
  // Tauri-specific Vite settings
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
  },
});