GitButler WIP Commit

This is a WIP commit for the virtual branch 'main'

This commit is used to store the state of the virtual branch
while you are working on it. It is not meant to be used for
anything else.

Author: gitbutler-client

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