Skip to content

Commit b786eea

Browse files
committed
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.
1 parent 6609531 commit b786eea

File tree

25 files changed

+647
-51
lines changed

25 files changed

+647
-51
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ AliFullStack is evolving rapidly. Here's what’s done and what’s coming soon:
3939

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

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

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
from fastapi import APIRouter, HTTPException
2-
from ..schemas import Item, ItemCreate
2+
from ..schemas import Item, ItemCreate, Todo, TodoCreate
33

44
router = APIRouter()
55

@@ -8,6 +8,10 @@
88
items_db = []
99
item_id_counter = 1
1010

11+
# Todo storage for Vue apps
12+
todos_db = []
13+
todo_id_counter = 1
14+
1115
@router.get("/items", response_model=list[Item])
1216
async def get_items():
1317
"""Get all items"""
@@ -47,4 +51,38 @@ async def delete_item(item_id: int):
4751
if item.id == item_id:
4852
del items_db[i]
4953
return {"message": "Item deleted successfully"}
50-
raise HTTPException(status_code=404, detail="Item not found")
54+
raise HTTPException(status_code=404, detail="Item not found")
55+
56+
# Todo routes for Vue app compatibility
57+
@router.get("/todos", response_model=list[Todo])
58+
async def get_todos():
59+
"""Get all todos"""
60+
return todos_db
61+
62+
@router.post("/todos", response_model=Todo)
63+
async def create_todo(todo: TodoCreate):
64+
"""Create a new todo"""
65+
global todo_id_counter
66+
new_todo = Todo(id=todo_id_counter, **todo.model_dump())
67+
todos_db.append(new_todo)
68+
todo_id_counter += 1
69+
return new_todo
70+
71+
@router.put("/todos/{todo_id}", response_model=Todo)
72+
async def update_todo(todo_id: int, todo: TodoCreate):
73+
"""Update an existing todo"""
74+
for i, existing_todo in enumerate(todos_db):
75+
if existing_todo.id == todo_id:
76+
updated_todo = Todo(id=todo_id, **todo.model_dump())
77+
todos_db[i] = updated_todo
78+
return updated_todo
79+
raise HTTPException(status_code=404, detail="Todo not found")
80+
81+
@router.delete("/todos/{todo_id}")
82+
async def delete_todo(todo_id: int):
83+
"""Delete a todo"""
84+
for i, todo in enumerate(todos_db):
85+
if todo.id == todo_id:
86+
del todos_db[i]
87+
return {"message": "Todo deleted successfully"}
88+
raise HTTPException(status_code=404, detail="Todo not found")
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
from .item import Item, ItemCreate
2+
from .todo import Todo, TodoCreate
23

3-
__all__ = ["Item", "ItemCreate"]
4+
__all__ = ["Item", "ItemCreate", "Todo", "TodoCreate"]
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
from pydantic import BaseModel
2+
from typing import Optional
3+
4+
class TodoBase(BaseModel):
5+
title: str
6+
description: Optional[str] = None
7+
completed: bool = False
8+
9+
class TodoCreate(TodoBase):
10+
pass
11+
12+
class Todo(TodoBase):
13+
id: int
14+
15+
class Config:
16+
from_attributes = True

scaffold-backend/fastapi/main.py

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@
1111
# CORS middleware
1212
app.add_middleware(
1313
CORSMiddleware,
14-
allow_origins=["http://localhost:3000", "http://127.0.0.1:3000"],
14+
allow_origins=[
15+
"http://localhost:3000", "http://127.0.0.1:3000", # React
16+
"http://localhost:5173", "http://127.0.0.1:5173", # Vite default
17+
"http://localhost:32100", "http://127.0.0.1:32100", # AliFullStack frontend
18+
"http://localhost:52504", "http://127.0.0.1:52504", # Dynamic ports
19+
"*" # Allow all origins for development
20+
],
1521
allow_credentials=True,
1622
allow_methods=["*"],
1723
allow_headers=["*"],

scaffold-vue/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

scaffold-vue/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Scaffold Vue
2+
3+
A basic Vue 3 + Vite setup with TypeScript and Tailwind CSS.
4+
5+
## Getting Started
6+
7+
1. Install dependencies:
8+
```bash
9+
npm install
10+
```
11+
12+
2. Run the development server:
13+
```bash
14+
npm run dev
15+
```
16+
17+
3. Open your browser to `http://localhost:8080`
18+
19+
## Build
20+
21+
```bash
22+
npm run build
23+
```
24+
25+
## Preview
26+
27+
```bash
28+
npm run preview

scaffold-vue/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>scaffold-vue</title>
7+
</head>
8+
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

scaffold-vue/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "scaffold-vue",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc && vite build",
9+
"build:dev": "vue-tsc && vite build --mode development",
10+
"lint": "eslint .",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"vue": "^3.4.0",
15+
"axios": "^1.7.0"
16+
},
17+
"devDependencies": {
18+
"@vitejs/plugin-vue": "^5.1.0",
19+
"@vue/tsconfig": "^0.5.1",
20+
"autoprefixer": "^10.4.20",
21+
"eslint": "^9.9.0",
22+
"postcss": "^8.4.47",
23+
"tailwindcss": "^3.4.11",
24+
"tailwindcss-animate": "^1.0.7",
25+
"typescript": "^5.5.3",
26+
"vite": "^6.3.4",
27+
"vue-tsc": "^2.0.13"
28+
}
29+
}

scaffold-vue/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

0 commit comments

Comments
 (0)