@adriankulik/create-fullstack-app 1.0.0

package/templates/frontend/vue/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend-vue",
+  "version": "0.0.0",
+  "private": true,
+  "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"
+  },
+  "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",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0"
+  }
+}

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const number = ref<string>('')
+const result = ref<number | null>(null)
+const error = ref<string | null>(null)
+
+const handleSubmit = async () => {
+  error.value = null
+  result.value = null
+
+  try {
+    const response = await fetch('http://localhost:8000/api/multiply', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ number: parseFloat(number.value) }),
+    })
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
+    }
+
+    const data = await response.json()
+    result.value = data.result
+  } catch (err: unknown) {
+    error.value = (err as Error).message
+  }
+}
+</script>
+
+<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;">
+        Enter a number:
+      </label>
+      <input
+        id="numberInput"
+        type="number"
+        step="any"
+        v-model="number"
+        required
+        style="padding: 0.5rem; margin-right: 0.5rem;"
+      />
+      <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;">
+      <strong>Result:</strong> {{ result }}
+    </div>
+
+    <div v-if="error" style="margin-top: 1rem; padding: 1rem; background-color: #ffe0e0; border: 1px solid #cc0000;">
+      <strong>Error:</strong> {{ error }}
+    </div>
+  </main>
+</template>

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

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import App from '../App.vue'
+
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({ result: 10 }),
+  })
+)
+
+describe('App', () => {
+  beforeEach(() => {
+    fetch.mockClear()
+  })
+
+  it('renders a heading', () => {
+    const wrapper = mount(App)
+    expect(wrapper.find('h1').text()).toBe('Multiplier App (Vue)')
+  })
+
+  it('submits a number and displays the result', async () => {
+    const wrapper = mount(App)
+    
+    const input = wrapper.find('#numberInput')
+    await input.setValue('5')
+    
+    await wrapper.find('form').trigger('submit')
+
+    expect(fetch).toHaveBeenCalledTimes(1)
+    
+    // Wait for the next tick for the UI to update
+    await new Promise(resolve => setTimeout(resolve, 0))
+    
+    expect(wrapper.text()).toContain('Result: 10')
+  })
+})

package/templates/frontend/vue/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/templates/frontend/vue/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package/templates/frontend/vue/start.sh

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

package/templates/frontend/vue/test.sh

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

package/templates/frontend/vue/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+    globals: true
+  },
+  server: {
+    host: '127.0.0.1'
+  }
+})