はじめに Tauri の宣伝

皆さん Tauri をご存知ですか？
超意訳すると超軽量版 Electron です。

RC版が出たと騒がれていたので触ってみると、まさに私が求めていたもの！
正直、これからのデスクトップ向けアプリはこれでいいのでは？（Web屋さんの感想）
と思うほどでした。

とにかく軽量なのが偉い。
Rustという言語が取っつきにくい場合、ブラウザの世界でコードを書くことも可能ではあるので、ぜひお試しあれ。

electron はビルド周りがゴチャっとしてて、生成ファイルが大きすぎるのが、個人的バットポイント。

Vue Devtool が使えない！

Windows での Tauri は、WebView2 という内部ブラウザを使用してレンダリングします。
これが曲者で、拡張機能が使用できない...

つまり Vue 開発の味方 Vue Devtools が使えないのです；；
（知らない方は損しすぎなので、とりあえずDL！）

拡張機能の議論はこのあたり。
あんまり乗せる気は無さそう...

Add Ons or Extensions with WebView2 · Issue #98 · MicrosoftEdge/WebView2Feedback
https://github.com/MicrosoftEdge/WebView2Feedback/issues/98

色々検索しても対策がヒットせず、途方に暮れて拡張機能のDocに迷い込みました。
すると standalone 版があるではないですか！

きたこれ！
（昔こんなの無かった気がするんだが？？）

standalone Vue Devtools

とりあえずグローバルに yarn でインストールする。
npm マンは npm install に読み替えて。

# グローバルにインストール
$ yarn add --global -D @vue/devtools

# 起動
$ yarn vue-devtools

なんか出てきた。

<script src="http://localhost:8098"></script>
を埋め込めとおっしゃっている。

Vue の場合

index.html に script を埋め込む。

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>Vite App</title>
    <script src="http://localhost:8098"></script>
  </head>
  ...

Nuxt3 の場合

nuxt.config.ts に script を埋め込む。

&& 演算を使って、production のときだけコードを記載するようにする。
2でも似たような感じで。

const isProduct = process.env.NODE_ENV === 'production'

export default defineNuxtConfig({
  ...
  app: {
    head: {
      script: [
        !isProduct && { src: 'http://localhost:8098' },
      ],
    },
  },
}

多分どこに埋め込んでも問題ないので、いい感じにやればOK。

その後 $ yarn tauri dev でアプリを起動すると。。。

！！！

！！！！！

おわりに

リリース時にはこのコードが載らないようにしましょう！！！
そのまま残したら立派なセキュリティホールです。
process.env.NODE_ENV を使って、開発モードが production ではない時だけ埋め込むのが賢そう。

良き Tauri Vue ライフを🙌