50 AI Prompts for Vue.js 3 and TypeScript Frontend Development

Getting the Most from These Vue.js Prompts

Project Setup and Architecture (Prompts 1-8)

• Prompt 4: Write a Vue.js 3 router configuration with four route groups: public routes (home, blog, pricing), auth routes (login, register, forgot-password), protected dashboard routes that require authentication via a navigation guard, and an admin section that requires an admin role.
• Prompt 5: Create a Vue.js 3 navigation guard that reads the authentication state from a Pinia store, redirects unauthenticated users to the login page with a redirect query parameter, restores the original destination after login, and handles the case where the auth state is loading asynchronously.
• Prompt 6: Write a Vue.js 3 layout system using router-meta. Define three layouts: DefaultLayout (with nav and footer), AuthLayout (centered card, no nav), and DashboardLayout (sidebar nav). Show how to specify the layout per route in the router config and how the App.vue dynamically renders the correct layout component.
• Prompt 7: Create a Vue.js 3 plugin that provides a global toast notification system accessible from any component via useToast(). The plugin should queue notifications, show them as a stack in the top-right corner, auto-dismiss after a configurable timeout, and support success, error, warning, and info variants.
• Prompt 8: Write a Vue.js 3 error boundary component that catches errors from child components using the onErrorCaptured hook, shows a fallback UI with a retry button, logs the error with component context, and optionally reports the error to an error tracking service.

Components and Composition API (Prompts 9-22)

• Prompt 12: Create a Vue.js 3 IntersectionObserver composable called useIntersectionObserver that tracks when an element enters the viewport. Use it to implement infinite scroll in a list component that loads more items when the sentinel element becomes visible.
• Prompt 13: Write a Vue.js 3 composable called useFetch that wraps the native fetch API with reactive state for data, error, and loading. Support request cancellation when the component unmounts using AbortController, and automatic refetch when a reactive URL ref changes.
• Prompt 14: Create a Vue.js 3 Dropdown component that renders a list of options, filters them with a search input, supports single and multi-select modes, closes on outside click using a directive, is fully keyboard navigable (arrow keys, Enter to select, Escape to close), and emits typed update:modelValue events.
• Prompt 15: Write a Vue.js 3 virtual scroll component that renders only visible rows for a list of 10,000 items. Calculate visible item indices from the scroll position and container height, render a spacer div above and below the visible items to maintain scroll position, and handle variable-height items.
• Prompt 16: Create a Vue.js 3 drag-and-drop list component that reorders items using the native HTML5 drag API. Track drag state reactively, update the items array on drop, emit a reorder event with the new array, and show a visual drop target indicator.
• Prompt 17: Write a Vue.js 3 composable called useLocalStorage that keeps a ref in sync with localStorage. It should initialise from the stored value if it exists, update localStorage when the ref changes using a watcher, handle JSON serialisation and deserialisation, and accept a default value.
• Prompt 18: Create a Vue.js 3 image lazy loading composable that uses IntersectionObserver to load images only when they scroll into view. Show it being used as a directive (v-lazy-load) on img elements, with a low-quality placeholder shown while the full image loads.
• Prompt 19: Write a Vue.js 3 global confirm dialog composable called useConfirm. It should show a modal with a message and OK/Cancel buttons, return a promise that resolves to true or false based on the button clicked, and be callable from any component or Pinia action without a local component reference.
• Prompt 20: Create a Vue.js 3 form stepper component that manages a multi-step form. Each step is a separate child component. The stepper tracks the current step, validates the current step before advancing, shows a progress indicator, and exposes navigation methods to child steps via provide/inject.
• Prompt 21: Write a Vue.js 3 animated number component that smoothly transitions a displayed number when its value changes. Accept a target value prop and a duration prop, use requestAnimationFrame for smooth animation, apply an easing function, and format the output with Intl.NumberFormat.
• Prompt 22: Create a Vue.js 3 composable called useClipboard that copies text to the clipboard using the Clipboard API, falls back to document.execCommand for older browsers, returns a reactive copied boolean that reverts to false after 2 seconds, and handles errors gracefully.

Pinia, Forms, API Integration, and Testing (Prompts 23-50)

• Prompt 26: Create a Vue.js 3 form with VeeValidate and Zod schema validation. Build a registration form with name, email, password, and password confirmation fields. Validate using a Zod schema, show field-level errors as the user types, disable the submit button until the form is valid, and handle API submission errors by mapping server error messages to specific fields.
• Prompt 27: Write a Vue.js 3 Axios instance setup with request and response interceptors. The request interceptor adds the JWT from the auth store to every request. The response interceptor catches 401 responses, attempts a token refresh, retries the original request once, and redirects to login if the refresh also fails.
• Prompt 28: Create a Vue.js 3 API service layer using a composable called useApi. It should wrap Axios calls with reactive loading and error state, support request cancellation, handle common error formats from the API, and type the response with a generic parameter.
• Prompt 29: Write Vitest unit tests for a Vue.js 3 Pinia store. Test the initial state, test that the login action calls the API and updates state correctly, test that logout clears the state and localStorage, and test the isAuthenticated getter for both logged-in and logged-out states.
• Prompt 30: Create a Vue Test Utils component test for a Vue.js 3 DataTable component. Mount the component with mock data, test that the correct number of rows renders, test that clicking a column header triggers sorting, test that the empty state slot renders when the items array is empty, and test that row click events emit the correct item.
• Prompt 31: Write a Vue.js 3 i18n setup using vue-i18n 9. Configure English and French translations, use the Composition API useI18n hook in components, show how to switch locales at runtime, persist the locale choice to localStorage, and handle plural forms for item count messages.
• Prompt 32: Create a Vue.js 3 theme system that supports light and dark mode. Detect the system preference with matchMedia, allow the user to override it, persist the choice to localStorage, and toggle a data-theme attribute on the html element. Show how to define CSS variables for each theme and use them in Tailwind.
• Prompt 33: Write a Vue.js 3 infinite scroll implementation for a blog post list. Use a Pinia store that tracks loaded pages, an IntersectionObserver on a sentinel element at the bottom of the list, a loading skeleton component shown while fetching, and an end-of-list message when all posts have been loaded.