Removed Motion and added vueuse/motion

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "build": "vite build",
+    "build": "vite-ssg build",
     "dev": "vite --port 3333 --open",
     "lint": "eslint \"**/*.{vue,ts,js}\"",
     "preview": "vite preview",
@@ -14,8 +14,8 @@
   "dependencies": {
     "@vueuse/core": "^7.4.1",
     "@vueuse/head": "^0.7.4",
+    "@vueuse/motion": "^2.0.0-beta.9",
     "dayjs": "^1.10.7",
-    "motion": "^10.5.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.9",
     "prism-theme-vars": "^0.2.2",
@@ -47,6 +47,7 @@
     "https-localhost": "^4.7.0",
     "markdown-it-link-attributes": "^4.0.0",
     "markdown-it-prism": "^2.2.1",
+    "patch-vue-directive-ssr": "^0.0.1",
     "pnpm": "^6.24.3",
     "typescript": "^4.5.4",
     "unplugin-auto-import": "^0.5.4",

src/modules/motion.ts

@@ -0,0 +1,6 @@
+import { MotionPlugin } from '@vueuse/motion'
+import type { UserModule } from '~/types'
+
+export const install: UserModule = ({ app, isClient }) => {
+  isClient && app.use(MotionPlugin)
+}

src/pages/posts/[slug].vue

@@ -7,26 +7,22 @@
 </route>
 
 <template>
-  <div v-if="post && Object.keys(post.currentPost).length !== 0">
-    <Motion
-      :initial="{ opacity: 0 }"
-      :animate="{ opacity: 1}"
-      :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+  <div
+    v-if="post && Object.keys(post.currentPost).length !== 0" v-motion
+    :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
   >
     <div class="text-3xl my-2">
       <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
       <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
     </div>
     <div v-html="post.currentPost.body" />
-    </Motion>
   </div>
-  <router-link class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
+  <router-link v-if="post && Object.keys(post.currentPost).length !== 0" class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
     Back to Posts
   </router-link>
 </template>
 
 <script setup lang="ts">
-import { Motion } from 'motion/vue'
 import { usePostStore } from '~/stores/post'
 
 const post = usePostStore()

src/pages/posts/index.vue

@@ -10,11 +10,9 @@
   <div>
     <h1>Blog</h1>
     <div>
-      <ul v-if="post.postList && post.loading === false" key="test" class="list-none">
-        <Motion
-          :initial="{ opacity: 0 }"
-          :animate="{ opacity: 1}"
-          :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+      <ul
+        v-if="post.postList && post.loading === false" key="test" v-motion class="list-none"
+        :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
       >
         <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
           <li>
@@ -28,25 +26,17 @@
             </div>
           </li>
         </router-link>
-        </Motion>
       </ul>
-
-      <Motion
-        :initial="{ opacity: 0 }"
-        :animate="{ opacity: 1}"
-        :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+      <div
+        v-if="post.loading === false && post.postList.length === 0" class="text-xl"
       >
-        <div v-if="post.loading === false && post.postList.length === 0" class="text-xl">
         No Posts found
       </div>
-      </Motion>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Motion } from 'motion/vue'
-import type { Ref } from 'vue'
 import dayjs from 'dayjs'
 import { usePostStore } from '~/stores/post'
 
@@ -58,7 +48,6 @@ useHead({
 })
 
 const post = usePostStore()
-const show = ref(false)
 
 function convertDate(date: string): string {
   return dayjs(date).format('DD. MMMM YYYY')