GENERATORS

Vue Component Generator

Scaffold a Vue 3 single-file component — <script setup>, Composition or Options API, JS or TS, with typed props and defaults, emits, v-model, named slots, reactive state and a styling approach — plus an optional Vitest test and Storybook story.

What this tool does

It writes a complete Vue 3 single-file component from a name and a list of props, in whichever API style and language your project uses.

API styles

<script setup> — the modern default, least boilerplate. Composition API — an explicit setup() that returns its bindings. Options API — data, props, methods for teams that prefer it or are on an older codebase.

Props and types

In JS you get a runtime defineProps object with type, required and default. In TS you get the generic defineProps<Props>() with a withDefaults wrapper when any prop has a default.

Extras

defineEmits, v-model (a modelValue prop plus an update:modelValue emit), default and named slots, ref / computed / watch / onMounted, and scoped CSS, CSS Modules, Tailwind utility classes or SCSS.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

Which API style should I choose?

script setup for any new Vue 3 project — it is the least verbose and fully supported. Options API only if your team standardises on it or you are migrating an older app.

How are TypeScript props generated?

As the generic defineProps() with a Props interface. If any prop has a default value the component is wrapped in withDefaults(defineProps(), { ... }).

What does the v-model option add?

A modelValue prop and an update:modelValue emit, so the parent can use . For Vue 3.4+ you could switch this to the defineModel() macro by hand.

Can it generate a test?

Yes — a Vitest file that mounts the component with @vue/test-utils and asserts a prop renders. Enable the Test tab.

Is anything sent to a server?

No. The component is assembled entirely in your browser.