chore: Add examples for the Link navigation

Author: bjufre

example_project/assets/vue/NavigationExample.vue

@@ -0,0 +1,41 @@
+<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
+      >
+      <Link href="/dead" class="border border-white px-4 py-2 rounded">
+        Back to Examples <small>Normal Link</small>
+      </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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Link } from "live_vue"
+import { computed } from "vue"
+
+const props = defineProps<{
+  page: string
+  otherPage: string
+  otherPagePath: string
+  params?: Record<string, any>
+}>()
+const hasParams = computed(() => Object.keys(props.params ?? {})?.length)
+const currentPath = window.location.pathname
+</script>

example_project/lib/live_vue_examples_web/components/layouts/app.html.heex

@@ -12,6 +12,7 @@
           {~p"/sigil", "Sigil"},
           {~p"/prime_vue", "Button (Prime Vue)"},
           {~p"/calendar", "Calendar (Vuetify)"},
+          {~p"/navigation/page_one", "Navigation" } 
         ]}
         navigate={link}
         class="block rounded-lg leading-relaxed font-medium px-2 py-1 -mx-2 hover:bg-orange-600/10 "
@@ -25,4 +26,4 @@
     <%= @inner_content %>
   </div>
 
-</div>
+</div>

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

@@ -0,0 +1,22 @@
+defmodule LiveVueExamplesWeb.Navigation.PageOne do
+  use LiveVueExamplesWeb, :live_view
+
+  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}
+    />
+    """
+  end
+
+  def handle_params(params, _uri, socket) do
+    {:noreply, assign(socket, :params, params)}
+  end
+end

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

@@ -0,0 +1,22 @@
+defmodule LiveVueExamplesWeb.Navigation.PageTwo do
+  use LiveVueExamplesWeb, :live_view
+
+  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}
+    />
+    """
+  end
+
+  def handle_params(params, _uri, socket) do
+    {:noreply, assign(socket, :params, params)}
+  end
+end

example_project/lib/live_vue_examples_web/router.ex

@@ -25,6 +25,9 @@ defmodule LiveVueExamplesWeb.Router do
     live "/sigil", LiveSigil
     live "/prime_vue", LivePrimeVue
     live "/calendar", CalendarLive
+
+    live "/navigation/page_one", Navigation.PageOne
+    live "/navigation/page_two", Navigation.PageTwo
   end
 
   # Other scopes may use custom stacks.