navigation example designed a little bit better 💅

Author: Valian

example_project/assets/vue/NavigationExample.vue

@@ -1,28 +1,61 @@
 <template>
-  <div class="flex flex-col gap-8">
-    <div class="flex gap-4">
-      <Link v-if="hasParams" :patch="currentPath" class="border border-white px-4 py-2 rounded">
-        Page {{ page }}: Patch
-        <small>Remove params</small>
-      </Link>
-      <Link v-else :patch="`${currentPath}?one=1&two=hello&three=world`" class="border border-white px-4 py-2 rounded">
-        Page {{ page }}: Patch
-      </Link>
-      <Link :navigate="otherPagePath" class="border border-white px-4 py-2 rounded"
-        >Page {{ otherPage }}: Navigate</Link
+  <div class="space-y-8">
+    <!-- Link navigate section -->
+    <div class="space-y-3">
+      <h2 class="text-xl font-semibold text-orange-phoenix">Link navigate</h2>
+      <p class="text-white/70 mb-4">
+        Navigate dismounts the current LiveView and mounts a new one, while keeping the current layout. During
+        navigation, a <code class="text-orange-300">phx-loading</code> class is added to indicate loading state. Only
+        works between LiveViews in the same session.
+      </p>
+      <div class="flex gap-4">
+        <Link
+          v-for="page in ['one', 'two']"
+          :key="page"
+          :navigate="`/navigation/page_${page}`"
+          class="inline-block px-4 py-2 rounded-lg bg-white/10 hover:bg-orange-600/20 transition-colors border border-orange-600/30"
+        >
+          Page {{ page }}
+        </Link>
+      </div>
+    </div>
+
+    <!-- Patch section -->
+    <div class="space-y-3">
+      <h2 class="text-xl font-semibold text-orange-phoenix">Patch</h2>
+      <p class="text-white/70 mb-4">
+        Patch updates the current LiveView without mounting/dismounting, sending only minimal diffs to the client. It
+        triggers <code class="text-orange-300">handle_params/3</code> callback and maintains scroll position. If you try
+        to patch to a different LiveView, it falls back to full page reload.
+      </p>
+      <Link
+        :patch="hasParams ? '?' : `?sort=asc&filter=active`"
+        class="inline-block px-4 py-2 rounded-lg bg-white/10 hover:bg-orange-600/20 transition-colors border border-orange-600/30"
       >
-      <Link href="/dead" class="border border-white px-4 py-2 rounded">
-        Back to Examples <small>Normal Link</small>
+        {{ hasParams ? "Remove params" : "Add params" }}
       </Link>
-    </div>
 
-    <div class="flex flex-col gap-2">
-      <p><strong>Page:</strong> {{ page }}</p>
-      <div>
-        <p><strong>Params:</strong></p>
-        <pre v-if="params">{{ JSON.stringify(params, null, 2) }}</pre>
+      <div v-if="params" class="mt-4 p-4 rounded-lg bg-white/5 border border-white/10">
+        <p class="text-orange-phoenix font-medium mb-2">URL Parameters:</p>
+        <pre class="font-mono text-sm">{{ JSON.stringify(params, null, 2) }}</pre>
       </div>
     </div>
+
+    <!-- Href section -->
+    <div class="space-y-3">
+      <h2 class="text-xl font-semibold text-orange-phoenix">Href</h2>
+      <p class="text-white/70 mb-4">
+        Regular href performs HTTP-based navigation with full page reloads. It works everywhere, including across
+        different LiveView sessions and external links. This is the fallback mechanism when live navigation isn't
+        possible.
+      </p>
+      <Link
+        href="/dead"
+        class="inline-block px-4 py-2 rounded-lg bg-white/10 hover:bg-orange-600/20 transition-colors border border-orange-600/30"
+      >
+        Back to Examples
+      </Link>
+    </div>
   </div>
 </template>
 
@@ -31,11 +64,8 @@ import { Link } from "live_vue"
 import { computed } from "vue"
 
 const props = defineProps<{
-  page: string
-  otherPage: string
-  otherPagePath: string
-  params?: Record<string, any>
+  params: Record<string, string>
 }>()
-const hasParams = computed(() => Object.keys(props.params ?? {})?.length)
-const currentPath = window.location.pathname
+
+const hasParams = computed(() => Object.keys(props.params).length > 0)
 </script>

example_project/lib/live_vue_examples_web/live/navigation/page_one.ex

@@ -4,15 +4,7 @@ defmodule LiveVueExamplesWeb.Navigation.PageOne do
   def render(assigns) do
     ~H"""
     <.header>Navigation example: Page one</.header>
-    <.vue
-      v-component="NavigationExample"
-      page="One"
-      other-page="Two"
-      other-page-path={~p"/navigation/page_two"}
-      params={@params}
-      v-socket={@socket}
-      v-ssr={false}
-    />
+    <.vue v-component="NavigationExample" params={@params} v-socket={@socket} />
     """
   end
 

example_project/lib/live_vue_examples_web/live/navigation/page_two.ex

@@ -4,15 +4,7 @@ defmodule LiveVueExamplesWeb.Navigation.PageTwo do
   def render(assigns) do
     ~H"""
     <.header>Navigation example: Page Two</.header>
-    <.vue
-      v-component="NavigationExample"
-      page="Two"
-      other-page="One"
-      other-page-path={~p"/navigation/page_one"}
-      params={@params}
-      v-socket={@socket}
-      v-ssr={false}
-    />
+    <.vue v-component="NavigationExample" params={@params} v-socket={@socket} />
     """
   end