If you've ever stared at a Vue 3 component, wondering how to refactor it into the Composition API without breaking everything, or if you've wrestled with Nuxt's server-side rendering to fetch data efficiently, you know the pain. The good news: modern AI tools, like the ones you might use daily, can now act as your senior dev buddy, helping you write cleaner code, debug faster, and even optimize for performance. In this guide, I'll share 10 battle-tested prompts that I use to speed up my Vue and Nuxt development. Each one walks through a real problem, the exact prompt to copy, and the kind of result you can expect. Let's dive in.
1. Refactoring Options API to Composition API
Problem: You have a legacy Vue 2 component using the Options API and you want to migrate it to Vue 3's Composition API for better code organization and reusability.
Prompt:
You are a senior Vue.js developer. Refactor the following Options API component to Composition API (script setup). Preserve all functionality and props/emits. Use `ref` and `computed` appropriately, and replace lifecycle hooks with `onMounted`, etc. Show the full code, then explain what changed and why.
Example Result: The AI outputs a new component using <script setup>, with ref for reactive state, computed for derived values, and onMounted for side effects. It also highlights how the code becomes more modular and easier to test.
2. Generating Vue 3 Components with TypeScript and Props Validation
Problem: You need a reusable button component with TypeScript, prop validation, and slots, but writing it from scratch is time-consuming.
Prompt:
Create a Vue 3 component (script setup + TypeScript) for a customizable button. It should support variants (primary, secondary, outline), sizes (small, medium, large), disabled state, and a loading state. Use `defineProps` with type validation and `defineEmits` for click events. Include a `slot` for icon and text. Provide usage examples.
Example Result: The AI returns a well-structured component with proper TypeScript interfaces, prop validators, and a clean template. It also shows how to use it: <AppButton variant="primary" @click="handleClick">Submit</AppButton>.
3. Optimizing Nuxt Data Fetching with useFetch vs useAsyncData
Problem: You're building a Nuxt 3 app and you're not sure whether to use useFetch or useAsyncData for your API calls, leading to redundant requests and slow page loads.
Prompt:
Explain the difference between `useFetch` and `useAsyncData` in Nuxt 3. When should I use each? Provide code examples for a typical blog page that fetches a list of posts and a single post by ID, including error handling and loading states.
Example Result: The AI gives a clear comparison: useFetch is for simple GET requests, while useAsyncData is for more complex scenarios with custom fetchers. It provides two examples, showing how to fetch posts with useFetch and a single post with useAsyncData, including error handling via error and pending refs.
4. Creating a Custom Vue 3 Directive for Lazy Loading Images
Problem: Your images are blocking page load, hurting performance. You want to implement lazy loading as a reusable directive.
Prompt:
Write a custom Vue 3 directive `v-lazy` that uses IntersectionObserver to lazy load images. The directive should work on img tags and set the `src` attribute only when the element is in the viewport. Include a fade-in effect when loaded, and handle fallback for browsers without IntersectionObserver. Provide the code and an example of how to register the directive globally.
Example Result: The AI produces a complete directive with IntersectionObserver, a fallback to load the image immediately if the observer is not available, and a CSS transition for fade-in. It also shows how to register it in main.js or a Nuxt plugin.
5. Debugging Vue 3 Reactivity with toRaw and markRaw
Problem: You're encountering issues with Vue's reactivity system, like unnecessary re-renders or performance bottlenecks when dealing with large objects. You need to understand and use toRaw and markRaw.
Prompt:
Explain `toRaw` and `markRaw` in Vue 3. Provide a practical example where `markRaw` is needed (e.g., a large non-reactive object like a map instance) and where `toRaw` is useful (e.g., when you need to pass a reactive object to a non-Vue library). Show code snippets.
Example Result: The AI explains that markRaw prevents a value from being converted to reactive, which is great for third-party objects that don't need tracking. toRaw returns the raw object from a reactive proxy. It shows a scenario with a Leaflet map instance and a case with Lodash debounce.
6. Building a Pinia Store with Persistence
Problem: You're using Pinia for state management and you need to persist the store's state to localStorage so that user preferences survive page reloads.
Prompt:
Create a Pinia store for a user preferences (e.g., theme, language, notifications). Include actions to update each preference. Show how to add persistence using `pinia-plugin-persistedstate` (or a manual watcher). Provide the full store code and the setup in `main.js`.
Example Result: The AI returns a store defined with defineStore, a state with theme, language, and notifications, and actions like toggleTheme. It also shows the plugin setup: import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' and pinia.use(piniaPluginPersistedstate). The store uses persist: true to automatically save to localStorage.
7. Handling Authentication in Nuxt with Middleware
Problem: You need to protect routes in your Nuxt 3 app so that only authenticated users can access them, and redirect unauthenticated users to the login page.
Prompt:
In Nuxt 3, create an auth middleware that checks if a user is logged in (using a Pinia store or a composable). If not, redirect to `/login`. Show how to define the middleware in `middleware/auth.ts` and apply it to a page. Also, show how to handle server-side rendering: if the request is server-side and the user isn't authenticated, redirect immediately.
Example Result: The AI gives a middleware file using defineNuxtRouteMiddleware, checking useAuthStore().isLoggedIn, and returning navigateTo('/login') if false. It also demonstrates applying it to a page via definePageMeta({ middleware: 'auth' }). For SSR, it mentions using useRequestHeaders to check tokens from cookies.
8. Composing Reusable Logic with Vue Composables
Problem: You're repeating the same logic across components (e.g., fetching data with loading and error states). You want to extract it into a composable.
Prompt:
Write a Vue 3 composable `useFetchData` that takes a URL and returns `data`, `error`, `loading`, and a `refresh` function. Handle aborting the request on component unmount. Show how to use it in a component that fetches user data. Also, show how to make the composable generic with TypeScript.
Example Result: The AI creates a composable using ref, onMounted, and onUnmounted with AbortController. It returns typed refs, and usage: const { data, error, loading, refresh } = useFetchData('/api/user'). The example shows a component template with conditional rendering for loading and error.
9. Dynamic Route Parameters in Nuxt with useRoute and useRouter
Problem: You have a blog with dynamic routes /posts/:id, and you need to fetch the post based on the route parameter, handle route changes, and navigate programmatically.
Prompt:
Explain how to work with dynamic routes in Nuxt 3. Show how to access route parameters with `useRoute`, navigate with `useRouter`, and watch for route changes. Provide a full example of a `pages/posts/[id].vue` component that fetches the post on mount and when the ID changes.
Example Result: The AI explains useRoute().params.id and useRouter().push. It shows a component with watch(() => route.params.id, fetchPost), and also demonstrates using useFetch with a computed key to automatically refetch when the ID changes.
10. Optimizing Nuxt SSR with no-ssr and Lazy Hydration
Problem: Your Nuxt app is slow on initial load because of heavy components rendering on the server. You want to exclude certain parts from SSR or lazy-load them on the client.
Prompt:
In Nuxt 3, how can I optimize SSR by excluding components from server-side rendering? Explain the `<ClientOnly>` component and `ssr: false` option. Also, show how to lazy load a heavy component using `defineAsyncComponent` or Nuxt's built-in lazy loading with `#components`. Provide code examples.
Example Result: The AI demonstrates using <ClientOnly> to wrap a component that should only render on the client, and setting ssr: false in nuxt.config.ts for a page. It also shows dynamic import: const HeavyComponent = defineAsyncComponent(() => import('@/components/Heavy.vue')). This reduces initial bundle size and improves TTI (Time to Interactive).
These 10 prompts cover the most common pain points in Vue 3 and Nuxt development. By integrating AI into your workflow, you not only save time but also learn best practices from the generated code. Try them out, adapt them to your projects, and watch your productivity soar. If you have a favorite prompt that I missed, share it in the comments below! Happy coding!
Comments