chore: update playground

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>

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;
-}

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),
+});