@adriankulik/create-fullstack-app 1.5.0 → 1.6.0

package/templates/frontend/vue/package.json

@@ -2,29 +2,29 @@
   "name": "frontend-vue",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest run",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix --ignore-path ../.gitignore"
+    "lint": "eslint . --fix"
   },
   "dependencies": {
     "vue": "^3.5.33"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/test-utils": "^2.4.4",
-    "@vue/tsconfig": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "jsdom": "^24.0.0",
+    "@eslint/js": "^10.0.1",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.10",
+    "eslint": "^10.4.0",
+    "eslint-plugin-vue": "^10.9.1",
+    "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
-    "vitest": "^1.4.0"
+    "typescript": "^5.9.0",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.13",
+    "vitest": "^4.1.6"
   }
 }

package/templates/frontend/vue/src/App.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+interface MultiplyResponse {
+  result: number
+}
+
 const number = ref<string>('')
 const result = ref<number | null>(null)
 const error = ref<string | null>(null)
 
+const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
 const handleSubmit = async () => {
   error.value = null
   result.value = null
 
   try {
-    const response = await fetch('http://localhost:8000/api/multiply', {
+    const response = await fetch(`${apiUrl}/api/multiply`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -22,7 +28,7 @@ const handleSubmit = async () => {
       throw new Error('Network response was not ok')
     }
 
-    const data = await response.json()
+    const data: MultiplyResponse = await response.json()
     result.value = data.result
   } catch (err: unknown) {
     error.value = (err as Error).message
@@ -33,28 +39,43 @@ const handleSubmit = async () => {
 <template>
   <main style="padding: 2rem; font-family: sans-serif;">
     <h1>Multiplier App (Vue)</h1>
-    <form @submit.prevent="handleSubmit" style="margin-bottom: 1rem;">
-      <label for="numberInput" style="display: block; margin-bottom: 0.5rem;">
+    <form
+      style="margin-bottom: 1rem;"
+      @submit.prevent="handleSubmit"
+    >
+      <label
+        for="numberInput"
+        style="display: block; margin-bottom: 0.5rem;"
+      >
         Enter a number:
       </label>
       <input
         id="numberInput"
+        v-model="number"
         type="number"
         step="any"
-        v-model="number"
         required
         style="padding: 0.5rem; margin-right: 0.5rem;"
-      />
-      <button type="submit" style="padding: 0.5rem 1rem;">
+      >
+      <button
+        type="submit"
+        style="padding: 0.5rem 1rem;"
+      >
         Multiply by 2
       </button>
     </form>
 
-    <div v-if="result !== null" style="margin-top: 1rem; padding: 1rem; background-color: #e0ffe0; border: 1px solid #00cc00;">
+    <div
+      v-if="result !== null"
+      style="margin-top: 1rem; padding: 1rem; background-color: #e0ffe0; border: 1px solid #00cc00;"
+    >
       <strong>Result:</strong> {{ result }}
     </div>
 
-    <div v-if="error" style="margin-top: 1rem; padding: 1rem; background-color: #ffe0e0; border: 1px solid #cc0000;">
+    <div
+      v-if="error"
+      style="margin-top: 1rem; padding: 1rem; background-color: #ffe0e0; border: 1px solid #cc0000;"
+    >
       <strong>Error:</strong> {{ error }}
     </div>
   </main>

package/templates/frontend/vue/src/__tests__/App.spec.ts

@@ -2,16 +2,16 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import App from '../App.vue'
 
-global.fetch = vi.fn(() =>
+globalThis.fetch = vi.fn(() =>
   Promise.resolve({
     ok: true,
     json: () => Promise.resolve({ result: 10 }),
-  })
-)
+  } as unknown as Response)
+) as typeof fetch
 
 describe('App', () => {
   beforeEach(() => {
-    fetch.mockClear()
+    (fetch as ReturnType<typeof vi.fn>).mockClear()
   })
 
   it('renders a heading', () => {

package/templates/frontend/vue/start.sh

@@ -1,2 +1,3 @@
 #!/usr/bin/env bash
+set -e
 npm run dev

package/templates/frontend/vue/test.sh

@@ -1,2 +1,3 @@
 #!/usr/bin/env bash
+set -e
 npm run test

package/templates/frontend/vue/tsconfig.json

@@ -1,12 +1,20 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
     "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "noEmit": true,
     "paths": {
       "@/*": ["./src/*"]
     }
-  }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
 }

package/templates/frontend/vue/vite.config.ts

@@ -1,4 +1,3 @@
-/// <reference types="vitest" />
 import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'