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">
+  <div
-    <Motion
+    v-if="post && Object.keys(post.currentPost).length !== 0" v-motion
-      :initial="{ opacity: 0 }"
+    :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
-      :animate="{ opacity: 1}"
+  >
-      :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+    <div class="text-3xl my-2">
-    >
+      <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
-      <div class="text-3xl my-2">
+      <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
-        <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
+    </div>
-        <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
+    <div v-html="post.currentPost.body" />
-      </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,43 +10,33 @@
   <div>
     <h1>Blog</h1>
     <div>
-      <ul v-if="post.postList && post.loading === false" key="test" class="list-none">
+      <ul
-        <Motion
+        v-if="post.postList && post.loading === false" key="test" v-motion class="list-none"
-          :initial="{ opacity: 0 }"
+        :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
-          :animate="{ opacity: 1}"
-          :transition="{ duration: 0.5, easing: 'ease-in-out' }"
-        >
-          <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
-            <li>
-              <div class="text-xl">
-                {{ p.title }}
-              </div>
-              <div class="flex justify-start flex-row">
-                <div class="text-xs">
-                  {{ convertDate(p.date_created) }}
-                </div>
-              </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">
+        <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
-          No Posts found
+          <li>
-        </div>
+            <div class="text-xl">
-      </Motion>
+              {{ p.title }}
+            </div>
+            <div class="flex justify-start flex-row">
+              <div class="text-xs">
+                {{ convertDate(p.date_created) }}
+              </div>
+            </div>
+          </li>
+        </router-link>
+      </ul>
+      <div
+        v-if="post.loading === false && post.postList.length === 0" class="text-xl"
+      >
+        No Posts found
+      </div>
     </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')