docs: tweaks

Author: BobbieGoede

docs/app.vue

@@ -48,11 +48,7 @@ const links: PageLink[] = [
     <TheFooter />
 
     <ClientOnly>
-      <LazyUContentSearch
-        :files="files"
-        :navigation="navigation"
-        :links="links"
-      />
+      <LazyUContentSearch :files="files" :navigation="navigation ?? undefined" :links="links" />
     </ClientOnly>
 
     <UNotifications />

docs/components/content/PresetSection.vue

@@ -18,7 +18,7 @@ const isReplaying = ref(false)
 const replayButton = ref<SVGElement>()
 const demoElement = ref<HTMLElement>()
 
-const { apply } = useMotion(demoElement, props.preset)
+const { apply, set } = useMotion(demoElement, props.preset)
 
 const replayInstance = useMotion(replayButton, {
   initial: {
@@ -27,16 +27,16 @@ const replayInstance = useMotion(replayButton, {
 })
 
 async function replay() {
-  if (isReplaying.value)
-    return
-
   isReplaying.value = true
 
+  replayInstance.set({
+    rotate: 0,
+  })
   replayInstance.apply({
-    rotate: -360,
+    rotate: -180,
   })
 
-  await apply(props.preset.initial)
+  await set(props.preset.initial)
 
   if (props.preset.visible)
     await apply(props.preset.visible)
@@ -47,18 +47,32 @@ async function replay() {
   if (props.preset.enter)
     await apply(props.preset.enter)
 
-  replayInstance.set({ rotate: 0 })
-
   isReplaying.value = false
 }
 
 const { data } = await useAsyncData(`preset-${props.name}`, () =>
   parseMarkdown(
     [
       `::code-group`,
-      `\`\`\`vue [v-motion]\n<template>\n  <div v-motion-${slugify(props.name)} />\n</template>\n\`\`\``,
-      `\`\`\`vue [<Motion />]\n<template>\n  <Motion preset="${props.name}" />\n</template>\n\`\`\``,
-      `\`\`\`json [Preset]\n${JSON.stringify(props.preset, null, 2)}\n\`\`\``,
+      ...[
+        '```vue [v-motion]',
+        '<template>',
+        `  <div v-motion-${slugify(props.name)} />`,
+        '</template>',
+        '```',
+      ],
+      ...[
+        '```vue [<Motion />]',
+        '<template>',
+        `  <Motion preset="${props.name}" />`,
+        '</template>',
+        '```',
+      ],
+      ...[
+        '```json [Preset]',
+        `${JSON.stringify(props.preset, null, 2)}`,
+        '```',
+      ],
       `::`,
     ].join('\n'),
   ))
@@ -76,12 +90,12 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
       <div class="demoContainer relative">
         <client-only>
           <button class="absolute right-4 top-4" @click="replay">
-            <div ref="replayButton">
+            <div ref="replayButton" class="replayButton">
               <Icon name="heroicons-outline:refresh" class="h-6 w-6" />
             </div>
           </button>
           <div ref="demoElement" class="demoElement" @click="replay">
-            <Face />
+            <Face v-once />
           </div>
         </client-only>
       </div>
@@ -120,6 +134,12 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
   border-radius: 16px;
 }
 
+.replayButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .demoElement {
   width: 6rem;
 }

docs/content/docs/1.getting-started/1.index.md

@@ -10,10 +10,21 @@ description: Let's get started with `@vueuse/motion`.
 
 Illustration from [Pebble People](https://blush.design/fr/collections/pebble-people) by [Deivid Saenz](https://blush.design/fr/artists/deivid-saenz).
 
-```bash
+
+::code-group
+```bash [npm]
+npm install @vueuse/motion
+```
+
+```bash [yarn]
 yarn add @vueuse/motion
 ```
 
+```bash [pnpm]
+pnpm add @vueuse/motion
+```
+::
+
 ## Plugin Installation
 
 If you are planning on using the directives (`v-motion`) from this package, you might want to add the plugin to your Vue instance.

docs/content/docs/1.getting-started/2.nuxt.md

@@ -10,18 +10,16 @@ It should work with `nuxt3` and `@nuxt/bridge`.
 
 Add `@vueuse/motion/nuxt` to the `modules` section of `nuxt.config.js`:
 
-```javascript
+```typescript [nuxt.config.ts]
 {
-  // nuxt.config.js
   modules: ['@vueuse/motion/nuxt']
 }
 ```
 
 Then, configure your animations 🤹:
 
-```javascript
+```typescript [nuxt.config.ts]
 {
-  // nuxt.config.js
   runtimeConfig: {
     public: {
       motion: {

docs/content/docs/2.features/2.composable-usage.md

@@ -25,14 +25,14 @@ import { useMotion } from '@vueuse/motion'
 const target = ref<HTMLElement>()
 
 const motionInstance = useMotion(target, {
-    initial: {
-        opacity: 0,
-        y: 100
-    },
-    enter: {
-        opacity: 1,
-        y: 0
-    }
+  initial: {
+    opacity: 0,
+    y: 100
+  },
+  enter: {
+    opacity: 1,
+    y: 0
+  }
 })
 </script>
 ```

docs/content/docs/2.features/3.motion-properties.md

@@ -12,9 +12,9 @@ The default unit of the vast majority of attributes will be resolved and appende
 
 ```javascript
 {
-    opacity: 0,
-    scale: 0.6,
-    y: 100
+  opacity: 0,
+  scale: 0.6,
+  y: 100
 }
 ```
 
@@ -32,8 +32,8 @@ Some keys are **forbidden** (`transition`, `rotate`, `scale`...) as they are now
 
 ```javascript
 {
-    opacity: 0,
-    marginTop: 10
+  opacity: 0,
+  marginTop: 10
 }
 ```
 
@@ -49,9 +49,9 @@ As an addition, you can use `x`, `y`, `z` properties, that will be converted int
 
 ```javascript
 {
-    x: 10,
-    y: 20,
-    scale: 1.2
+  x: 10,
+  y: 20,
+  scale: 1.2
 }
 ```
 

docs/content/docs/2.features/5.variants.md

@@ -226,8 +226,21 @@ You can create your own variants and apply them using the motion instance.
 
 ```vue
 <template>
-  <div v-motion="'customElement'" :initial="{ scale: 1, }" :variants="{ custom:
-  { scale: 2, transition: { type: "spring", stiffness: 100 } } }" />
+  <div 
+    v-motion="'customElement'"
+    :initial="{ 
+      scale: 1, 
+    }"
+    :variants="{ 
+      custom: { 
+        scale: 2, 
+        transition: { 
+          type: "spring",
+          stiffness: 100 
+        }
+      } 
+    }" 
+  />
 </template>
 
 <script setup>

docs/content/docs/3.api/3.use-motions.md

@@ -18,7 +18,7 @@ Each values are [Motion Instances](/docs/features/motion-instance) for the named
 
 ```vue
 <template>
-    <div v-motion="'myName'">
+  <div v-motion="'myName'">
 </template>
 
 <script setup>

docs/nuxt.config.ts

@@ -1,49 +1,54 @@
-import { resolve } from 'node:path'
+import { resolve } from "node:path";
 
 export default defineNuxtConfig({
-  extends: ['@nuxt/ui-pro'],
+  extends: ["@nuxt/ui-pro"],
   features: {
     devLogs: false,
   },
   typescript: {
     includeWorkspace: true,
   },
-  routeRules: { '/api/search.json': { prerender: true } },
+  devtools: { enabled: false },
+  routeRules: { "/api/search.json": { prerender: true } },
   vite: {
     $client: {
       build: {
         rollupOptions: {
           output: {
-            chunkFileNames: '_nuxt/[name]-[hash].js',
-            entryFileNames: '_nuxt/[name]-[hash].js',
+            chunkFileNames: "_nuxt/[name]-[hash].js",
+            entryFileNames: "_nuxt/[name]-[hash].js",
           },
         },
       },
     },
   },
 
   alias: {
-    '@vueuse/motion': resolve(__dirname, '../src/index.ts'),
-    '@vueuse/motion/nuxt': resolve(__dirname, '../src/nuxt/module.ts'),
+    "@vueuse/motion": resolve(__dirname, "../src/index.ts"),
+    "@vueuse/motion/nuxt": resolve(__dirname, "../src/nuxt/module.ts"),
   },
   modules: [
-    '@vueuse/motion/nuxt',
-    '@nuxt/content',
-    '@nuxt/ui',
-    '@nuxtjs/google-fonts',
-    'nuxt-og-image',
-    '@nuxt/image',
+    "@vueuse/motion/nuxt",
+    "@nuxt/content",
+    "@nuxt/ui",
+    "@nuxtjs/google-fonts",
+    "nuxt-og-image",
+    "@nuxt/image",
   ],
 
-  uiPro: { license: 'oss' }, // special license for nuxt & nuxt-modules orgs
+  ui: {
+    icons: ["simple-icons"],
+  },
+
+  uiPro: { license: "oss" }, // special license for nuxt & nuxt-modules orgs
 
   // Nuxt Content
   content: {},
 
   // Fonts
   googleFonts: {
-    display: 'swap',
+    display: "swap",
     download: true,
-    families: { 'DM+Sans': [400, 500, 600, 700] },
+    families: { "DM+Sans": [400, 500, 600, 700] },
   },
-})
+});

docs/pages/docs/[...slug].vue

@@ -20,7 +20,7 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
 // Page Metadata (SEO & OG)
 const { setPageMeta } = usePageMeta()
 setPageMeta({
-  title: page.value.title,
+  title: page.value.title ?? '',
   description: page.value.description,
   headline: headline.value,
 })