fix: dynamic parameters route loaders (#45)

packages/form-actions-nuxt/src/runtime/composables/useLoader.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { useThrottleFn } from "@vueuse/core"
 import { NITRO_LOADER_PREFIX } from "../utils"
 import { useFetch, useRoute } from "#imports"
@@ -18,8 +18,10 @@ export const getLoaderUrl = (loader: Loader) => validLoaderName(loader) ? getLoa
  * @returns
  */
 export async function useLoader<Name extends LoaderName>(loader?: Name | undefined | false, loaderOptions?: LoaderOptions) {
+  const params = computed(() => useRoute().params)
+
   const fetchNuxtLoader: FetchNuxtLoaderFunction<Name> = async (url: string, loaderOptions?: LoaderOptions) => {
-    const { data: result, refresh, pending, error } = await useFetch(url, { key: url, immediate: true, params: useRoute().params, ...loaderOptions })
+    const { data: result, refresh, pending, error } = await useFetch(url, { key: url, immediate: true, params, ...loaderOptions })
     return { result, refresh, pending, error } // Because we're forcing the return, we get a static type here.
   }
 

playgrounds/advanced/layouts/default.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const pages = [
+  { name: "Home", path: "/" },
+  { name: "Cool", path: "/cool" },
+  { name: "Mangas", path: "/mangas" },
+  { name: "Mangas:[id]", path: "/mangas/naruto" },
+  { name: "Books", path: "/books" },
+  { name: "Books:[bookId]", path: "/books/5" },
+  { name: "Todos", path: "/todos" },
+  { name: "Login", path: "/login" },
+  { name: "Advanced Login", path: "/advanced-login" },
+  { name: "Nested:Test", path: "/nested/test" },
+  { name: "Nested:NestedAgain:Books", path: "/nested/nested-again/books" },
+  { name: "Nested:NestedAgain:Stuff", path: "/nested/nested-again/stuff" }
+]
+</script>
+
+<template>
+  <div>
+    <h1>Advanced playground</h1>
+    <nav>
+      <template v-for="page of pages" :key="page.path">
+        <NuxtLink :to="page.path">
+          {{ page.name }}
+        </NuxtLink>
+      </template>
+    </nav>
+    <hr>
+    <slot />
+  </div>
+</template>
+
+<style>
+nav {
+  display: flex;
+  gap: 1rem;
+}
+</style>

playgrounds/advanced/pages/books/[bookId].vue

@@ -5,7 +5,7 @@ const { result } = await useLoader("books")
 
 <template>
   <div>
-    <h1>Stuff</h1>
+    <h1>Dynamic Books</h1>
     {{ route.params }}
     {{ result }}
   </div>

playgrounds/advanced/pages/books/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const route = useRoute()
+const { result } = await useLoader("books")
+</script>
+
+<template>
+  <div>
+    <h1>Main Books</h1>
+    {{ route.params }}
+    {{ result }}
+  </div>
+</template>

playgrounds/advanced/pages/mangas/[id].vue

@@ -10,7 +10,7 @@ const { result } = await useLoader("mangas")
 
 <template>
   <div>
-    <h1>Mangas</h1>
+    <h1>Mangas Nested</h1>
     {{ result }}
   </div>
 </template>

playgrounds/advanced/pages/mangas/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { result } = await useLoader("mangas")
+</script>
+
+<template>
+  <div>
+    <h1>Mangas Main</h1>
+    {{ result }}
+  </div>
+</template>

playgrounds/advanced/pages/nested/here.vue

@@ -0,0 +1,6 @@
+<template>
+  <form method="POST">
+    <input name="test" type="text" value="Hello World">
+    <button>This button will submit a form with a POST method and return JSON directly because progressive enhancement isn't enabled.</button>
+  </form>
+</template>

playgrounds/advanced/server/actions/nested/here.ts

@@ -1,6 +1,6 @@
 export default defineFormActions({
   default: (event) => {
-    return actionResponse(event, { test: "test" })
+    return actionResponse(event, { test: "here" })
   }
 })