We're backHad an account? Your projects are waiting. Sign in →

Build Vue apps visually.
Own every line.

Vueplay turns drag-and-drop into clean Vue 3 single-file components, committed to a git repo you control. Design it, ship it on your own domain, and walk away with real code whenever you want.

No credit card. 3,500+ developers have built with Vueplay.

studio — HeroSection.vue
Get started
<!-- HeroSection.vue · committed to main -->
<script setup lang="ts">
defineProps<{ title: string }>()
</script>

<template>
  <section class="py-24 px-6">
    <h1 class="text-5xl font-bold">
      {{ title }}
    </h1>
    <RouterLink to="/start"
      class="btn-primary">
      Get started
    </RouterLink>
  </section>
</template>

Real code

Standard Vue 3 SFCs

Script setup, TypeScript and Tailwind. What you see in the editor is exactly what lands in your repo.

Yours

A git repo per project

Every save is a commit. Push to GitHub, clone locally, or open a pull request against your own codebase.

Live

Publish in one click

Server-rendered hosting on a vueplay.app subdomain or your own domain, with HTTPS handled for you.

How it works

From blank canvas to your own domain in an afternoon.

  1. 01

    Start from a template

    Pick a starting point from the library or open a blank canvas.

  2. 02

    Design visually

    Drag elements, tune spacing and colors, and preview every breakpoint.

  3. 03

    Drop into code

    Open any component as code. Edits flow both ways.

  4. 04

    Publish

    Ship to a subdomain instantly, or connect your own domain.

Bring your own AI

Works with Claude, Cursor and any MCP client.

Vueplay doesn't resell AI or meter it in credits. Connect the assistant you already pay for, and it can read your projects, commit changes and publish them. Or put your own Anthropic key into the Studio's AI bar. Same on every plan, including Free.

# Claude Code

claude mcp add --transport http vueplay https://vueplay.com/mcp

“Add a pricing section to my landing page and publish it.”

  • ✓ read_file src/App.vue
  • ✓ write_files · 2 files, one commit
  • ✓ publish → live on your-site.vueplay.app

No lock-in

Leave any time. Take everything.

Every project is a normal git repository of standard Vue 3 code. Clone it, run npm run dev, and it works without Vueplay. We think that's the only fair way to build a builder.

  • Output is plain Vue 3 + Vite. No runtime, no proprietary format.
  • Your repo, your history: every change is a git commit.
  • Components install with npm, like any other package.
  • Export or sync to GitHub whenever you like.
  • Bring your own AI: no credits, no markup on model usage.

Your next Vue app starts as a sketch.

Free forever for public projects. Upgrade when you need a custom domain or private repos.

Pro feature

Upgrade to Pro

Upgrade to unlock more of Vueplay. Cancel any time.

  • Custom domains with HTTPS
  • Private projects
  • No "Made with Vueplay" badge
  • GitHub sync

$120/year

Compare plansBilling settings