Tauriでnuxt3を動かす方法

tauri

1.2

nuxt

3.4.2

hikaru

Software Developer / DIY'er

npm create tauri-app@latest コマンドで Tauri のプロジェクトを作成する。

shell

> npm create tauri-app@latest

以下、nuxt3 用にそれぞれ書き換える。

package.json

{
  "name": "tauri-app",
  "private": true,
  "scripts": {
    "dev": "tauri dev",
    "build": "tauri build",
    "tauri": "tauri"
  },
  "dependencies": {
    "@tauri-apps/api": "^1.2.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.2.3",
    "@types/node": "^18.7.10",
    "nuxt": "^3.4.2"
  }
}

src-tauri/tauri.conf.json

{
  "build": {
    "beforeDevCommand": "nuxt dev --port=1420",
    "beforeBuildCommand": "nuxt generate",
    "devPath": "http://localhost:1420",
    "distDir": "../.output/public", /* ../dist から変更 */
    "withGlobalTauri": false
  },
  "package": {
    "productName": "tauri-app",
    "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.example.tauri-app",
      "targets": "all"
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "tauri-app",
        "width": 800,
        "height": 600
      }
    ]
  }
}

tsconfig.json

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  srcDir: "src/",
  ssr: false,
});

app.vue

<template>
  <div>
    <p>Hello World, Tauri App!</p>
  </div>
</template>

.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

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

# nuxt3用に追加
*.log*
.nuxt
.nitro
.cache
.output
.env
dist
.DS_Store