svelte 5

astro.config.mjs

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

package.json

@@ -10,15 +10,16 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/svelte": "^6.0.1",
     "@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",
+    "@iconify-json/simple-icons": "^1.2.11",
+    "astro": "^4.16.10",
+    "astro-icon": "^1.1.2",
     "pixi-live2d-display": "^0.4.0",
     "pixi.js": "^6.5.10",
-    "tailwindcss": "^3.4.14",
-    "vue": "^3.5.12"
+    "svelte": "^5.1.13",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
     "@catppuccin/tailwindcss": "^0.1.6"

src/components/Model.svelte

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

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.vue";
+import Model from "../components/Model.svelte";
 ---
 
 <Layout title="artie">
@@ -13,5 +13,5 @@ import Model from "../components/Model.vue";
 
   <script is:inline src="/vendors/live2dcubismcore.min.js"></script>
   <script is:inline src="/vendors/live2d.min.js"></script>
-  <Model client:only="vue" />
+  <Model client:only="svelte" />
 </Layout>

svelte.config.js

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