TauriにVueフレームワークのNuxt3を導入するまで（ついでにTailwindcssとRome）

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

参考：

https://zenn.dev/mbs_code/scraps/e91cfaacc3ed95

## tauriの導入
この手順は既存でいくらでもあると思うので省略。
以下の[tauri公式](https://tauri.app/)を参考にtauriインストール。

https://tauri.app/v1/guides/getting-started/prerequisites


https://tauri.app/v1/guides/getting-started/setup/



~~~ bash
$ 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」をルートディレクトリとして進めていく。
<br>
## 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.
~~~
<br>

なのでviteをインストール。
~~~
$ yarn add -D vite
~~~
<br>

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


<br>

「Welcome to Tauri!」
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/60537ca2-50c8-349d-e586-925b482097f7.png)


## Nuxt3導入
ここから本番。
tauriが起動するのを確認したら[Nuxt3](https://nuxt.com/)プロジェクトを作成し、tauriフロントエンド側に適用していく。

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

<br>
<br>

現在のディレクトリ構成
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/adedbf2d-222d-9c26-d855-a420a6c907ba.png)

<br>

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


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

<br>
<br>

こんな感じのディレクトリ構成になるはず
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/16ca6fa8-9794-2b31-24c6-c7c8797696c7.png)


次に「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"
  }
}
~~~

<br>

「.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?
~~~

<br>

ここまででディレクトリ構造はこんな感じ。
srcディレクトリは「app.vue」のみ存在。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/9201fed0-5137-09f7-e8de-c2a43d0f309d.png)

<br>

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

~~~diff: 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
      }
    ]
  }
}

~~~

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

<br>

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

~~~ bash
$ yarn install

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

<br>
<br>

nuxt3が適用されている
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/3f1d15d1-daef-7dbc-b3ad-8ec83cd6b743.png)


<br>
<br>

このまま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レンダリングモードで実装
});

~~~

<br>

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

https://nuxt.com/docs/api/configuration/nuxt-config

<br>

~~~diff: 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に変更する場合
+  },
--省略--
~~~~

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

<br>

## Tailwindcss導入
次にTailwindを導入する。
Nuxt3では丁寧に[公式サイト](https://nuxt.com/modules/tailwindcss)でまとめているのでそれに従う。


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

~~~ bash
yarn add -D @nuxtjs/tailwindcss
~~~


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

~~~diff: nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

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

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

<br>

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

「app.vue」
~~~diff: app.vue
<template>
  <div>
    //<NuxtWelcome />を削除して<h1>タグ追加
-   <NuxtWelcome />
+   <h1 class="text-3xl font-bold underline">
+       Hello world!
+   </h1>
  </div>
</template>

~~~

<br>

太文字＆下線の「hello World!」が表示されたので無事適用されている。
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/349c20e5-78b8-4198-6758-3c415c6d1f37.png)

<br>

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


https://rome.tools/


~~~ bash
$ yarn add -D rome
~~~

<br>

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


~~~ 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"//型注釈の記載を許容する
      }
    }
  }
}
~~~

<br>

最終的にこんな感じのディレクトリ構成になる。
![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387154/d17c974e-fa67-5403-d8d8-1e4959a1303a.png)

<br>

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