feat: add Vue Router support #390
Conversation
|
WalkthroughThis update introduces comprehensive support for the "vue-router" frontend framework across the CLI tool, templates, and documentation. It adds "vue-router" as a selectable frontend option, updates compatibility logic, validation, and project generation scripts, and provides complete template files for Vue Router-based projects, including deployment, authentication, and example implementations. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CLI
participant TemplateManager
participant FileSystem
User->>CLI: Run CLI with --frontend vue-router
CLI->>TemplateManager: setupFrontendTemplates(context with vue-router)
TemplateManager->>FileSystem: Copy frontend/vue/vue-router template files
TemplateManager->>FileSystem: Copy API/auth/example/deploy templates for vue-router
FileSystem-->>TemplateManager: Files copied
TemplateManager-->>CLI: Project generation complete
CLI-->>User: Vue Router project scaffolded
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes The changes span multiple files including core CLI logic, templates, and documentation. The addition of a new frontend framework involves updates to compatibility, validation, prompts, and extensive new template code for frontend, API, auth, examples, and deployment. The complexity is moderate to high due to breadth and integration points. Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (35)
🚧 Files skipped from review as they are similar to previous changes (35)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
commit: |
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (12)
apps/cli/src/types.ts (1)
25-33: Alphabetical ordering slipped – consider re-sortingFrontendSchemafor maintainabilityAll other enum literals are alphabetically sorted; the new
"vue-router"entry breaks that pattern by being inserted between"nuxt"and"native-nativewind".
Keeping enums alphabetically ordered reduces merge-conflicts and makes scanning easier.- "nuxt", - "vue-router", - "native-nativewind", + "native-nativewind", + "nuxt", + "vue-router",README.md (1)
22-26: Wording now mixes frameworks and libraries – clarify or split the bulletThe “Modern stack” bullet used to name specific libraries (TanStack, Hono/Elysia).
After this change it’s a heterogeneous list of frameworks without backend flavours, which can confuse readers about what the “stack” entails.
Consider either:
- Splitting frontend vs backend stacks into separate bullets, or
- Keeping the old back-end mention alongside the new front-end list.
This keeps the marketing message crisp.
apps/cli/README.md (1)
28-30: Table row exceeds GitHub render width – break lines for readabilityThe new “Frontend” row is a single very long line.
GitHub markdown renders table cells without wrapping, causing horizontal scroll.Consider splitting into two rows (e.g., Web vs Native) or abbreviating each item.
apps/web/public/schema.json (1)
70-77: Schema & source of truth drift – consider generating JSON schema from TS types
"vue-router"was added manually here, mirroring the TS enum.
Manual duplication risks future divergence (e.g., ordering, removals).Recommend deriving
schema.jsonfrom the Zod schemas during build (usingzod-to-json-schemaor similar) so updates propagate automatically.apps/cli/templates/frontend/vue/vue-router/src/components/mode-toggle.tsx (1)
1-44: Consider consistency with other Vue component formats.The component is well-implemented with proper theme management using
@vueuse/core. However, it uses TSX syntax while the mainApp.vue.hbsuses Single File Component (SFC) format. Consider using SFC format for consistency across the Vue template.If maintaining SFC consistency is preferred, consider refactoring to:
<script setup lang="ts"> import { useColorMode } from '@vueuse/core' // ... other imports const mode = useColorMode() const setTheme = (theme: string) => { mode.value = theme } </script> <template> <DropdownMenu> <!-- ... template content --> </DropdownMenu> </template>Otherwise, the current TSX implementation is functionally correct and well-structured.
apps/cli/templates/api/orpc/web/vue/src/lib/api.ts.hbs (1)
5-10: Consider making the auth token reactive to localStorage changes.The current implementation initializes the
authTokenref once, but it won't automatically update if localStorage is modified externally (e.g., by another tab). Consider adding a localStorage event listener or using a computed ref that re-reads localStorage.-export const authToken = ref(getAuthToken()); +export const authToken = ref(getAuthToken()); + +// Update authToken when localStorage changes +if (typeof window !== "undefined") { + window.addEventListener('storage', (e) => { + if (e.key === 'auth-token') { + authToken.value = getAuthToken(); + } + }); +}apps/cli/templates/deploy/web/vue/_worker.js (1)
7-13: Improve file extension detection logic.The current method using
.includes('.')could give false positives for paths like/api/user.profilewhere.profileisn't a file extension. Consider checking for common static asset extensions instead.- const hasExtension = url.pathname.split('/').pop().includes('.'); + const fileName = url.pathname.split('/').pop(); + const hasExtension = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$/i.test(fileName);apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx (1)
4-6: Simplify the props interface to avoid redundancy.The
InputPropsinterface extendsInputHTMLAttributesbut only adds theclassproperty. SinceInputHTMLAttributesalready includes most input-related properties, this extension is sufficient without explicitly redefining them.-export interface InputProps extends InputHTMLAttributes { - class?: string -} +export interface InputProps extends Omit<InputHTMLAttributes, 'class'> { + class?: string +}apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs (1)
10-15: Consider accessibility improvements for navigation.The back button implementation is good, but consider adding
aria-labelfor better accessibility when the button content might not be descriptive enough for screen readers.- <router-link to="/" class="inline-block mb-8"> - <Button variant="ghost" size="sm"> + <router-link to="/" class="inline-block mb-8"> + <Button variant="ghost" size="sm" aria-label="Navigate back to home page">apps/cli/templates/examples/todo/web/vue/src/views/Todo.vue.hbs (2)
50-54: Add form validation for empty todo titles.Consider adding client-side validation to prevent creating todos with only whitespace.
const handleCreateTodo = () => { - if (newTodoTitle.value.trim()) { + const trimmedTitle = newTodoTitle.value.trim() + if (trimmedTitle && trimmedTitle.length >= 1) { - createTodoMutation.mutate(newTodoTitle.value) + createTodoMutation.mutate(trimmedTitle) } }
22-30: Consider adding error handling for mutations.The mutations lack error handling which could improve user experience when operations fail.
Add
onErrorhandlers to mutations: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 = '' }, + onError: (error) => { + console.error('Failed to create todo:', error) + // Consider showing a toast notification + }, })Also applies to: 32-39, 41-48
apps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx (1)
35-40: Consider accessibility implications of the asChild pattern.The
ButtonPropsinterface and component implementation look well-structured. However, consider documenting that whenasChildis true, the consumer is responsible for ensuring proper accessibility, since adivwith button styling may not provide the same semantic meaning and keyboard interactions as a nativebuttonelement.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/cli/templates/frontend/vue/vue-router/public/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (35)
README.md(1 hunks)apps/cli/README.md(2 hunks)apps/cli/src/constants.ts(2 hunks)apps/cli/src/helpers/project-generation/template-manager.ts(8 hunks)apps/cli/src/prompts/frontend.ts(2 hunks)apps/cli/src/types.ts(1 hunks)apps/cli/src/validation.ts(3 hunks)apps/cli/templates/api/orpc/web/vue/src/lib/api.ts.hbs(1 hunks)apps/cli/templates/api/trpc/web/vue/src/lib/api.ts.hbs(1 hunks)apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs(1 hunks)apps/cli/templates/deploy/web/vue/_worker.js(1 hunks)apps/cli/templates/deploy/web/vue/package.json.hbs(1 hunks)apps/cli/templates/deploy/web/vue/wrangler.toml.hbs(1 hunks)apps/cli/templates/examples/todo/web/vue/src/views/Todo.vue.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/env.d.ts(1 hunks)apps/cli/templates/frontend/vue/vue-router/index.html.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/package.json.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/App.vue.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/assets/main.css(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/components/mode-toggle.tsx(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/components/ui/card.tsx(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/components/ui/checkbox.tsx(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/components/ui/dropdown-menu.tsx(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/main.ts.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/router/index.ts.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/src/views/Home.vue.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/tsconfig.app.json(1 hunks)apps/cli/templates/frontend/vue/vue-router/tsconfig.json.hbs(1 hunks)apps/cli/templates/frontend/vue/vue-router/tsconfig.node.json(1 hunks)apps/cli/templates/frontend/vue/vue-router/vite.config.ts.hbs(1 hunks)apps/web/public/schema.json(1 hunks)
🧰 Additional context used
🧠 Learnings (17)
apps/cli/templates/frontend/vue/vue-router/env.d.ts (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/README.md (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/deploy/web/vue/package.json.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/src/assets/main.css (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/src/router/index.ts.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/vite.config.ts.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/src/main.ts.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/tsconfig.node.json (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/tsconfig.json.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/tsconfig.app.json (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/index.html.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/src/App.vue.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/package.json.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/frontend/vue/vue-router/src/views/Home.vue.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/templates/deploy/web/vue/wrangler.toml.hbs (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
apps/cli/src/helpers/project-generation/template-manager.ts (1)
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
🧬 Code Graph Analysis (6)
apps/cli/templates/frontend/vue/vue-router/src/components/ui/checkbox.tsx (1)
apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts (1)
cn(4-6)
apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx (1)
apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts (1)
cn(4-6)
apps/cli/templates/frontend/vue/vue-router/src/components/ui/card.tsx (1)
apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts (1)
cn(4-6)
apps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx (1)
apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts (1)
cn(4-6)
apps/cli/templates/frontend/vue/vue-router/src/components/ui/dropdown-menu.tsx (2)
apps/cli/templates/frontend/react/web-base/src/components/ui/dropdown-menu.tsx (1)
DropdownMenuPortal(243-243)apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts (1)
cn(4-6)
apps/cli/src/helpers/project-generation/template-manager.ts (1)
apps/cli/src/constants.ts (1)
PKG_ROOT(8-8)
🔇 Additional comments (40)
apps/cli/templates/frontend/vue/vue-router/src/lib/utils.ts (1)
1-6: LGTM! Standard utility implementation.This is a well-implemented utility function following the common pattern for class name merging in Tailwind CSS projects. The combination of
clsxfor conditional class handling andtailwind-mergefor intelligent Tailwind class deduplication is the recommended approach.apps/cli/templates/deploy/web/vue/wrangler.toml.hbs (1)
1-9: LGTM! Standard Cloudflare deployment configuration.The Wrangler configuration follows Cloudflare's recommended patterns for static site deployment. The setup correctly configures the site bucket, Node.js compatibility, and worker script location for Vue SPA deployment.
apps/cli/src/constants.ts (2)
121-122: LGTM! Consistent addon compatibility additions.Adding "vue-router" to PWA and Tauri addon compatibility is logical since Vue Router supports PWA features and works well with Tauri for desktop applications.
137-137: LGTM! Correct framework list placement.Adding "vue-router" to the WEB_FRAMEWORKS array is correctly positioned and follows the existing naming convention.
apps/cli/src/prompts/frontend.ts (2)
59-63: LGTM! Well-structured frontend option addition.The Vue Router option is properly formatted with an appropriate label and hint that clearly describes its purpose as the official router for Vue.js SPAs.
83-83: LGTM! Correct backend compatibility filtering.Excluding "vue-router" from Convex backend compatibility is appropriate, maintaining consistency with the filtering pattern for other incompatible frameworks.
apps/cli/templates/deploy/web/vue/package.json.hbs (1)
2-3: LGTM! Appropriate deployment script.The deploy script correctly uses
wrangler pages deploy distfor Cloudflare Pages deployment of the built Vue application.apps/cli/templates/frontend/vue/vue-router/src/router/index.ts.hbs (1)
1-23: LGTM! Excellent Vue Router implementation.The router configuration follows Vue.js best practices with proper lazy loading implementation for code splitting and clear route structure.
apps/cli/templates/frontend/vue/vue-router/index.html.hbs (1)
1-13: LGTM! Clean and standard HTML template.The HTML structure is well-formed with appropriate meta tags and proper integration with the Vue.js application entry point.
apps/cli/templates/frontend/vue/vue-router/vite.config.ts.hbs (1)
1-14: LGTM! Standard and well-configured Vite setup.The configuration properly sets up Vue plugin support and TypeScript path resolution with a sensible development server port.
apps/cli/templates/frontend/vue/vue-router/src/main.ts.hbs (1)
1-14: LGTM! Well-structured Vue 3 application setup.The entry point correctly initializes the Vue app with proper plugin registration order and follows Vue 3 composition API best practices.
apps/cli/src/validation.ts (3)
138-138: LGTM! Comprehensive error message update.The error message correctly includes "vue-router" in the list of valid web framework options, maintaining consistency with the new frontend support.
208-208: LGTM! Proper convex incompatibility handling.The validation correctly identifies vue-router as incompatible with convex backend, maintaining consistency with other frontend frameworks that have similar restrictions.
642-648: LGTM! Consistent AI example compatibility validation.The AI example compatibility check for vue-router follows the same pattern as the solid framework check, ensuring consistent validation behavior across similar frontend frameworks.
apps/cli/templates/frontend/vue/vue-router/src/assets/main.css (1)
1-70: LGTM! Well-structured design system implementation.The CSS file establishes a comprehensive design system using Tailwind CSS v4 with proper theming support. The implementation follows modern practices with CSS custom properties and semantic color naming. The dark mode implementation using the
.darkclass is consistent with common theming patterns.apps/cli/templates/frontend/vue/vue-router/src/App.vue.hbs (2)
1-4: LGTM! Clean Vue 3 composition API setup.The script setup follows Vue 3 best practices with proper TypeScript support and clean imports.
6-26: LGTM! Well-structured layout with modern CSS.The template provides a clean layout with:
- Sticky header with backdrop blur effects
- Proper semantic HTML structure
- Responsive design considerations
- Integration of ModeToggle component
The CSS classes align well with the design system defined in main.css.
apps/cli/templates/frontend/vue/vue-router/tsconfig.node.json (1)
1-21: LGTM! Proper TypeScript configuration for Vite tooling.The configuration is well-structured with:
- Modern target (ES2022) and library features (ES2023)
- Appropriate module resolution for bundler environment
- Comprehensive strict type checking options
- Proper composite setup for monorepo compatibility
- Correct inclusion scope limited to Vite configuration
apps/cli/templates/api/trpc/web/vue/src/lib/api.ts.hbs (1)
1-20: LGTM! Standard tRPC client configuration with proper patterns.The tRPC client setup follows established patterns with:
- Proper typing with AppRouter
- Efficient batching with httpBatchLink
- superjson transformer for complex data types
- Environment variable configuration with sensible fallback
- Dynamic authorization header support
The localStorage token retrieval is a common pattern for client-side auth token storage.
apps/cli/templates/frontend/vue/vue-router/tsconfig.json.hbs (1)
1-19: LGTM! Solid TypeScript configuration for Vue Router projects.The configuration properly extends the base tsconfig and includes all necessary compiler options for Vue 3 + TypeScript + Vite development, including path aliases, JSX preservation, and proper module resolution.
apps/cli/templates/frontend/vue/vue-router/tsconfig.app.json (1)
1-25: Excellent separation of app-specific TypeScript configuration.This follows Vite's recommended pattern of separating app and tooling configurations. The strict compiler options and bundler module resolution are appropriate for modern Vue development.
apps/cli/templates/api/orpc/web/vue/src/lib/api.ts.hbs (1)
12-25: Well-structured ORPC client with proper authentication integration.The fetch handler correctly integrates with Vue's reactive auth token, and the client is properly typed with the server's ORPC interface. The dynamic header injection based on auth state is implemented correctly.
apps/cli/templates/frontend/vue/vue-router/src/components/ui/checkbox.tsx (1)
6-34: Excellent Vue 3 checkbox component implementation.The component demonstrates best practices with proper TypeScript typing, accessibility via Radix Vue, v-model support through emits, and clean JSX rendering. The integration with the
cnutility for class merging is well-executed.apps/cli/templates/deploy/web/vue/_worker.js (1)
14-22: Solid SPA routing support with proper error handling.The fallback to
index.htmlfor non-asset requests correctly supports Vue Router's client-side routing, and the error handling ensures the SPA remains functional even when assets are missing.apps/cli/templates/frontend/vue/vue-router/src/views/About.vue.hbs (1)
19-19: projectName is already defined and passed into all templatesThe CLI’s default config (
apps/cli/src/constants.ts), prompt/validation logic (apps/cli/src/validation.ts), and the project-generation handler (apps/cli/src/helpers/project-generation/command-handlers.ts) ensureconfig.projectNameis always set and passed as the Handlebars context for every.hbsfile, includingAbout.vue.hbs. No further action is needed here.apps/cli/templates/frontend/vue/vue-router/src/components/ui/card.tsx (1)
1-92: Excellent component architecture and consistency.The Card component family follows excellent patterns:
- Consistent prop handling across all components
- Proper use of semantic HTML elements
- Good separation of concerns with individual components
- Proper slot handling for content composition
The implementation demonstrates good Vue 3 functional component practices with JSX.
apps/cli/templates/frontend/vue/vue-router/package.json.hbs (2)
33-42: Verify Tailwind CSS v4 configuration.The template uses Tailwind CSS v4 with the Vite plugin. Ensure this configuration is compatible with the Vue setup and doesn't require additional configuration files.
Based on the retrieved learnings, Tailwind CSS v4 doesn't require traditional configuration files, which aligns with this setup.
28-31: Verify catalog aliases for API clientsPlease ensure that the
catalog:trpc11andcatalog:orpcaliases actually resolve to published package versions (e.g. in your workspace config,.npmrc/.yarnrc.yml, or a dedicated catalog manifest). If those mappings are missing or out-of-sync, update your catalog definitions so that:
catalog:trpc11points to the correct@trpc/clientreleasecatalog:orpcpoints to the correct@orpc/clientreleaseapps/cli/templates/frontend/vue/vue-router/src/components/ui/button.tsx (1)
64-75: LGTM! Clean render function implementation.The render logic correctly handles the
asChildpattern, conditionally applies thetypeattribute only for button elements, and properly merges styling classes. The slot rendering is implemented correctly for Vue 3.apps/cli/templates/frontend/vue/vue-router/src/views/Home.vue.hbs (2)
1-26: Well-structured Vue 3 composition API usage.The component follows Vue 3 best practices with proper TypeScript integration, reactive state management, and a well-organized features array. The imports are correctly structured and the script setup syntax is used appropriately.
28-70: Clean template implementation with good accessibility.The template is well-structured with semantic HTML, proper Vue directives, and good accessibility practices. The dynamic component rendering for icons and the router navigation are implemented correctly.
apps/cli/templates/frontend/vue/vue-router/src/components/ui/dropdown-menu.tsx (2)
1-17: Excellent use of Radix Vue primitives.The component properly leverages Radix Vue primitives for accessibility and behavior, with clean wrapper components that expose the necessary props while maintaining the underlying functionality.
36-81: Well-implemented content and item components.The
DropdownMenuContentandDropdownMenuItemcomponents include comprehensive styling with animation states and proper class merging. The TypeScript typing is accurate and the JSX implementation is clean.apps/cli/src/helpers/project-generation/template-manager.ts (7)
71-71: Consistent variable naming for Vue Router detection.The
hasVueRouterWebflag follows the established naming pattern and correctly detects the presence of "vue-router" in the frontend context.
79-79: Proper integration into frontend framework conditions.The condition correctly includes Vue Router alongside other web frameworks, maintaining consistency with the existing pattern.
145-162: Well-structured Vue Router template setup.The Vue Router template setup follows the established pattern with proper template path construction and conditional API integration. The logic correctly handles both frontend templates and API client templates.
394-394: Consistent authentication template detection.The authentication template setup correctly includes Vue Router detection, maintaining consistency with the frontend template setup.
496-503: Appropriate API dependency for Vue auth templates.The Vue Router authentication template setup correctly requires an API to be configured (
context.api !== "none"), which makes sense since authentication would need backend integration.
765-776: Consistent example template integration.The Vue Router example template setup follows the established pattern and correctly maps to the "vue" directory for example templates.
919-919: Logical deployment template mapping.Mapping "vue-router" to the "vue" deployment template makes sense, as Vue Router projects would have similar deployment requirements to other Vue applications.
| @@ -0,0 +1 @@ | |||
| /// <reference types="vite/client" /> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Missing .vue module declaration – TypeScript will complain on template imports
With Vite + Vue 3, TS will emit “Cannot find module '*.vue'” unless a declaration is present.
Add the canonical stub alongside the existing reference:
/// <reference types="vite/client" />
+
+declare module "*.vue" {
+ import { DefineComponent } from "vue";
+ const component: DefineComponent<{}, {}, any>;
+ export default component;
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /// <reference types="vite/client" /> | |
| /// <reference types="vite/client" /> | |
| declare module "*.vue" { | |
| import { DefineComponent } from "vue"; | |
| const component: DefineComponent<{}, {}, any>; | |
| export default component; | |
| } |
🤖 Prompt for AI Agents
In apps/cli/templates/frontend/vue/vue-router/env.d.ts at line 1, add a module
declaration for '*.vue' files to prevent TypeScript errors when importing Vue
components. This involves declaring a module for '*.vue' that exports a Vue
component type, alongside the existing reference to 'vite/client'.
| --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) |
There was a problem hiding this comment.
Flag outdated alias: native is not a valid --frontend value
The option list correctly shows native-nativewind and native-unistyles, but the sample command later uses --frontend … native (singular).
Leaving the alias will cause runtime validation errors.
Search/replace the sample invocation:
-npx create-better-t-stack my-app --frontend tanstack-router native
+npx create-better-t-stack my-app --frontend tanstack-router native-nativewindCommittable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/cli/README.md around lines 54 to 55, the sample command uses the
outdated alias `native` for the `--frontend` option, which is invalid and causes
runtime errors. Update the sample invocation to replace `native` with one of the
valid options shown in the list, such as `native-nativewind` or
`native-unistyles`, to ensure consistency and prevent validation errors.
| "deploy": "wrangler pages deploy dist" | ||
| }, | ||
| "devDependencies": { | ||
| "wrangler": "^3.101.0" |
There was a problem hiding this comment.
Fix version mismatch with constants.ts.
The wrangler version here (^3.101.0) doesn't match the version defined in constants.ts (^4.23.0). This inconsistency could lead to deployment issues.
Apply this diff to use the consistent version:
- "wrangler": "^3.101.0"
+ "wrangler": "^4.23.0"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "wrangler": "^3.101.0" | |
| - "wrangler": "^3.101.0" | |
| + "wrangler": "^4.23.0" |
🤖 Prompt for AI Agents
In apps/cli/templates/deploy/web/vue/package.json.hbs at line 6, update the
wrangler version from "^3.101.0" to "^4.23.0" to match the version defined in
constants.ts. This ensures consistency and prevents deployment issues caused by
version mismatches.
| placeholder={props.placeholder} | ||
| disabled={props.disabled} | ||
| value={props.modelValue} | ||
| onInput={(e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety in the event handler.
The type assertion (e.target as HTMLInputElement).value could be unsafe if the event doesn't originate from an input element.
-onInput={(e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)}
+onInput={(e: Event) => {
+ const target = e.target as HTMLInputElement
+ if (target) emit('update:modelValue', target.value)
+}}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/cli/templates/frontend/vue/vue-router/src/components/ui/input.tsx at
line 32, improve type safety by ensuring the event target is an HTMLInputElement
before accessing its value. Modify the event handler to check the type of
e.target and safely extract the value only if it is an HTMLInputElement,
otherwise handle the case appropriately to avoid runtime errors.
| 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}} | ||
| }, | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for the todos query.
The query lacks error handling which could lead to poor UX when the API fails.
-const { data: todos, isLoading } = useQuery({
+const { data: todos, isLoading, error } = useQuery({
queryKey: ['todos'],
queryFn: async () => {
const response = await api.todo.getAll{{#if (eq api "orpc")}}(){{/if}}
return response{{#if (eq api "trpc")}}.data{{/if}}
},
})And add error display in the template:
+ <div v-if="error" class="text-center py-4 text-red-500">
+ Error loading todos: {{ error.message }}
+ </div>
+
<div v-if="isLoading" class="text-center py-4">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 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}} | |
| }, | |
| }) | |
| <script setup> | |
| // … | |
| const { data: todos, isLoading, error } = useQuery({ | |
| queryKey: ['todos'], | |
| queryFn: async () => { | |
| const response = await api.todo.getAll{{#if (eq api "orpc")}}(){{/if}} | |
| return response{{#if (eq api "trpc")}}.data{{/if}} | |
| }, | |
| }) | |
| // … | |
| </script> | |
| <template> | |
| <!-- Error state --> | |
| <div v-if="error" class="text-center py-4 text-red-500"> | |
| Error loading todos: {{ error.message }} | |
| </div> | |
| <!-- Loading state --> | |
| <div v-if="isLoading" class="text-center py-4"> | |
| <!-- ... --> | |
| </div> | |
| <!-- Rest of template… --> | |
| </template> |
🤖 Prompt for AI Agents
In apps/cli/templates/examples/todo/web/vue/src/views/Todo.vue.hbs around lines
14 to 20, the useQuery call for fetching todos lacks error handling, which can
cause poor user experience if the API request fails. Modify the useQuery hook to
also destructure the error property, then add logic to handle and display this
error in the template, such as showing an error message when the query fails.
| "@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}} | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Review dependency versions for security and compatibility.
Some dependencies should be verified for latest versions and security advisories, particularly axios, zod, and UI libraries.
🌐 Web query:
What are the latest stable versions of Vue 3, Vue Router 4, axios, and zod? Are there any known security vulnerabilities in the specified versions?
💡 Result:
As of July 12, 2025, the latest stable versions of the specified packages are:
- Vue 3: Version 3.5.13
- Vue Router 4: Version 4.2.5
- Axios: Version 1.7.9
- Zod: Version 3.24.1
Regarding known security vulnerabilities in these versions:
-
Vue 3: A security review conducted in December 2021 found no significant vulnerabilities in Vue 3. (phabricator.wikimedia.org)
-
Vue Router 4: No specific security vulnerabilities have been reported for this version.
-
Axios: A moderate security vulnerability related to Cross-Site Request Forgery (CSRF) was identified in Axios. It's advisable to implement CSRF protection mechanisms, such as using CSRF tokens and setting the
SameSiteattribute on cookies toStrictorLax. (bytegoblin.io) -
Zod: No known security vulnerabilities have been reported for this version.
To ensure the security of your application, it's recommended to regularly update your dependencies and monitor official channels for any new security advisories.
Citations:
- 1: https://phabricator.wikimedia.org/T257734?utm_source=openai
- 2: https://bytegoblin.io/blog/fortifying-vue-js-applications-common-security-risks-and-solutions.mdx?utm_source=openai
🏁 Script executed:
#!/bin/bash
echo "Vue: $(npm view vue version)"
echo "Vue Router: $(npm view vue-router version)"
echo "Axios: $(npm view axios version)"
echo "Zod: $(npm view zod version)"Length of output: 250
Fix invalid Vue version and adjust dependency ranges
The template specifies an unavailable Vue release and should pin to the latest stable; other ranges already cover the newest patches/minors.
• apps/cli/templates/frontend/vue/vue-router/package.json.hbs: update the Vue entry
- "vue": "^3.6.3",
+ "vue": "^3.5.17",• No further version bumps needed—^4.5.0, ^1.7.9, and ^4.0.2 will include vue-router 4.5.1, axios 1.10.0, and zod 4.0.5 respectively.
• No critical vulnerabilities in these versions, though implement CSRF protections (tokens + SameSite cookies) for Axios.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@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}} | |
| }, | |
| "@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.5.17", | |
| "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}} | |
| }, |
🤖 Prompt for AI Agents
In apps/cli/templates/frontend/vue/vue-router/package.json.hbs between lines 12
and 32, update the Vue dependency version from "^3.6.3" to the latest stable
release version to fix the invalid Vue version issue. Leave other dependency
version ranges unchanged as they already cover the latest patches and minor
updates. No other version bumps are necessary.
| 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('/') | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for signup failures.
Similar to the login function, signup should handle potential failures.
Apply the same error handling pattern as suggested for the login function.
🤖 Prompt for AI Agents
In apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs around lines 56 to 65,
the signup function lacks error handling for failures. Add a try-catch block
around the API call to catch any errors during signup, and handle them
appropriately, such as logging the error or showing a user-friendly message.
This should follow the same error handling pattern used in the login function to
ensure consistent behavior.
| const currentUser = ref<User | null>(null) | ||
| const isLoading = ref(true) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Move reactive state inside the composable function.
The currentUser and isLoading refs are defined outside the useAuth function, making them global singletons. This could cause issues if multiple components use this composable expecting independent state instances.
Move the reactive state inside the composable function:
+export function useAuth() {
+ const currentUser = ref<User | null>(null)
+ const isLoading = ref(true)
+ const router = useRouter()
-const currentUser = ref<User | null>(null)
-const isLoading = ref(true)
-export function useAuth() {
- const router = useRouter()📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const currentUser = ref<User | null>(null) | |
| const isLoading = ref(true) | |
| export function useAuth() { | |
| const currentUser = ref<User | null>(null) | |
| const isLoading = ref(true) | |
| const router = useRouter() | |
| // ...rest of composable implementation... | |
| } |
🤖 Prompt for AI Agents
In apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs around lines 16 to 17,
the reactive refs currentUser and isLoading are declared outside the useAuth
function, making them global singletons shared across all components. To fix
this, move the declarations of currentUser and isLoading inside the useAuth
function so each call to useAuth returns independent reactive state instances.
| 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('/') | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for authentication failures.
The login function should handle potential authentication failures and provide user feedback.
Add error handling:
const login = async (email: string, password: string) => {
+ try {
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('/')
+ } else {
+ throw new Error('Authentication failed')
}
+ } catch (error) {
+ console.error('Login error:', error)
+ throw error
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 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 login = async (email: string, password: string) => { | |
| try { | |
| 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('/') | |
| } else { | |
| throw new Error('Authentication failed') | |
| } | |
| } catch (error) { | |
| console.error('Login error:', error) | |
| throw error | |
| } | |
| } |
🤖 Prompt for AI Agents
In apps/cli/templates/auth/web/vue/src/lib/auth.ts.hbs around lines 45 to 54,
the login function lacks error handling for authentication failures. Wrap the
API call in a try-catch block to catch any errors during login, and handle them
appropriately by providing user feedback or logging the error. Ensure that the
function gracefully handles failed login attempts without breaking the app flow.
6227ae8 to
864e863
Compare
d52a083 to
fcbdd0d
Compare
e17f27e to
81ab504
Compare
|
@AmanVarshney01 fixed conflict problems |
81ab504 to
61d2e33
Compare
|
New conflicts already 🥲 |
#376
Summary by CodeRabbit
New Features
Documentation
Chores