はじめに

備忘録&Nuxt3で実装するtauriアプリケーションの例があまりなかったので記事にしてみました。
自身の環境に導入する際は以下の記事を参考にさせて頂きました。

参考：

tauriの導入

この手順は既存でいくらでもあると思うので省略。
以下のtauri公式を参考にtauriインストール。

$ yarn create tauri-app
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-tauri-app@3.4.0" with binaries:
      - create-tauri-app
✔ Project name · tauri-nuxt3-tailwind-rome-template
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · yarn
✔ Choose your UI template · Vanilla
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-nuxt3-tailwind-rome-template
  yarn
  yarn tauri dev

Done in 79.90s.

以下、作成したtauriプロジェクト「tauri-nuxt3-tailwind-rome-template」をルートディレクトリとして進めていく。

tauri実行

yarn tauri devをコマンド入力すると以下のエラーが発生する。

$ yarn tauri dev
yarn run v1.22.19
$ tauri dev
     Running BeforeDevCommand (`yarn dev`)
$ vite
'vite' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.

なのでviteをインストール。

$ yarn add -D vite

もう一度yarn tauri devを入力するとコンパイルが始まりtauriが起動する。

「Welcome to Tauri!」

Nuxt3導入

ここから本番。
tauriが起動するのを確認したらNuxt3プロジェクトを作成し、tauriフロントエンド側に適用していく。

まずはルートディレクトリでNuxt3プロジェクト作成。

npx nuxi init nuxt3project

現在のディレクトリ構成

次に以下のディレクトリ・ファイルを削除。
・ルートディレクトリ直下の「src」
・ルートディレクトリ直下の「index.html」
・ルートディレクトリ直下の「tsconfig.json」

↑上記削除後、先ほど作成したNuxt3プロジェクト「nuxt3project」を「src」にリネームする。

こんな感じのディレクトリ構成になるはず

次に「src」の中にある以下のファイルについて、ルートディレクトリ直下に移動、もしくは同ファイルに内容を転記していく。
移動
・nuxt.config.ts
・tsconfig.json

転記
・.gitignore
・package.json

転記後に削除（いずれもsrcディレクトリの中）
・「public」ディレクトリ
・.gitignore
・package.json
・.npmrc
・README.md

転記後のファイルの中身

「package.json」

pakage.json

{
  "name": "tauri-nuxt3-tailwind-rome-template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "tauri": "tauri",
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@tauri-apps/api": "^1.3.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.3.0",
    "typescript": "^4.8.2",
    "vite": "^4.3.5",
    "@types/node": "^18",
    "nuxt": "^3.4.3"
  }
}

「.gitignore」

.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local
// 「src」ディレクトリから転記（既存と重複分は削除）
.nuxt
.nitro
.cache
.output
.env

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

ここまででディレクトリ構造はこんな感じ。
srcディレクトリは「app.vue」のみ存在。

「src-tauri」についても内容を編集していく。
「tauri.conf.json」"devPath"の値を「http://localhost:3000」に変更

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build",
-   "devPath": "http://localhost:1420",
+   "devPath": "http://localhost:3000",//Nuxtのデフォルトに合わせるためポート番号を1420から3000に変更
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "tauri-nuxt3-tailwind-rome-template",
    "version": "0.0.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "bundle": {
      "active": true,
      "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
      "identifier": "com.tauri.dev",
      "targets": "all"
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "tauri-nuxt3-tailwind-rome-template",
        "width": 800,
        "height": 600
      }
    ]
  }
}

※次の手順を実施する前にルート直下、「src」ディレクトリともに「node_modules」ディレクトリは削除しておく。

package.jsonに記載されている依存パッケージを再度インストールしてtauriを起動

$ yarn install

//インストール後に起動
$ yarn tauri dev

nuxt3が適用されている

このままsrcディレクトリにフロント側コードを実装してもフロント側は反映されないと思うので「nuxt.config.ts」を編集していく。

nuxt.config.ts

import { defineNuxtConfig } from "nuxt/config";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  srcDir: "src/", //フロント側ルートディレクトリ
  ssr: false, //SPAレンダリングモードで実装
});

ちなみにnuxt3の開発サーバーのデフォルトポートを3000から変更したい場合は以下の記述を追加する。
その際tauri側の変更も忘れずに変更（1420にしたければ元に戻すと言った方が正しい）
nuxt.config.tsの構成は公式ドキュメントが参考になる。
※今回はポート番号3000のままで進めていく。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
--省略--
  ssr: false,

//追加
+  devServer: {
+    port: 1420, //3000から1420に変更する場合
+  },
--省略--

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build",
-   "devPath": "http://localhost:3000",
+   "devPath": "http://localhost:1420",//3000⇒1420に変更
    "distDir": "../dist",
    "withGlobalTauri": true
  },
--省略--

Tailwindcss導入

次にTailwindを導入する。
Nuxt3では丁寧に公式サイトでまとめているのでそれに従う。

「devDependencies」にインストールしたかったので「-D」オプション付きでインストール

yarn add -D @nuxtjs/tailwindcss

「nuxt.config.ts」に以下の記載を追加

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
--省略--
  ssr: false,

//追加
+ modules: [
+   '@nuxtjs/tailwindcss'
  ]
--省略--

導入されているか確かめるため「src」ディレクトリの「app.vue」を修正する。

「app.vue」

app.vue

<template>
  <div>
    //<NuxtWelcome />を削除して<h1>タグ追加
-   <NuxtWelcome />
+   <h1 class="text-3xl font-bold underline">
+       Hello world!
+   </h1>
  </div>
</template>

太文字＆下線の「hello World!」が表示されたので無事適用されている。

Rome導入

最後にESlint&Prettierに取って代わるかもしれないフロントエンドツール「Rome」を入れていく（Rustで実装されているため処理速度が爆速）
現時点(2023/5/14)ではjs,ts,jsonのみ対応なのでvueファイルに処理の大半を実装している場合は恩恵が薄いかも。
その場合は素直にESlint&Prettierで対応しよう。

$ yarn add -D rome

次に設定ファイル「rome.json」をルート直下に作成。
もちろん好きなようにカスタマイズ可能。
以下の内容は公式の推奨設定をもとに少し変更している。
ルールについては公式ドキュメントを参照。

rome.json

{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "tab",
    "indentSize": 2,
    "lineWidth": 80,
    "ignore": []
  },
  "linter": {
    "enabled": true,
    "rules": {
      //特にこだわりなければ"recommended": trueで良い
      //"recommended": true
      "suspicious": {
        "noDoubleEquals": "off" //等価演算子を「===」にするか「==」にするか。offで「==」
      },
      "nursery": {
        "noExtraSemicolons": "warn",//不要なセミコロンがある場合に警告
        "noInferrableTypes": "off"//型注釈の記載を許容する
      }
    }
  }
}

最終的にこんな感じのディレクトリ構成になる。

最後に

Nuxt3でTauriデスクトップアプリを開発できるところまで出来た。
ビルドする際はtauriの設定ファイルをいじらないといけないのでそのうち書くかも。