12 Tips for Creating Vue Components with AI Agents

AI undoubtedly writes code faster than you, but it doesn't always produce the best results. The sweet spot of modern development is a synergy between traditional development practices and AI assistance. In this article, let's explore 12 practical tips for nurturing this synergy when building Vue components.

1. Use (Slash) Commands for Component Creation

You're probably familiar with rules files but have you tried using slash commands? They're great for codifying re-usable workflows that can be triggered with just a few keystrokes.

For example, you could create a custom command in Cursor to start work on a new component with a /newComponent command.

It could include:

1. Examples of project conventions (like using TypeScript, Composition API, TailwindCSS and JS Docs)
2. Instructions on component naming conventions (for a great starting point see the Vue.js Style Guide.)
3. Steps to create supplemental files like unit tests and documentation (what better way to make sure you don't miss anything?)
4. A checklist of things to do after the component is created (e.g. run npm run lint to check for errors, run npm run test:unit to run the unit tests, etc.)

Not sure how to create a custom command in your coding tool of choice? Most of them have them now:

• Claude has custom slash commands
• Cursor has "Commands" (they're initiated by typing a slash character 😉)
• Github Copilot has reusable prompts
• Windsurf calls them "Workflows"
• Antigravity has them too (just not documented yet, ) (Just add to .agent/workflows/)

These commands are even distributable via MCP servers (though they call them "Prompts").. This means you could easily share them between projects, teams, or anyone else who wants to use them and manage them in a central location.

I've been preferring these commands over rules lately because they give me a little more control over the process.

2. Use TypeScript and ESLint as "Guardrails"

AI agents are not deterministic. They make guesses. TypeScript and ESLint act as the logical and unbreakable "walls" that keep the AI on the road. When an agent generates code that violates a type definition, the red squiggly lines provide immediate feedback. Many tools (like Cursor) automatically add TS and ESLint errors to the running agent context, meaning agents can self-correct instantly.

For times when the agent doesn't self-correct, you can often just hit "Add to Chat" on the error to quickly debug.

In rare cases where agents miss these errors altogether, your build process will catch them as a last line of defense.

So if you're still building Vue with vanilla JS, you're missing out on a lot of the benefits of modern development tools.

3. Write Custom ESLint Rules for Your Project Standards

If you find yourself constantly telling the AI "don't do X" or "stay away from Y" and you've tried correcting the behavior with a custom rule only to have it inconsistently followed, it's time to try a custom ESLint rule.

Unlike a rules file, a custom ESLint rule is deterministic and has all the benefits mentioned above. BUT you aren't limited to off-the-shelf rules.

You can create a custom rule that is specific to your project standards and enforce them consistently.

Checkout this article for a complete guide to writing your own ESLint rules.

4. Document Props and Events with JSDocs

AI loves context. When you define props, add JSDoc comments. Your agent will use these comments to understand the component and its props, and as an added bonus, you'll see these docs on hover of props in your IDE.

interface Props {
  /**
   * The GitHub username to fetch profile data for.
   * @example "danielkellyio"
   */
  username: string;
}

When you ask the AI to "use the GithubProfileCard component," it reads these docs to understand how to use it correctly, reducing hallucinations (incorrect or made-up information generated by the AI).

As an added bonus, you'll see these docs yourself when you hover over the props on the component usage in your IDE.

5. Start with an Image

Describing a UI layout in text is inefficient and less than ideal. Modern agents are multi-modal.

1. Take a screenshot of a design (Figma, Dribbble, or a napkin sketch).
2. Paste it into the chat.
3. Prompt: "Build this Vue component."

This "Image-to-Code" workflow is often 10x faster than text prompting. As the old saying goes, "an image is worth a thousand words."

💡 Bonus Tip! You can even use AI to generate bespoke images of design elements. Use Gemini 3 for some really cool results. This is especially useful during the ideation phase before a design system is established.

6. Document Your Codebase with Markdown in the Same Project

Agents are only as smart as the context they can see and ALL AI centric IDEs nowadays index your codebase to make it searchable. So, it only makes sense to document your codebase in the same project so it's discoverable by default.

Create a docs folder and add Markdown files explaining your architecture and even business requirements (e.g., STATE_MANAGEMENT.md, STYLING_GUIDE.md, PROJECT_OVERVIEW.md)

Nuxt Content is actually a great way for these docs to pull double duty as a source of truth for both agents and humans.

Often, the agent will find the docs automatically but if it doesn't you can always reference them easily with an @ prefix (or your IDE's specific shortcut) in the chat.

7. Distinguish Between “Smart and Dumb” (Presentational and Provider) Components

AI excels at building "Dumb" (Presentational) components—pure UI that takes props and emits events. It's also really great at complex business logic and API calls, so it's tempting to do all the things in one component. But such "Smart" components that handle complex business logic or API calls can be difficult to test and maintain (for both humans and agents alike). Ask agents to build presentational components separately from the "Smart" components and extract business logic into composables.

Then use wrapping Provider components to wire up the "Dumb" components to a backend service or state management system. Here's an example of how I did this with GithubProfileCard and GithubProfileCardProvider components:

<!-- GithubProfileCardProvider.vue -->
<script setup lang="ts">
const props = defineProps<{
  /**
   * The GitHub username to fetch profile data for.
   */
  username: string
}>()

const user = ref<GithubUser | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)

async function fetchUserData() {
  // fetching and state setting logic here
}

watch(
  () => props.username,
  () => fetchUserData(),
  { immediate: true }
)
</script>

<template>
  <GithubProfileCard :user="user" :loading="loading" :error="error" />
</template>

<!-- GithubProfileCard.vue -->
<script setup lang="ts">
defineProps<{
  /**
   * The GitHub user data to display.
   */
  user: GithubUser | null
  /**
   * Whether the data is currently loading.
   */
  loading?: boolean
  /**
   * Error message if the fetch failed.
   */
  error?: string | null
}>()
</script>

<template>
<!--Displayed the user card, loading state, and error state here-->
<!-- Since seperated from the API request, the LLM and I can easily pass in dummy values for testing-->
</template>

💡 TIP: This can even be part of your newComponent command.

8. Give AI a Dedicated Playground and Eyes

AI often writes code that looks correct but renders poorly. Especially for longer running agents, it's a good idea to give them a playground to actually see the component in the browser without worrying about the rest of the application (logging in, fetching data, etc).

• Use Storybook or Histoire to preview components in different states in the browser. Or even more simply, create a dedicated route to view the component in isolation.

• Instruct agents in commands or rules to use built in browser tools (like Cursor's Browser Tool or Google Antigravity's Screenshots and/or Browser Recordings) to view the component in the browser.

  This visual feedback loop usually allows the AI to self-correct CSS issues all by itself.

  💡 TIP: If your agent doesn't have these built-in tools, you can always use the Playwright MCP.

9. Follow Strict Naming Conventions

AI guesses intent based on names.

• UserCard.vue tells the AI this is a display component.
• UserEdit.vue tells the AI this involves a form
• useUser.ts tells the AI this is a composable for interacting with the user data.

If your naming is inconsistent, the AI will make inconsistent assumptions. I recommend sticking to the naming conventions in the Vue Style Guide as a first step and customizing them further to fit project needs (for example, with a Provider suffix, etc.)

10. Break Projects Into Simpler Packages with Clearly Documented APIs

Large, monolithic codebases can confuse AI agents because there is simply too much context to process at once. If you break your project into smaller internal packages (e.g., @ui/core, @feature/auth), the AI only needs to understand the public API of those packages to use them, rather than reading every single file inside them.

This is not just a good idea for AI, but has been proven to be a best practice for humans as well!

11. Prompt Agents to Extract Into Simpler Components

When an AI generates a 400+ line Vue file, stop.

Prompt: "Refactor this component by breaking it into smaller components"

Agents are excellent refactorers, and keeping files small helps the agent ignore irrelevant context in future chats.

12. Ask Agents to Write Tests with the Component Code in Context

Don't write tests manually. As soon as the component is built, keep the session open.

Prompt: "Write tests for the component." or include this step in your newComponent command.

Since the agent holds the code structure in its short-term memory, it can generate highly accurate tests immediately.

Do note, this is NOT foolproof and you should definitely review and understand the tests yourself.

One approach I've heard to reduce the risk of ineffective tests is to prompt the agent to write failing tests first, running them to verify they fail, and then implement the functionality until they pass.

This is similar (but not exactly the same) to the Test-Driven Development (TDD) approach with a Red-Green-Refactor cycle. The main difference is that you still let the agent write many tests at one time (instead of the traditional one at a time). I haven't experimented much with this approach myself, but will definitely attempt it in future workflows.

13. Bonus Tip: Have Realistic Expectations

AI agents are not perfect and will make mistakes:

1. They cannot understand the entire context of the codebase and project standards.
2. They cannot understand the intent of every single prompt.
3. They are NOT always up to date on the latest best practices and tools.
4. At the end of the day, they are just a fancy algorithm of probability and pattern recognition.

So... don't expect perfect code from the start or a 100x boost in productivity. Expect to review and refine the code, docs, tests, and more for yourself and be thrilled with the 3x productivity boost you get.

Conclusion

These 12 tips (plus one bonus 😉) will help you create a more effective workflow when building Vue components with AI agents. The key is finding the right balance between leveraging AI's speed and maintaining code quality through proper tooling, standards, and oversight. Remember: AI is a powerful assistant, but you're still the architect. Use these practices to guide AI toward better outcomes while maintaining control over your codebase.