Nuxt Tauri

🇬🇧 English

🇫🇷 Français

🇬🇧 English

🇫🇷 Français

Nuxt TauriVue composables for Tauri API

Seamlessly integrate Tauri's powerful desktop capabilities into your Nuxt applications

Get Started
View on GitHub
Nuxt Logo
⚡

Zero Configuration

Works out of the box with sensible defaults. No complex setup required for instant productivity.

🔄

Reactive Composables

Leverage Vue's reactivity system with useTauriInvoke and useTauriEvent for seamless state management.

�

TypeScript Ready

Full TypeScript support with auto-completion, type checking, and IntelliSense for better DX.

🛡️

Error Handling

Built-in error handling and loading states for better user experience and debugging.

🎯

Auto-imports

Composables are automatically imported in your Nuxt application. No manual imports needed.

🌐

Universal

Works seamlessly in both Tauri desktop and browser environments with graceful fallbacks.

🚀 Quick Start ​

Install the module in your Nuxt project:

bash
npm install nuxt-module-tauri

Add it to your nuxt.config.ts:

typescript
export default defineNuxtConfig({
    modules: ["nuxt-module-tauri"],
});

Use the composables in your components:

vue
<script setup>
const { data, pending, error } = useTauriInvoke("get_user", { id: 1 });
</script>

<template>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else>Welcome {{ data.name }}!</div>
</template>

🎯 Why Choose Nuxt Tauri? ​

  • 🔥 Performance: Leverages Rust's performance with Vue's reactivity
  • 🛠️ Developer Experience: TypeScript support with auto-completion
  • 📦 Zero Config: Works immediately after installation
  • 🌍 Universal: Runs in both desktop and web environments
  • 🔒 Type Safe: Full TypeScript integration with Tauri commands

Quick Example ​

vue
<template>
    <div>
        <button @click="execute" :disabled="pending">
            {{ pending ? "Loading..." : "Get User Data" }}
        </button>

        <div v-if="error" class="error">Error: {{ error.message }}</div>

        <div v-if="data">
            <h3>Welcome, {{ data.name }}!</h3>
            <p>Email: {{ data.email }}</p>
        </div>
    </div>
</template>

<script setup>
interface User {
  name: string
  email: string
}

const { data, pending, error, execute } = useTauriInvoke<User>('get_user')
</script>

Installation ​

bash
npx nuxi module add nuxt-module-tauri
bash
pnpm add @tauri-apps/api

That's it! Start building amazing desktop applications with Nuxt and Tauri.