DEV Community

Léo Guillaume (Dibodev)
Léo Guillaume (Dibodev)

Posted on

One Vue app, three homes: desktop with Tauri, Android with Capacitor, and the web

#tauri #rust #vue #webdev

I wanted a Reddit client that lived on my desktop and my phone — without maintaining two separate apps. So I built one Vue app and gave it three homes: Tauri (Rust) wraps it as a desktop app for Windows/macOS/Linux, Capacitor wraps it for Android, and it still runs as a plain web app. One UI, one set of Reddit API calls, one OAuth flow — three targets.

It works. But "just wrap your web app" hides a few things. Here's the reality.

The shape

  • A single Vue.js frontend: the whole UI, the Reddit API calls, the OAuth.
  • Tauri for desktop — the webview is the OS's native one, the backend is Rust.
  • Capacitor for Android — desktop got Tauri, Android got Capacitor. Use the wrapper that's mature for each target instead of forcing one tool everywhere.
  • Plain web for anyone who just wants a URL.

Gotcha 1: you can't cross-compile

You cannot build a Windows .msi on your Mac. Tauri leans on each platform's native toolchain:

  • .msi / .exe → built on Windows
  • .dmg / .app → built on macOS
  • .deb / .AppImage → built on Linux

"Ship for all platforms" really means a CI matrix with one runner per OS. Plan for it early — it shapes your whole release pipeline.

Gotcha 2: WebView2 on older Windows

Tauri doesn't ship a browser engine; it uses the system webview. Windows 11 has WebView2; Windows 7–10 might not — and a missing webview means users open the app to a blank white window. Bundle the WebView2 bootstrapper in your installer so it self-installs. Tiny detail, terrible first impression if you miss it.

Gotcha 3: OAuth redirect is the fiddly part

In a browser, OAuth is easy: Reddit redirects to your callback URL, you read the code, done. In a packaged app there's no web server at that URL. So you register a custom scheme / deep link, let the OS hand the redirect back to the app, and pull the code out of the incoming URL — on desktop and Android, each with its own quirks. Easily the most time-consuming part, and the bit tutorials skip.

Gotcha 4: a default Rust release binary is chunky

A handful of Cargo.toml flags make a real dent:

[profile.release]
panic = "abort"      # drop the unwinding machinery
codegen-units = 1    # compile as one unit so the optimizer can do more
lto = true           # link-time optimization
opt-level = "s"      # optimize for size
strip = true         # strip symbols from the binary
Enter fullscreen mode Exit fullscreen mode

Free size win, no code changes.

Was it worth it?

Yes. One Vue codebase, native apps on desktop and Android, plus a web version — without three projects to keep in sync. If you're a web dev eyeing desktop/mobile, Vue + Tauri + Capacitor is a very reasonable way in — just budget time for the packaging and OAuth reality, not the happy-path demo.

I do this kind of cross-platform / custom-tooling work as a freelance dev at dibodev.fr. Happy to get into the OAuth deep-linking or the CI matrix in the comments.

Top comments (0)