From 51c0e68f7e4db5a1288e28472fff3d9913505df5 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan.jait@bytedance.com>
Date: Sun, 25 Aug 2024 09:32:31 +0800
Subject: [PATCH] chore: update playground

---
 playground/src/App.vue   | 28 ++++++++++++++++++++++++++++
 playground/src/index.css | 20 --------------------
 playground/src/index.js  | 12 ++++++------
 3 files changed, 34 insertions(+), 26 deletions(-)
 create mode 100644 playground/src/App.vue

diff --git a/playground/src/App.vue b/playground/src/App.vue
new file mode 100644
index 0000000..4ce8093
--- /dev/null
+++ b/playground/src/App.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="content">
+    <h1>Rsbuild with Vue</h1>
+    <p>Start building amazing things with Rsbuild.</p>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
+</style>
diff --git a/playground/src/index.css b/playground/src/index.css
index 164c0a6..85e7e2b 100644
--- a/playground/src/index.css
+++ b/playground/src/index.css
@@ -4,23 +4,3 @@ body {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   background-image: linear-gradient(to bottom, #020917, #101725);
 }
-
-.content {
-  display: flex;
-  min-height: 100vh;
-  line-height: 1.1;
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.content h1 {
-  font-size: 3.6rem;
-  font-weight: 700;
-}
-
-.content p {
-  font-size: 1.2rem;
-  font-weight: 400;
-  opacity: 0.5;
-}
diff --git a/playground/src/index.js b/playground/src/index.js
index dafe9a5..afef416 100644
--- a/playground/src/index.js
+++ b/playground/src/index.js
@@ -1,8 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
 import './index.css';
 
-document.querySelector('#root').innerHTML = `
-<div class="content">
-  <h1>Vanilla Rsbuild</h1>
-  <p>Start building amazing things with Rsbuild.</p>
-</div>
-`;
+new Vue({
+  el: '#root',
+  render: (h) => h(App),
+});