Vue and Nuxt Prompts: From Components and Composables to Routing and Pinia Stores

Modern front-end development is becoming as much about asking the right questions as it is about writing code. With AI assistants becoming an everyday tool, the speed at which you build a Vue 3 or Nuxt application often depends on your prompt engineering skills. This is particularly true for repetitive tasks like creating components, wiring composables, setting up routes, and configuring Pinia stores.

Instead of reviewing dozens of outdated tutorials, a well-crafted prompt acts as a living snippet that generates idiomatic, TypeScript-safe code in seconds. In this article, we'll walk through a practical, skill-level-based collection of Vue and Nuxt prompts. From basic component blueprints to complex routing patterns and state management, you'll get ready-made prompts, examples of their results, and smart tips for adapting them to your own projects.

Why Prompt-Driven Vue Development Works

Vue 3 and Nuxt have strong conventions: the Composition API, setup scripts, auto-imports, and the file-system router. A good prompt captures these conventions and turns them into an immediate scaffold. This reduces cognitive load, keeps your code consistent, and frees time for business logic and design. The key is to provide enough context in the prompt — the framework version, language (TypeScript/JavaScript), and the exact behavior you need.

For example, a vague prompt like "create a form component" returns generic HTML. But a detailed prompt with props, emits, validation, and style system yields production-ready code. Below we've grouped prompts into Basic, Advanced, and Expert categories so you can start with simple tasks and move to architecture-level challenges.

Basic Prompts: Component Blueprints

Basic prompts are the building blocks of daily work: single-file components (SFC), props, events, and slots. They usually follow a simple template: specify the component purpose, its props, whether you need TypeScript, and the styling approach.

A useful prompt for a standard Vue component:

Create a Vue 3 SFC using script setup with TypeScript. The component is a customizable button with the props variant (primary, secondary, danger), size (small, medium, large), and disabled. Emit a click event, support the default slot, and add scoped styles with CSS variables.

In a real scenario, the AI returns a complete .vue file:

<script setup lang="ts">
defineProps<{
variant?: 'primary'

| 'secondary' | 'danger'
size?: 'small'

| 'medium' | 'large'
  disabled?: boolean
}>()

const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void
}>()
</script>

<template>
  <button
    class="btn"
    :class="[`btn--${variant ?? 'primary'}`, `btn--${size ?? 'medium'}`]"
    :disabled="disabled"
    @click="emit('click', $event)"
  >
    <slot />
  </button>
</template>

<style scoped>
.btn { border-radius: 8px; cursor: pointer; }
.btn--primary { background: #42b883; color: #fff; }
.btn--danger { background: #e74c3c; color: #fff; }
.btn--small { padding: 4px 8px; }
// ...
</style>

Other basic prompts cover lists, modals, and data-display components. Here are several useful categories:

Advanced Prompts: Composables and Reusable Logic

Moving beyond components, composables are the heart of logic reuse in the Composition API. Prompts for composables should define the state to manage, the methods to expose, and any lifecycle implications.

A classic example — a scroll position tracker:

Write a composable called useScrollPosition. It should track the current x and y scroll coordinates, update them on window scroll events, and automatically clean up the event listener on unmount. Use ref and onMounted/onUnmounted and return readonly values.

The generated composable might look like this:

import { readonly, ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

function update() { x.value = window.scrollX; y.value = window.scrollY }

onMounted(() => window.addEventListener('scroll', update, { passive: true }))
onUnmounted(() => window.removeEventListener('scroll', update))

export function useScrollPosition() {
  return { x: readonly(x), y: readonly(y) }
}

Notice the prompt specified “handle cleanup” — otherwise the listener would leak. For richer composables, also mention dependencies, error handling, and return types. Advanced prompt patterns typically follow: use+Domain, with clear inputs, lifecycle behavior, and a testable return shape.

Routing Prompts in Nuxt

Nuxt's file-based routing makes prompt assistance especially powerful. You don't need to write router config; instead, generate page components, middleware, and route-related code.

A practical routing prompt:

In a Nuxt 3 project, create a dynamic route content/[slug].vue. Fetch data using useFetch to an API endpoint based on slug. Handle loading state and a 404 case. Use definePageMeta to set the layout to default and add a page transition.

The result is a page component that demonstrates useRoute, useFetch, and error handling:

<script setup lang="ts">
import type { Post } from '~/types'

const route = useRoute()
const { data: post, error } = await useFetch<Post>(
  `/api/posts/${route.params.slug}`
)

if (error.value) {
  throw createError({ statusCode: 404, statusMessage: 'Post not found' })
}

definePageMeta({ layout: 'default', pageTransition: { name: 'fade' } })
</script>

<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

Other Nuxt routing prompts can generate middleware for authentication, nested pages, and validation helpers. Here's a quick reference:

Expert Prompts: Pinia Stores and Architecture

When your app grows, you need centralized state. Pinia is the official Vue store, and prompts can design a store with proper getters, state, and actions — even with async requests.

Prompt for an authentication store:

Write a Pinia store called useAuthStore in a Nuxt 3 project. State should include user, token, and isAuthenticated. Actions: login(email, password) calls an API, stores the response in state and localStorage, and logout() clears the state. Provide a currentUser getter and a isLoggedIn getter. Use TypeScript and follow the setup-store style.

The generated store:

export const useAuthStore = defineStore('auth', () => {
  const user = ref<User | null>(null)
  const token = ref<string | null>(null)

  const isAuthenticated = computed(() => !!token.value)
  const currentUser = computed(() => user.value)

  async function login(email: string, password: string) {
    const res = await $fetch<{ token: string; user: User }>('/api/login', {
      method: 'POST', body: { email, password }
    })
    token.value = res.token
    user.value = res.user
    localStorage.setItem('token', res.token)
  }

  function logout() {
    token.value = null
    user.value = null
    localStorage.removeItem('token')
  }

  return { user, token, isAuthenticated, currentUser, login, logout }
})

Notice how getters became computed properties and actions became functions — the setup-store style. Add error handling, loading state, and persistence to make the prompt even more robust.

Comparing Prompt Patterns

To choose the right prompting style, it helps to see how simple and detailed prompts differ in result quality:

The pattern is clear: the more constraints you provide (framework version, language, style, lifecycle, edge cases), the more useful the generated code will be.

Best Practices for Writing Vue and Nuxt Prompts

Create a reusable prompt template that you adapt per task. Start with a role or a goal: "Act as a senior Vue developer." Then specify the technical context: Vue 3, Nuxt 3, TypeScript, UnoCSS, etc. Include functional requirements — actions, events, async flow — and finally mention quality expectations like "handle errors", "add JSDoc", or "use defineStore setup style".

For composables, always ask for lifecycle cleanup. For routes, mention the file path and API endpoints. For Pinia stores, specify the storage pattern (options or setup). You can also chain prompts: first generate the component, then ask for unit tests and a storybook entry.

Conclusions and Next Steps

Structured prompts turn Vue and Nuxt development from a manual chore into a conversational task. We started with basic component blueprints, moved to reusable composables, covered Nuxt routing, and ended with Pinia stores. Each prompt in this collection is designed to be copied, adjusted, and combined with your project's unique details.

Think of your prompt as both specification and documentation. The more you invest in the prompt, the less you spend on bug fixes and refactors. Start with the basic prompts today, then push into the advanced and expert ones. Your future self — and your codebase — will thank you.

If this article helped you refine your prompt workflow, subscribe to the Asibiont blog for more practical guides on Vue, Nuxt, and modern front-end development. Ready to level up your prompts? Build your next component in minutes instead of hours.