diff --git a/README.md b/README.md
index 68c6c25b..c75a5584 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ pnpm create better-t-stack@latest
 
 - **Zero-config setup** with interactive CLI wizard
 - **End-to-end type safety** from database to frontend via tRPC
-- **Modern stack** with React, Hono/Elysia, and TanStack libraries
+- **Modern stack** with React, Vue, Nuxt, Svelte, Solid, and more
 - **Multi-platform** supporting web, mobile (Expo), and desktop applications
 - **Database flexibility** with SQLite (Turso) or PostgreSQL options
 - **ORM choice** between Drizzle or Prisma
diff --git a/apps/cli/README.md b/apps/cli/README.md
index 94e541e4..173de20d 100644
--- a/apps/cli/README.md
+++ b/apps/cli/README.md
@@ -32,7 +32,7 @@ Follow the prompts to configure your project or use the `--yes` flag for default
 | Category                 | Options                                                                                                                                                                                                                                                    |
 | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **TypeScript**           | End-to-end type safety across all parts of your application                                                                                                                                                                                                |
-| **Frontend**             | • React with TanStack Router<br>• React with React Router<br>• React with TanStack Start (SSR)<br>• Next.js<br>• SvelteKit<br>• Nuxt (Vue)<br>• SolidJS<br>• React Native with NativeWind (via Expo)<br>• React Native with Unistyles (via Expo)<br>• None |
+| **Frontend**             | • React with TanStack Router<br>• React with React Router<br>• React with TanStack Start (SSR)<br>• Next.js<br>• Vue with Vue Router<br>• Nuxt (Vue)<br>• SvelteKit<br>• SolidJS<br>• React Native with NativeWind (via Expo)<br>• React Native with Unistyles (via Expo)<br>• None |
 | **Backend**              | • Hono<br>• Express<br>• Elysia<br>• Next.js API routes<br>• Convex<br>• Fastify<br>• None                                                                                                                                                                 |
 | **API Layer**            | • tRPC (type-safe APIs)<br>• oRPC (OpenAPI-compatible type-safe APIs)<br>• None                                                                                                                                                                            |
 | **Runtime**              | • Bun<br>• Node.js<br>• Cloudflare Workers<br>• None                                                                                                                                                                                                       |
@@ -57,7 +57,7 @@ Options:
   --orm <type>                    ORM type (none, drizzle, prisma, mongoose)
   --auth                          Include authentication
   --no-auth                       Exclude authentication
-  --frontend <types...>           Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, svelte, solid, native-nativewind, native-unistyles, none)
+  --frontend <types...>           Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, vue-router, svelte, solid, native-nativewind, native-unistyles, none)
   --addons <types...>             Additional addons (pwa, tauri, starlight, biome, husky, turborepo, none)
   --examples <types...>           Examples to include (todo, ai, none)
   --git                           Initialize git repository
diff --git a/apps/cli/src/constants.ts b/apps/cli/src/constants.ts
index cdd55111..632efa5b 100644
--- a/apps/cli/src/constants.ts
+++ b/apps/cli/src/constants.ts
@@ -128,8 +128,8 @@ export const dependencyVersionMap = {
 export type AvailableDependencies = keyof typeof dependencyVersionMap;
 
 export const ADDON_COMPATIBILITY: Record<Addons, readonly Frontend[]> = {
-	pwa: ["tanstack-router", "react-router", "solid", "next"],
-	tauri: ["tanstack-router", "react-router", "nuxt", "svelte", "solid"],
+	pwa: ["tanstack-router", "react-router", "solid", "next", "vue-router"],
+	tauri: ["tanstack-router", "react-router", "nuxt", "vue-router", "svelte", "solid"],
 	biome: [],
 	husky: [],
 	turborepo: [],
@@ -147,6 +147,7 @@ export const WEB_FRAMEWORKS: readonly Frontend[] = [
 	"tanstack-start",
 	"next",
 	"nuxt",
+	"vue-router",
 	"svelte",
 	"solid",
 ];
diff --git a/apps/cli/src/helpers/project-generation/template-manager.ts b/apps/cli/src/helpers/project-generation/template-manager.ts
index 72197e99..ffe50369 100644
--- a/apps/cli/src/helpers/project-generation/template-manager.ts
+++ b/apps/cli/src/helpers/project-generation/template-manager.ts
@@ -67,6 +67,7 @@ export async function setupFrontendTemplates(
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
+	const hasVueRouterWeb = context.frontend.includes("vue-router");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
 	const hasNativeWind = context.frontend.includes("native-nativewind");
@@ -74,7 +75,7 @@ export async function setupFrontendTemplates(
 	const _hasNative = hasNativeWind || hasUnistyles;
 	const isConvex = context.backend === "convex";
 
-	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) {
+	if (hasReactWeb || hasNuxtWeb || hasVueRouterWeb || hasSvelteWeb || hasSolidWeb) {
 		const webAppDir = path.join(projectDir, "apps/web");
 		await fs.ensureDir(webAppDir);
 
@@ -140,6 +141,23 @@ export async function setupFrontendTemplates(
 				} else {
 				}
 			}
+		} else if (hasVueRouterWeb) {
+			const vueRouterBaseDir = path.join(PKG_ROOT, "templates/frontend/vue/vue-router");
+			if (await fs.pathExists(vueRouterBaseDir)) {
+				await processAndCopyFiles("**/*", vueRouterBaseDir, webAppDir, context);
+			} else {
+			}
+
+			if (!isConvex && context.api !== "none") {
+				const apiWebVueDir = path.join(
+					PKG_ROOT,
+					`templates/api/${context.api}/web/vue`,
+				);
+				if (await fs.pathExists(apiWebVueDir)) {
+					await processAndCopyFiles("**/*", apiWebVueDir, webAppDir, context);
+				} else {
+				}
+			}
 		} else if (hasSvelteWeb) {
 			const svelteBaseDir = path.join(PKG_ROOT, "templates/frontend/svelte");
 			if (await fs.pathExists(svelteBaseDir)) {
@@ -372,6 +390,7 @@ export async function setupAuthTemplate(
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
+	const hasVueRouterWeb = context.frontend.includes("vue-router");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
 	const hasNativeWind = context.frontend.includes("native-nativewind");
@@ -434,7 +453,7 @@ export async function setupAuthTemplate(
 	}
 
 	if (
-		(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) &&
+		(hasReactWeb || hasNuxtWeb || hasVueRouterWeb || hasSvelteWeb || hasSolidWeb) &&
 		webAppDirExists
 	) {
 		if (hasReactWeb) {
@@ -473,6 +492,14 @@ export async function setupAuthTemplate(
 				await processAndCopyFiles("**/*", authWebNuxtSrc, webAppDir, context);
 			} else {
 			}
+		} else if (hasVueRouterWeb) {
+			if (context.api !== "none") {
+				const authWebVueSrc = path.join(PKG_ROOT, "templates/auth/web/vue");
+				if (await fs.pathExists(authWebVueSrc)) {
+					await processAndCopyFiles("**/*", authWebVueSrc, webAppDir, context);
+				} else {
+				}
+			}
 		} else if (hasSvelteWeb) {
 			const authWebSvelteSrc = path.join(PKG_ROOT, "templates/auth/web/svelte");
 			if (await fs.pathExists(authWebSvelteSrc)) {
@@ -588,6 +615,7 @@ export async function setupExamplesTemplate(
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
+	const hasVueRouterWeb = context.frontend.includes("vue-router");
 	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasSolidWeb = context.frontend.includes("solid");
 
@@ -716,6 +744,18 @@ export async function setupExamplesTemplate(
 					);
 				} else {
 				}
+			} else if (hasVueRouterWeb) {
+				const exampleWebVueSrc = path.join(exampleBaseDir, "web/vue");
+				if (await fs.pathExists(exampleWebVueSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleWebVueSrc,
+						webAppDir,
+						context,
+						false,
+					);
+				} else {
+				}
 			} else if (hasSvelteWeb) {
 				const exampleWebSvelteSrc = path.join(exampleBaseDir, "web/svelte");
 				if (await fs.pathExists(exampleWebSvelteSrc)) {
@@ -863,6 +903,7 @@ export async function setupDeploymentTemplates(
 			solid: "solid",
 			next: "react/next",
 			nuxt: "nuxt",
+			"vue-router": "vue",
 			svelte: "svelte",
 		};
 
diff --git a/apps/cli/src/prompts/frontend.ts b/apps/cli/src/prompts/frontend.ts
index e4eb9c08..6bccb632 100644
--- a/apps/cli/src/prompts/frontend.ts
+++ b/apps/cli/src/prompts/frontend.ts
@@ -56,6 +56,11 @@ export async function getFrontendChoice(
 				label: "Nuxt",
 				hint: "The Progressive Web Framework for Vue.js",
 			},
+			{
+				value: "vue-router" as const,
+				label: "Vue Router",
+				hint: "The official router for Vue.js single-page applications",
+			},
 			{
 				value: "svelte" as const,
 				label: "Svelte",
@@ -75,7 +80,7 @@ export async function getFrontendChoice(
 
 		const webOptions = allWebOptions.filter((option) => {
 			if (backend === "convex") {
-				return option.value !== "solid";
+				return option.value !== "nuxt" && option.value !== "solid" && option.value !== "vue-router";
 			}
 			return true;
 		});
diff --git a/apps/cli/src/types.ts b/apps/cli/src/types.ts
index 536a1748..1ad65b3d 100644
--- a/apps/cli/src/types.ts
+++ b/apps/cli/src/types.ts
@@ -29,6 +29,7 @@ export const FrontendSchema = z
 		"tanstack-start",
 		"next",
 		"nuxt",
+		"vue-router",
 		"native-nativewind",
 		"native-unistyles",
 		"svelte",
diff --git a/apps/cli/src/validation.ts b/apps/cli/src/validation.ts
index 10db63bf..53c2936f 100644
--- a/apps/cli/src/validation.ts
+++ b/apps/cli/src/validation.ts
@@ -135,7 +135,7 @@ export function processAndValidateFlags(
 
 			if (webFrontends.length > 1) {
 				consola.fatal(
-					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte, solid",
+					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, vue-router, svelte, solid",
 				);
 				process.exit(1);
 			}
@@ -205,7 +205,7 @@ export function processAndValidateFlags(
 
 		if (providedFlags.has("frontend") && options.frontend) {
 			const incompatibleFrontends = options.frontend.filter(
-				(f) => f === "solid",
+				(f) => f === "nuxt" || f === "solid" || f === "vue-router",
 			);
 			if (incompatibleFrontends.length > 0) {
 				consola.fatal(
@@ -632,9 +632,10 @@ export function validateConfigCompatibility(config: Partial<ProjectConfig>) {
 			process.exit(1);
 		}
 
-		if (config.examples.includes("ai") && includesSolid) {
+		const includesVueRouter = effectiveFrontend?.includes("vue-router");
+		if (config.examples.includes("ai") && (includesSolid || includesVueRouter)) {
 			consola.fatal(
-				"The 'ai' example is not compatible with the Solid frontend.",
+				`The 'ai' example is not compatible with the ${includesSolid ? "Solid" : "Vue Router"} frontend.`,
 			);
 			process.exit(1);
 		}
diff --git a/apps/cli/templates/api/orpc/web/vue/src/lib/api.ts.hbs b/apps/cli/templates/api/orpc/web/vue/src/lib/api.ts.hbs
new file mode 100644
index 00000000..fe740aaa
--- /dev/null
+++ b/apps/cli/templates/api/orpc/web/vue/src/lib/api.ts.hbs
@@ -0,0 +1,25 @@
+import { createORPCClient, createORPCFetchHandler } from "@orpc/client";
+import { ref } from "vue";
+import type { ORPCContext, orpc } from "../../../../server/src/lib/orpc";
+
+export const getAuthToken = () => {
+  if (typeof window === "undefined") return undefined;
+  return localStorage.getItem("auth-token") ?? undefined;
+};
+
+export const authToken = ref(getAuthToken());
+
+const fetchHandler = createORPCFetchHandler({
+  baseURL: import.meta.env.VITE_SERVER_URL ?? "http://localhost:5000/api",
+  headers: () => {
+    const token = authToken.value;
+    return token ? { Authorization: `Bearer ${token}` } : undefined;
+  },
+});
+
+export const { api } = createORPCClient<
+  typeof orpc,
+  ORPCContext
+>({
+  async: fetchHandler,
+});
\ No newline at end of file
diff --git a/apps/cli/templates/api/trpc/web/vue/src/lib/api.ts.hbs b/apps/cli/templates/api/trpc/web/vue/src/lib/api.ts.hbs
new file mode 100644
index 00000000..9f74cce5
--- /dev/null
+++ b/apps/cli/templates/api/trpc/web/vue/src/lib/api.ts.hbs
@@ -0,0 +1,20 @@
+import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+import type { AppRouter } from "../../../../server/src/router/root";
+
+export const api = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      transformer: superjson,
+      url: import.meta.env.VITE_SERVER_URL ?? "http://localhost:5000/api/trpc",
+      async headers() {
+        const headers: Record<string, string> = {};
+        const token = localStorage.getItem("auth-token");
+        if (token) {
+          headers.authorization = `Bearer ${token}`;
+        }
+        return headers;
+      },
+    }),
+  ],
+});
\ No newline at end of file
diff --git a/apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs b/apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs
new file mode 100644
index 00000000..72843a83
--- /dev/null
+++ b/apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs
@@ -0,0 +1,89 @@
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { api{{#if (eq api "trpc")}}, authToken{{/if}} } from './api'
+
+export interface User {
+  id: string
+  email: string
+  name: string | null
+}
+
+export interface Session {
+  user: User
+  expiresAt: Date
+}
+
+const currentUser = ref<User | null>(null)
+const isLoading = ref(true)
+
+export function useAuth() {
+  const router = useRouter()
+  
+  const isAuthenticated = computed(() => !!currentUser.value)
+
+  const initialize = async () => {
+    try {
+      const token = localStorage.getItem('auth-token')
+      if (!token) {
+        isLoading.value = false
+        return
+      }
+
+      const { data } = await api.auth.getSession{{#if (eq api "orpc")}}(){{/if}}
+      if (data) {
+        currentUser.value = data.user
+{{#if (eq api "orpc")}}        authToken.value = token{{/if}}
+      }
+    } catch (error) {
+      localStorage.removeItem('auth-token')
+{{#if (eq api "orpc")}}      authToken.value = null{{/if}}
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const login = async (email: string, password: string) => {
+    const { data } = await api.auth.login{{#if (eq api "orpc")}}({email, password}){{else}}({ email, password }){{/if}}
+    
+    if (data?.token) {
+      localStorage.setItem('auth-token', data.token)
+{{#if (eq api "orpc")}}      authToken.value = data.token{{/if}}
+      currentUser.value = data.user
+      router.push('/')
+    }
+  }
+
+  const signup = async (email: string, password: string, name: string) => {
+    const { data } = await api.auth.signup{{#if (eq api "orpc")}}({email, password, name}){{else}}({ email, password, name }){{/if}}
+    
+    if (data?.token) {
+      localStorage.setItem('auth-token', data.token)
+{{#if (eq api "orpc")}}      authToken.value = data.token{{/if}}
+      currentUser.value = data.user
+      router.push('/')
+    }
+  }
+
+  const logout = async () => {
+    try {
+      await api.auth.logout{{#if (eq api "orpc")}}(){{/if}}
+    } catch (error) {
+      console.error('Logout error:', error)
+    } finally {
+      localStorage.removeItem('auth-token')
+{{#if (eq api "orpc")}}      authToken.value = null{{/if}}
+      currentUser.value = null
+      router.push('/login')
+    }
+  }
+
+  return {
+    user: currentUser,
+    isAuthenticated,
+    isLoading,
+    initialize,
+    login,
+    signup,
+    logout,
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/templates/deploy/web/vue/_worker.js b/apps/cli/templates/deploy/web/vue/_worker.js
new file mode 100644
index 00000000..27a51071
--- /dev/null
+++ b/apps/cli/templates/deploy/web/vue/_worker.js
@@ -0,0 +1,24 @@
+export default {
+  async fetch(request, env) {
+    const url = new URL(request.url);
+    
+    // Serve static assets
+    try {
+      // Check if the path has a file extension
+      const hasExtension = url.pathname.split('/').pop().includes('.');
+      
+      if (hasExtension) {
+        // Try to serve the static asset
+        return await env.ASSETS.fetch(request);
+      }
+      
+      // For paths without extensions, serve index.html (SPA routing)
+      const indexRequest = new Request(new URL('/index.html', request.url).toString(), request);
+      return await env.ASSETS.fetch(indexRequest);
+    } catch (e) {
+      // If the asset doesn't exist, serve index.html
+      const indexRequest = new Request(new URL('/index.html', request.url).toString(), request);
+      return await env.ASSETS.fetch(indexRequest);
+    }
+  },
+};
\ No newline at end of file
diff --git a/apps/cli/templates/deploy/web/vue/package.json.hbs b/apps/cli/templates/deploy/web/vue/package.json.hbs
new file mode 100644
index 00000000..9cf6a500
--- /dev/null
+++ b/apps/cli/templates/deploy/web/vue/package.json.hbs
@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "deploy": "wrangler pages deploy dist"
+  },
+  "devDependencies": {
+    "wrangler": "^3.101.0"
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/templates/deploy/web/vue/wrangler.toml.hbs b/apps/cli/templates/deploy/web/vue/wrangler.toml.hbs
new file mode 100644
index 00000000..e9346b4a
--- /dev/null
+++ b/apps/cli/templates/deploy/web/vue/wrangler.toml.hbs
@@ -0,0 +1,9 @@
+name = "{{projectName}}-web"
+compatibility_date = "2024-12-01"
+compatibility_flags = ["nodejs_compat"]
+main = "./dist/_worker.js"
+
+[site]
+bucket = "./dist"
+
+[env.production]
\ No newline at end of file
diff --git a/apps/cli/templates/examples/todo/web/vue/src/views/Todo.vue.hbs b/apps/cli/templates/examples/todo/web/vue/src/views/Todo.vue.hbs
new file mode 100644
index 00000000..057ee3e6
--- /dev/null
+++ b/apps/cli/templates/examples/todo/web/vue/src/views/Todo.vue.hbs
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
+import { api } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Trash2 } from 'lucide-vue-next'
+
+const newTodoTitle = ref('')
+const queryClient = useQueryClient()
+
+const { data: todos, isLoading } = useQuery({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const response = await api.todo.getAll{{#if (eq api "orpc")}}(){{/if}}
+    return response{{#if (eq api "trpc")}}.data{{/if}}
+  },
+})
+
+const createTodoMutation = useMutation({
+  mutationFn: async (title: string) => {
+    return api.todo.create{{#if (eq api "orpc")}}({ title }){{else}}({ title }){{/if}}
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+    newTodoTitle.value = ''
+  },
+})
+
+const toggleTodoMutation = useMutation({
+  mutationFn: async ({ id, completed }: { id: string; completed: boolean }) => {
+    return api.todo.update{{#if (eq api "orpc")}}({ id, completed }){{else}}({ id, completed }){{/if}}
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+})
+
+const deleteTodoMutation = useMutation({
+  mutationFn: async (id: string) => {
+    return api.todo.delete{{#if (eq api "orpc")}}({ id }){{else}}({ id }){{/if}}
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+})
+
+const handleCreateTodo = () => {
+  if (newTodoTitle.value.trim()) {
+    createTodoMutation.mutate(newTodoTitle.value)
+  }
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8 px-4">
+    <Card class="max-w-2xl mx-auto">
+      <CardHeader>
+        <CardTitle>Todo List</CardTitle>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <form @submit.prevent="handleCreateTodo" class="flex gap-2">
+          <Input
+            v-model="newTodoTitle"
+            placeholder="Add a new todo..."
+            :disabled="createTodoMutation.isPending.value"
+          />
+          <Button type="submit" :disabled="createTodoMutation.isPending.value">
+            Add
+          </Button>
+        </form>
+
+        <div v-if="isLoading" class="text-center py-4">
+          Loading todos...
+        </div>
+
+        <div v-else-if="todos && todos.length > 0" class="space-y-2">
+          <div
+            v-for="todo in todos"
+            :key="todo.id"
+            class="flex items-center gap-2 p-2 rounded-md hover:bg-muted/50"
+          >
+            <Checkbox
+              :checked="todo.completed"
+              @update:checked="(checked) => toggleTodoMutation.mutate({ id: todo.id, completed: checked })"
+            />
+            <span
+              class="flex-1"
+              :class="{ 'line-through text-muted-foreground': todo.completed }"
+            >
+              {{ todo.title }}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              @click="deleteTodoMutation.mutate(todo.id)"
+              :disabled="deleteTodoMutation.isPending.value"
+            >
+              <Trash2 class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div v-else class="text-center py-4 text-muted-foreground">
+          No todos yet. Add one above!
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/env.d.ts b/apps/cli/templates/frontend/vue/vue-router/env.d.ts
new file mode 100644
index 00000000..151aa685
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/index.html.hbs b/apps/cli/templates/frontend/vue/vue-router/index.html.hbs
new file mode 100644
index 00000000..3bc90f61
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/index.html.hbs
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}} - Vue Router App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/package.json.hbs b/apps/cli/templates/frontend/vue/vue-router/package.json.hbs
new file mode 100644
index 00000000..c38022ec
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/package.json.hbs
@@ -0,0 +1,43 @@
+{
+  "name": "web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@tanstack/vue-form": "^1.12.0",
+    "@tanstack/vue-query": "^5.67.2",
+    "@tanstack/vue-virtual": "^3.12.0",
+    "@vueuse/core": "^12.3.1",
+    "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.511.0",
+    "pinia": "^2.3.0",
+    "radix-vue": "^1.9.13",
+    "tailwind-merge": "^3.3.0",
+    "tw-animate-css": "^1.3.2",
+    "vee-validate": "^4.14.10",
+    "vue": "^3.6.3",
+    "vue-router": "^4.5.0",
+    "vue-sonner": "^2.0.0",
+    "zod": "^4.0.2"{{#if (eq api "trpc")}},
+    "@trpc/client": "catalog:trpc11",
+    "superjson": "^2.2.1"{{/if}}{{#if (eq api "orpc")}},
+    "@orpc/client": "catalog:orpc"{{/if}}
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "@types/node": "^20",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vue-tsc": "^2.2.0"
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/public/favicon.ico b/apps/cli/templates/frontend/vue/vue-router/public/favicon.ico
new file mode 100644
index 00000000..5dbdfcdd
Binary files /dev/null and b/apps/cli/templates/frontend/vue/vue-router/public/favicon.ico differ
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/App.vue.hbs b/apps/cli/templates/frontend/vue/vue-router/src/App.vue.hbs
new file mode 100644
index 00000000..d75d7910
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/App.vue.hbs
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { ModeToggle } from '@/components/mode-toggle'
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div class="container flex h-14 max-w-screen-2xl items-center">
+        <div class="mr-4 flex">
+          <a href="/" class="mr-4 flex items-center space-x-2 lg:mr-6">
+            <span class="hidden font-bold lg:inline-block">{{projectName}}</span>
+          </a>
+        </div>
+        <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+          <nav class="flex items-center">
+            <ModeToggle />
+          </nav>
+        </div>
+      </div>
+    </header>
+    <main class="flex-1">
+      <RouterView />
+    </main>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/assets/main.css b/apps/cli/templates/frontend/vue/vue-router/src/assets/main.css
new file mode 100644
index 00000000..2f9dd454
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/assets/main.css
@@ -0,0 +1,70 @@
+@import 'tailwindcss';
+
+@theme {
+  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+  --color-background: #ffffff;
+  --color-foreground: #0a0a0a;
+  --color-card: #ffffff;
+  --color-card-foreground: #0a0a0a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0a0a0a;
+  --color-primary: #171717;
+  --color-primary-foreground: #fafafa;
+  --color-secondary: #f5f5f5;
+  --color-secondary-foreground: #171717;
+  --color-muted: #f5f5f5;
+  --color-muted-foreground: #737373;
+  --color-accent: #f5f5f5;
+  --color-accent-foreground: #171717;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+  --color-border: #e5e5e5;
+  --color-input: #e5e5e5;
+  --color-ring: #0a0a0a;
+  --color-chart-1: #e76e50;
+  --color-chart-2: #2a9d90;
+  --color-chart-3: #274754;
+  --color-chart-4: #e8c468;
+  --color-chart-5: #f4a462;
+
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 1rem;
+}
+
+html {
+  font-family: var(--font-family-sans);
+}
+
+.dark {
+  --color-background: #0a0a0a;
+  --color-foreground: #fafafa;
+  --color-card: #0a0a0a;
+  --color-card-foreground: #fafafa;
+  --color-popover: #0a0a0a;
+  --color-popover-foreground: #fafafa;
+  --color-primary: #fafafa;
+  --color-primary-foreground: #171717;
+  --color-secondary: #262626;
+  --color-secondary-foreground: #fafafa;
+  --color-muted: #262626;
+  --color-muted-foreground: #a3a3a3;
+  --color-accent: #262626;
+  --color-accent-foreground: #fafafa;
+  --color-destructive: #7f1d1d;
+  --color-destructive-foreground: #fafafa;
+  --color-border: #262626;
+  --color-input: #262626;
+  --color-ring: #fafafa;
+  --color-chart-1: #e76e50;
+  --color-chart-2: #2a9d90;
+  --color-chart-3: #264754;
+  --color-chart-4: #e8c468;
+  --color-chart-5: #f4a462;
+}
+
+* {
+  border-color: var(--color-border);
+}
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/components/mode-toggle.tsx b/apps/cli/templates/frontend/vue/vue-router/src/components/mode-toggle.tsx
new file mode 100644
index 00000000..7ed29edb
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/components/mode-toggle.tsx
@@ -0,0 +1,44 @@
+import { defineComponent, computed } from 'vue'
+import { useColorMode } from '@vueuse/core'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Moon, Sun } from 'lucide-vue-next'
+
+export const ModeToggle = defineComponent({
+  name: 'ModeToggle',
+  setup() {
+    const mode = useColorMode()
+
+    const setTheme = (theme: string) => {
+      mode.value = theme
+    }
+
+    return () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" class="w-9 px-0">
+            <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => setTheme('light')}>
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme('dark')}>
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme('auto')}>
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+})
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx
new file mode 100644
index 00000000..7d482a4b
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx
@@ -0,0 +1,76 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import { defineComponent, type PropType } from 'vue'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  class?: string
+  type?: 'button' | 'submit' | 'reset'
+}
+
+export const Button = defineComponent({
+  name: 'Button',
+  props: {
+    variant: {
+      type: String as PropType<ButtonProps['variant']>,
+      default: 'default',
+    },
+    size: {
+      type: String as PropType<ButtonProps['size']>,
+      default: 'default',
+    },
+    class: String,
+    type: {
+      type: String as PropType<ButtonProps['type']>,
+      default: 'button',
+    },
+    asChild: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const Tag = props.asChild ? 'div' : 'button'
+      return (
+        <Tag
+          type={props.asChild ? undefined : props.type}
+          class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)}
+        >
+          {slots.default?.()}
+        </Tag>
+      )
+    }
+  },
+})
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/components/ui/card.tsx b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/card.tsx
new file mode 100644
index 00000000..587215a1
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import { defineComponent } from 'vue'
+import { cn } from '@/lib/utils'
+
+export const Card = defineComponent({
+  name: 'Card',
+  props: {
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div
+        class={cn(
+          'rounded-lg border bg-card text-card-foreground shadow-sm',
+          props.class
+        )}
+      >
+        {slots.default?.()}
+      </div>
+    )
+  },
+})
+
+export const CardHeader = defineComponent({
+  name: 'CardHeader',
+  props: {
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div class={cn('flex flex-col space-y-1.5 p-6', props.class)}>
+        {slots.default?.()}
+      </div>
+    )
+  },
+})
+
+export const CardTitle = defineComponent({
+  name: 'CardTitle',
+  props: {
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <h3
+        class={cn(
+          'text-2xl font-semibold leading-none tracking-tight',
+          props.class
+        )}
+      >
+        {slots.default?.()}
+      </h3>
+    )
+  },
+})
+
+export const CardDescription = defineComponent({
+  name: 'CardDescription',
+  props: {
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <p class={cn('text-sm text-muted-foreground', props.class)}>
+        {slots.default?.()}
+      </p>
+    )
+  },
+})
+
+export const CardContent = defineComponent({
+  name: 'CardContent',
+  props: {
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => <div class={cn('p-6 pt-0', props.class)}>{slots.default?.()}</div>
+  },
+})
+
+export const CardFooter = defineComponent({
+  name: 'CardFooter',
+  props: {
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div class={cn('flex items-center p-6 pt-0', props.class)}>
+        {slots.default?.()}
+      </div>
+    )
+  },
+})
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/components/ui/checkbox.tsx b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..f17bb13f
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/checkbox.tsx
@@ -0,0 +1,34 @@
+import { defineComponent, type PropType } from 'vue'
+import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+export const Checkbox = defineComponent({
+  name: 'Checkbox',
+  props: {
+    checked: {
+      type: [Boolean, String] as PropType<boolean | 'indeterminate'>,
+      default: false,
+    },
+    disabled: Boolean,
+    class: String,
+  },
+  emits: ['update:checked'],
+  setup(props, { emit }) {
+    return () => (
+      <CheckboxRoot
+        checked={props.checked}
+        disabled={props.disabled}
+        onUpdate:checked={(value: boolean) => emit('update:checked', value)}
+        class={cn(
+          'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+          props.class
+        )}
+      >
+        <CheckboxIndicator class="flex items-center justify-center text-current">
+          <Check class="h-3 w-3" />
+        </CheckboxIndicator>
+      </CheckboxRoot>
+    )
+  },
+})
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/components/ui/dropdown-menu.tsx b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..50daad87
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,81 @@
+import { defineComponent, type PropType } from 'vue'
+import {
+  DropdownMenuContent as RadixDropdownMenuContent,
+  DropdownMenuItem as RadixDropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger as RadixDropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+export const DropdownMenu = defineComponent({
+  name: 'DropdownMenu',
+  setup(_, { slots }) {
+    return () => <DropdownMenuRoot>{slots.default?.()}</DropdownMenuRoot>
+  },
+})
+
+export const DropdownMenuTrigger = defineComponent({
+  name: 'DropdownMenuTrigger',
+  props: {
+    asChild: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <RadixDropdownMenuTrigger asChild={props.asChild}>
+        {slots.default?.()}
+      </RadixDropdownMenuTrigger>
+    )
+  },
+})
+
+export const DropdownMenuContent = defineComponent({
+  name: 'DropdownMenuContent',
+  props: {
+    align: {
+      type: String as PropType<DropdownMenuContentProps['align']>,
+      default: 'center',
+    },
+    class: String,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <DropdownMenuPortal>
+        <RadixDropdownMenuContent
+          align={props.align}
+          class={cn(
+            'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            props.class
+          )}
+        >
+          {slots.default?.()}
+        </RadixDropdownMenuContent>
+      </DropdownMenuPortal>
+    )
+  },
+})
+
+export const DropdownMenuItem = defineComponent({
+  name: 'DropdownMenuItem',
+  props: {
+    class: String,
+    onClick: Function as PropType<() => void>,
+  },
+  setup(props, { slots }) {
+    return () => (
+      <RadixDropdownMenuItem
+        class={cn(
+          'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+          props.class
+        )}
+        onClick={props.onClick}
+      >
+        {slots.default?.()}
+      </RadixDropdownMenuItem>
+    )
+  },
+})
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx
new file mode 100644
index 00000000..e41bcd23
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx
@@ -0,0 +1,36 @@
+import { defineComponent, type InputHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface InputProps extends InputHTMLAttributes {
+  class?: string
+}
+
+export const Input = defineComponent({
+  name: 'Input',
+  props: {
+    class: String,
+    type: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: String,
+    disabled: Boolean,
+    modelValue: [String, Number],
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    return () => (
+      <input
+        type={props.type}
+        class={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          props.class
+        )}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        value={props.modelValue}
+        onInput={(e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)}
+      />
+    )
+  },
+})
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts b/apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts
new file mode 100644
index 00000000..312ce6aa
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/main.ts.hbs b/apps/cli/templates/frontend/vue/vue-router/src/main.ts.hbs
new file mode 100644
index 00000000..f5e5bff7
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/main.ts.hbs
@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import App from './App.vue'
+import router from './router'
+import './assets/main.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(VueQueryPlugin)
+
+app.mount('#app')
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/router/index.ts.hbs b/apps/cli/templates/frontend/vue/vue-router/src/router/index.ts.hbs
new file mode 100644
index 00000000..b408a3da
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/router/index.ts.hbs
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/Home.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/About.vue')
+    }
+  ]
+})
+
+export default router
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs b/apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs
new file mode 100644
index 00000000..c9b41d5d
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { ArrowLeft } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="container mx-auto py-8 px-4">
+    <div class="max-w-2xl mx-auto">
+      <router-link to="/" class="inline-block mb-8">
+        <Button variant="ghost" size="sm">
+          <ArrowLeft class="mr-2 h-4 w-4" />
+          Back to Home
+        </Button>
+      </router-link>
+      
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-3xl">About {{projectName}}</CardTitle>
+          <CardDescription>Built with modern web technologies</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <div>
+            <h3 class="text-lg font-semibold mb-2">Tech Stack</h3>
+            <ul class="list-disc list-inside space-y-1 text-gray-600 dark:text-gray-400">
+              <li>Vue 3 - The Progressive JavaScript Framework</li>
+              <li>Vue Router 4 - Official router for Vue.js</li>
+              <li>TypeScript - JavaScript with syntax for types</li>
+              <li>Vite - Next Generation Frontend Tooling</li>
+              <li>Tailwind CSS - A utility-first CSS framework</li>
+              <li>Pinia - The intuitive store for Vue</li>
+            </ul>
+          </div>
+          
+          <div>
+            <h3 class="text-lg font-semibold mb-2">Features</h3>
+            <ul class="list-disc list-inside space-y-1 text-gray-600 dark:text-gray-400">
+              <li>⚡️ Lightning fast HMR with Vite</li>
+              <li>🎯 Type-safe development with TypeScript</li>
+              <li>🎨 Beautiful UI with Tailwind CSS</li>
+              <li>🌙 Dark mode support</li>
+              <li>📦 State management with Pinia</li>
+              <li>🔄 Data fetching with TanStack Query</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/src/views/Home.vue.hbs b/apps/cli/templates/frontend/vue/vue-router/src/views/Home.vue.hbs
new file mode 100644
index 00000000..ed524c7c
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/src/views/Home.vue.hbs
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { AlertCircle, Rocket, Zap, Shield } from 'lucide-vue-next'
+
+const count = ref(0)
+
+const features = [
+  {
+    icon: Zap,
+    title: 'Lightning Fast',
+    description: 'Built with Vite for instant HMR and optimized builds'
+  },
+  {
+    icon: Shield,
+    title: 'Type Safe',
+    description: 'Full TypeScript support with Vue 3 composition API'
+  },
+  {
+    icon: Rocket,
+    title: 'Production Ready',
+    description: 'Best practices and optimizations out of the box'
+  }
+]
+</script>
+
+<template>
+  <div class="container mx-auto py-8 px-4">
+    <section class="flex flex-col items-center text-center space-y-8 py-12">
+      <h1 class="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
+        Welcome to <span class="text-primary">{{projectName}}</span>
+      </h1>
+      <p class="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
+        A modern Vue 3 application with Vue Router, TypeScript, and Tailwind CSS
+      </p>
+      
+      <div class="flex gap-4 items-center">
+        <Button @click="count++">
+          Count is {{ count }}
+        </Button>
+        <router-link to="/about">
+          <Button variant="outline">
+            <AlertCircle class="mr-2 h-4 w-4" />
+            About
+          </Button>
+        </router-link>
+      </div>
+    </section>
+
+    <section class="grid gap-6 md:grid-cols-3 py-12">
+      <Card v-for="feature in features" :key="feature.title">
+        <CardHeader>
+          <component :is="feature.icon" class="h-10 w-10 mb-4 text-primary" />
+          <CardTitle>{{ feature.title }}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CardDescription>{{ feature.description }}</CardDescription>
+        </CardContent>
+      </Card>
+    </section>
+
+    <section class="text-center py-12 space-y-4">
+      <h2 class="text-3xl font-bold">Get Started</h2>
+      <p class="text-gray-500 dark:text-gray-400">
+        Edit <code class="text-sm font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">src/views/Home.vue</code> to get started
+      </p>
+    </section>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/tsconfig.app.json b/apps/cli/templates/frontend/vue/vue-router/tsconfig.app.json
new file mode 100644
index 00000000..3c0501c0
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/tsconfig.json.hbs b/apps/cli/templates/frontend/vue/vue-router/tsconfig.json.hbs
new file mode 100644
index 00000000..6ce264f5
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/tsconfig.json.hbs
@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "noEmit": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src", "env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/tsconfig.node.json b/apps/cli/templates/frontend/vue/vue-router/tsconfig.node.json
new file mode 100644
index 00000000..17c61baf
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/tsconfig.node.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["vite.config.ts"]
+}
\ No newline at end of file
diff --git a/apps/cli/templates/frontend/vue/vue-router/vite.config.ts.hbs b/apps/cli/templates/frontend/vue/vue-router/vite.config.ts.hbs
new file mode 100644
index 00000000..d7a22970
--- /dev/null
+++ b/apps/cli/templates/frontend/vue/vue-router/vite.config.ts.hbs
@@ -0,0 +1,14 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    tsconfigPaths(),
+  ],
+  server: {
+    port: 3000,
+  },
+});
\ No newline at end of file
diff --git a/apps/web/public/schema.json b/apps/web/public/schema.json
index 1e5780f4..3e2b3377 100644
--- a/apps/web/public/schema.json
+++ b/apps/web/public/schema.json
@@ -73,6 +73,7 @@
           "tanstack-start",
           "next",
           "nuxt",
+          "vue-router",
           "native-nativewind",
           "native-unistyles",
           "svelte",