feat: Add Vue 3 support to AliFullStack

- Add Vue.js Template to Hub with official Vue logo
- Create Vue 3 scaffold with TypeScript, Vite, Tailwind CSS
- Implement Vue-specific app creation and file handling
- Add CORS support for multiple development ports
- Add todo API endpoints to FastAPI scaffold
- Fix router parsing for Vue applications
- Update README roadmap to mark Vue 3 as completed

Vue 3 applications can now be created from the Hub and run with full
frontend-backend integration, API communication, and proper CORS handling.

Author: SFARPak

README.md

@@ -39,7 +39,7 @@ AliFullStack is evolving rapidly. Here's what’s done and what’s coming soon:
 
 - [x] [ReactJS](https://reactjs.org)
 - [x] [NextJS](https://nextjs.org)
-- [ ] [Vue 3](https://vuejs.org)
+- [x] [Vue 3](https://vuejs.org)
 - [ ] [Angular](https://angular.io)
 - [ ] Svelte _(planned)_
 - [ ] SolidJS _(planned)_
@@ -51,6 +51,7 @@ AliFullStack is evolving rapidly. Here's what’s done and what’s coming soon:
 - [x] [FastAPI](https://fastapi.tiangolo.com)
 - [x] [Flask](https://flask.palletsprojects.com)
 - [x] [Node.js](https://nodejs.org)
+- [ ] Rust _(planned)_
 - [ ] Ruby on Rails _(planned)_
 - [ ] Go _(planned)_
 - [ ] Laravel _(planned)_

scaffold-backend/fastapi/app/routes/api.py

@@ -1,5 +1,5 @@
 from fastapi import APIRouter, HTTPException
-from ..schemas import Item, ItemCreate
+from ..schemas import Item, ItemCreate, Todo, TodoCreate
 
 router = APIRouter()
 
@@ -8,6 +8,10 @@
 items_db = []
 item_id_counter = 1
 
+# Todo storage for Vue apps
+todos_db = []
+todo_id_counter = 1
+
 @router.get("/items", response_model=list[Item])
 async def get_items():
     """Get all items"""
@@ -47,4 +51,38 @@ async def delete_item(item_id: int):
         if item.id == item_id:
             del items_db[i]
             return {"message": "Item deleted successfully"}
-    raise HTTPException(status_code=404, detail="Item not found")
+    raise HTTPException(status_code=404, detail="Item not found")
+
+# Todo routes for Vue app compatibility
+@router.get("/todos", response_model=list[Todo])
+async def get_todos():
+    """Get all todos"""
+    return todos_db
+
+@router.post("/todos", response_model=Todo)
+async def create_todo(todo: TodoCreate):
+    """Create a new todo"""
+    global todo_id_counter
+    new_todo = Todo(id=todo_id_counter, **todo.model_dump())
+    todos_db.append(new_todo)
+    todo_id_counter += 1
+    return new_todo
+
+@router.put("/todos/{todo_id}", response_model=Todo)
+async def update_todo(todo_id: int, todo: TodoCreate):
+    """Update an existing todo"""
+    for i, existing_todo in enumerate(todos_db):
+        if existing_todo.id == todo_id:
+            updated_todo = Todo(id=todo_id, **todo.model_dump())
+            todos_db[i] = updated_todo
+            return updated_todo
+    raise HTTPException(status_code=404, detail="Todo not found")
+
+@router.delete("/todos/{todo_id}")
+async def delete_todo(todo_id: int):
+    """Delete a todo"""
+    for i, todo in enumerate(todos_db):
+        if todo.id == todo_id:
+            del todos_db[i]
+            return {"message": "Todo deleted successfully"}
+    raise HTTPException(status_code=404, detail="Todo not found")

scaffold-backend/fastapi/app/schemas/__init__.py

@@ -1,3 +1,4 @@
 from .item import Item, ItemCreate
+from .todo import Todo, TodoCreate
 
-__all__ = ["Item", "ItemCreate"]
+__all__ = ["Item", "ItemCreate", "Todo", "TodoCreate"]

scaffold-backend/fastapi/app/schemas/todo.py

@@ -0,0 +1,16 @@
+from pydantic import BaseModel
+from typing import Optional
+
+class TodoBase(BaseModel):
+    title: str
+    description: Optional[str] = None
+    completed: bool = False
+
+class TodoCreate(TodoBase):
+    pass
+
+class Todo(TodoBase):
+    id: int
+
+    class Config:
+        from_attributes = True

scaffold-backend/fastapi/main.py

@@ -11,7 +11,13 @@
 # CORS middleware
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:3000", "http://127.0.0.1:3000"],
+    allow_origins=[
+        "http://localhost:3000", "http://127.0.0.1:3000",  # React
+        "http://localhost:5173", "http://127.0.0.1:5173",  # Vite default
+        "http://localhost:32100", "http://127.0.0.1:32100", # AliFullStack frontend
+        "http://localhost:52504", "http://127.0.0.1:52504", # Dynamic ports
+        "*"  # Allow all origins for development
+    ],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],

scaffold-vue/.gitignore

@@ -0,0 +1,24 @@
+# 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?

scaffold-vue/README.md

@@ -0,0 +1,28 @@
+# Scaffold Vue
+
+A basic Vue 3 + Vite setup with TypeScript and Tailwind CSS.
+
+## Getting Started
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Run the development server:
+   ```bash
+   npm run dev
+   ```
+
+3. Open your browser to `http://localhost:8080`
+
+## Build
+
+```bash
+npm run build
+```
+
+## Preview
+
+```bash
+npm run preview

scaffold-vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>scaffold-vue</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

scaffold-vue/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "scaffold-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:dev": "vue-tsc && vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.0",
+    "axios": "^1.7.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.11",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.5.3",
+    "vite": "^6.3.4",
+    "vue-tsc": "^2.0.13"
+  }
+}

scaffold-vue/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};