Merge branch 'vue-router-implementation'

Author: leoisadev8

README.md

@@ -21,7 +21,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

apps/cli/README.md

@@ -26,7 +26,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                                                                                                                                                                                                       |
@@ -51,7 +51,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

apps/cli/src/constants.ts

@@ -118,8 +118,8 @@ export const dependencyVersionMap = {
 export type AvailableDependencies = keyof typeof dependencyVersionMap;
 
 export const ADDON_COMPATIBILITY = {
-	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: [],
@@ -134,6 +134,7 @@ export const WEB_FRAMEWORKS: readonly Frontend[] = [
 	"tanstack-start",
 	"next",
 	"nuxt",
+	"vue-router",
 	"svelte",
 	"solid",
 ];

apps/cli/src/helpers/project-generation/template-manager.ts

@@ -68,14 +68,15 @@ 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");
 	const hasUnistyles = context.frontend.includes("native-unistyles");
 	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);
 
@@ -141,6 +142,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)) {
@@ -373,6 +391,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");
@@ -435,7 +454,7 @@ export async function setupAuthTemplate(
 	}
 
 	if (
-		(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) &&
+		(hasReactWeb || hasNuxtWeb || hasVueRouterWeb || hasSvelteWeb || hasSolidWeb) &&
 		webAppDirExists
 	) {
 		if (hasReactWeb) {
@@ -474,6 +493,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) {
 			if (context.api === "orpc") {
 				const authWebSvelteSrc = path.join(
@@ -606,6 +633,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");
 
@@ -734,6 +762,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)) {
@@ -876,6 +916,7 @@ export async function setupDeploymentTemplates(
 			solid: "solid",
 			next: "react/next",
 			nuxt: "nuxt",
+			"vue-router": "vue",
 			svelte: "svelte",
 		};
 

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 !== "nuxt" && option.value !== "solid";
+				return option.value !== "nuxt" && option.value !== "solid" && option.value !== "vue-router";
 			}
 			return true;
 		});

apps/cli/src/types.ts

@@ -29,6 +29,7 @@ export const FrontendSchema = z
 		"tanstack-start",
 		"next",
 		"nuxt",
+		"vue-router",
 		"native-nativewind",
 		"native-unistyles",
 		"svelte",

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 === "nuxt" || f === "solid",
+				(f) => f === "nuxt" || f === "solid" || f === "vue-router",
 			);
 			if (incompatibleFrontends.length > 0) {
 				consola.fatal(
@@ -639,9 +639,10 @@ export function validateConfigCompatibility(
 			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);
 		}

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,
+});

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;
+      },
+    }),
+  ],
+});

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,
+  }
+}