Menu
Vue Playground
Save
Share
Publish
AI
Sign In
Sign Up
FILES
App.vue
index.html
package.json
script.js
style.css
Items: 0
NPM PACKAGES
vue
3.2.33
Items: 0
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<
script
setup
>
import
{
ref
}
from
'vue'
const
count
=
ref
(
0
)
</
script
>
<
template
>
<
h1
>Hello Vue 3</
h1
>
<
button
@
click
=
"
count
++
"
>Count is: {{
count
}}</
button
>
</
template
>
<
style
scoped
>
button
{
font-weight:
bold
;
}
</
style
>
Console
Web View
AI Chat
Loading chat...
1
Quick Actions...
⌘+k
Go to Dashboard
Go to Home
Go to Courses
Project
Project versions
Theme
View
Share
Project settings
Preferences
Account
Help
New project...
Clone
Archive
Download
Rename
Save
Publish
New Version
v1 (production)
System Theme
Light Theme
Blue Theme
Gray Theme
Dark Theme
Sidebar
⌘+b
Console
⌘+j
Web View
⌘+⇧+v
Share to Web
Allow Editing
Favorite
Default Project
Live Reload
SPA Mode
Live View Delay
Loop Protection
Preview Run on Opening
Preview Zoom
Preview Background (White)
Font Size
Tab Size
Tabs for Indent
Line Wrap
Hard Wrap Column
Formatter Semicolons
Single Quotes
Line Numbers
Minimap
Syntax Validation
Autocompletion
Hover Information
Emmet
Keymap
Clear Cache
Default
Vim
Sign In...
Sign Up...
Online Chat
Help & Support Guide
Report Abuse
Report a Bug
Roadmap
Changelog
Keyboard Shortcuts
Privacy
Social
PlayCode v2026.3.21
Discord
X / Twitter
Project Name
Folder
No folder (Root)
No Data
Cancel
Save
Project Not Saved
Save your project first to share it with others.
Save Project
Deployment
Publish
http://vue.playcode.cc
Custom Subdomain
PRO
.playcode.io
Custom Domains
PRO
Add custom domain
Need help to setup custom domain?
Click here
.
Open
Production
Delete
Clear Logs
Clear on Run
Scroll to End
Zoom
White Background
Chat Settings