switch from svelte to vue for model

astro.config.mjs

@@ -1,10 +1,9 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
-import svelte from "@astrojs/svelte";
+import vue from "@astrojs/vue";
 import icon from "astro-icon";
 
-// https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), svelte(), icon()],
+  integrations: [tailwind(), vue(), icon()],
   compressHTML: false,
 });

package.json

@@ -10,15 +10,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/svelte": "^5.7.2",
     "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/vue": "^4.5.2",
     "@iconify-json/simple-icons": "^1.2.9",
     "astro": "^4.16.7",
     "astro-icon": "^1.1.1",
     "pixi-live2d-display": "^0.4.0",
     "pixi.js": "^6.5.10",
-    "svelte": "^4.2.19",
-    "tailwindcss": "^3.4.14"
+    "tailwindcss": "^3.4.14",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@catppuccin/tailwindcss": "^0.1.6"

src/components/Icons.astro

@@ -17,7 +17,7 @@ import { Icon } from "astro-icon/components";
     >
       <img
         class="pointer-events-none"
-        src="https://lanyard.cnrad.dev/api/134306884617371648?hideDiscrim=true&showDisplayName=true&bg=1e2030"
+        src="https://lanyard.cnrad.dev/api/134306884617371648?showDisplayName=true&bg=1e2030&borderRadius=15px&hideActivity=whenNotUsed"
         alt="Discord Presence"
       />
     </div>

src/components/Model.vue

@@ -1,14 +1,16 @@
-<script lang="ts">
+<script setup lang="ts">
   import * as PIXI from "pixi.js";
   import {
     Live2DModel,
     MotionPreloadStrategy,
     MotionPriority,
   } from "pixi-live2d-display";
-  import { onDestroy, onMount } from "svelte";
   import { reZeroModels } from "../utils/constants";
+  import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
+
+  const canvas = useTemplateRef<HTMLCanvasElement>("canvas");
+  const isLoaded = ref(false);
 
-  let canvas: HTMLCanvasElement;
   let app: PIXI.Application;
   let model: Live2DModel;
 
@@ -33,10 +35,10 @@
     return choices[Math.floor(Math.random() * choices.length)];
   }
 
-  onMount(async () => {
+  onMounted(async () => {
     (window as any).PIXI = PIXI;
     app = new PIXI.Application({
-      view: canvas,
+      view: canvas.value,
       autoStart: true,
       backgroundAlpha: 0,
       width: 900,
@@ -51,8 +53,7 @@
     );
 
     app.stage.on("childAdded", () => {
-      canvas.style.opacity = "1";
-      canvas.style.cursor = "pointer";
+      isLoaded.value = true;
     });
     app.stage.addChild(model as unknown as PIXI.DisplayObject);
 
@@ -72,14 +73,13 @@
     model.y = 0;
   });
 
-  onDestroy(() => {
+  onUnmounted(() => {
     app.destroy(false);
   });
 </script>
 
-<canvas
-  bind:this={canvas}
-  on:pointerdown={() => model.motion("Tap")}
-  id="live2d"
-  class="cursor-pointer left-0 bottom-0 fixed lg:w-96 w-44 opacity-0 transition-opacity"
-/>
+<template>
+  <canvas ref="canvas" id="live2d" @pointerdown="model.motion('Tap')"
+    class="left-0 bottom-0 fixed lg:w-96 w-44 transition-opacity"
+    :class="[isLoaded ? 'opacity-1' : 'opacity-0', { '!cursor-pointer': isLoaded }]" />
+</template>

src/pages/index.astro

@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import Prompt from "../components/Prompt.astro";
 import Centerpiece from "../components/Centerpiece.astro";
 import Icons from "../components/Icons.astro";
-import Model from "../components/Model.svelte";
+import Model from "../components/Model.vue";
 ---
 
 <Layout title="artie">
@@ -13,5 +13,5 @@ import Model from "../components/Model.svelte";
 
   <script is:inline src="/vendors/live2dcubismcore.min.js"></script>
   <script is:inline src="/vendors/live2d.min.js"></script>
-  <Model client:only="svelte" />
+  <Model client:only="vue" />
 </Layout>

svelte.config.js

@@ -1,5 +0,0 @@
-import { vitePreprocess } from '@astrojs/svelte';
-
-export default {
-	preprocess: vitePreprocess(),
-};