• Nitro　Vue スタック、作成内容になります。
• front コンパイル: vite build

---

### 構成

• Nitro
• node 20

---

### 書いたコード

• SPA
• https://github.com/kuc-arc-f/nitro_5ex/tree/main/vue_spa

---

• start , http ://localhost:3000 画面起動です。

npx vite build
npm run dev

#OR
npx vite build && npm run dev

---

• 編集時( 別window )

npx nodemon

---

• tree : フォルダ参考
• routes: 画面.ts
• routes/api : API
• src: front file

 tree .
.
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
│   └── test.txt
├── routes
│   ├── [name].ts
│   ├── api
│   │   ├── test.ts
│   │   ├── test2.ts
│   │   └── test3.ts
│   ├── hello.get.ts
│   └── index.ts
├── src
│   ├── App.vue
│   ├── client
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── main.ts
│   └── router.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts

---

• package.json

{
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nitro build",
    "dev": "nitro dev",
    "prepare": "nitro prepare",
    "preview": "node .output/server/index.mjs"
  },
  "dependencies": {
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "nitropack": "latest",
    "nodemon": "^3.1.9",
    "vite": "^6.2.0",
    "vite-tsconfig-paths": "^5.1.4",
    "vue-tsc": "^2.1.10"
  }
}

---

Vue + Nitro + drizzle, ユーザー追加 認証

• Nitro　Vue + drizzle 内容になります。

---

### 構成

• Nitro
• Vue
• node 20
• drizzle

---

### 書いたコード

• https://github.com/kuc-arc-f/nitro_6ex/tree/main/vue_auth_drizzle

---

• drizzle設定、参考
• https://orm.drizzle.team/docs/get-started/sqlite-new

---

• .env

DB_FILE_NAME=file:local.db

---

• ユーザー追加
• vue_auth_drizzle/routes/api/users/create.ts
• db.insert で追加。

https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_drizzle/routes/api/users/create.ts

---

• signup.vue 追加画面
• vue_auth_drizzle/src/client/signup.vue

https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_drizzle/src/client/signup.vue

---

• tree

$ tree .
.
├── drizzle.config.ts
├── local.db
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
├── routes
│   ├── [name].ts
│   ├── api
│   │   ├── test.ts
│   │   ├── test2.ts
│   │   ├── test3.ts
│   │   └── users
│   │       ├── create.ts
│   │       └── login.ts
│   ├── hello.get.ts
│   └── index.ts
├── src
│   ├── App.vue
│   ├── client
│   │   ├── About.vue
│   │   ├── Home.vue
│   │   ├── Login.vue
│   │   └── signup.vue
│   ├── components
│   │   └── Home
│   │       └── HomeContent.vue
│   ├── db
│   │   └── schema.ts
│   ├── index.ts
│   ├── input.css
│   ├── lib
│   │   ├── LibConfig.ts
│   │   └── startProc.ts
│   ├── main.ts
│   └── router.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts

---

firebase Authentication (認証) Nitro Vue

• Nitro　Vue + firebase Authentication 内容になります。

---

### 構成

• firebase Authentication
• Nitro
• Vue
• node 20

---

### 関連

• https://firebase.google.com/docs/auth/web/start?hl=ja

---

### 書いたコード

• https://github.com/kuc-arc-f/nitro_6ex/tree/main/vue_auth_firebase

---

### 手順

• firebase Authentication画面から、firebaseの　ApiKey等　取得する。

---

• nitro.config.ts
• runtimeConfig の追加に、firebaseの　ApiKey等　設定

export default defineNitroConfig({
  compatibilityDate: "2025-01-30",
  runtimeConfig: {
    firebaseApiKey: "",
    firebaseAuthDomain: "",
    firebaseProjectId: "",
    firebaseStorageBucket: "",
    firebaseMessageSenderId: "",
    firebaseAppId: ""
  }
});

---

• vue_auth_firebase/routes/api/users/login.ts

https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_firebase/routes/api/users/login.ts

---

• vue_auth_firebase/routes/api/users/create.ts https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_firebase/routes/api/users/create.ts

---

### 画面vue

• vue_auth_firebase/src/client/Login.vue

https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_firebase/src/client/Login.vue

---

• vue_auth_firebase/src/client/signup.vue

https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_firebase/src/client/signup.vue

---

• tree

$ tree .
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
├── routes
│   ├── [name].ts
│   ├── api
│   │   ├── test.ts
│   │   ├── test2.ts
│   │   ├── test3.ts
│   │   └── users
│   │       ├── create.ts
│   │       └── login.ts
│   ├── hello.get.ts
│   └── index.ts
├── src
│   ├── App.vue
│   ├── client
│   │   ├── About.vue
│   │   ├── Home.vue
│   │   ├── Login.vue
│   │   └── signup.vue
│   ├── components
│   │   └── Home
│   │       └── HomeContent.vue
│   ├── input.css
│   ├── lib
│   │   ├── LibConfig.ts
│   │   ├── firebase.ts
│   │   └── startProc.ts
│   ├── main.ts
│   └── router.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts

---