remix-router-vue

Vue UI implementation of the react-router-dom API (driven by @remix-run/router)

Warning

This project is in an early stage so use with caution!

Installation

1npm install remix-router-vue
2
3# or
4
5yarn add remix-router-vue

Notable API Differences

• <Await> has a few small differences based on the Vue <Suspense> component
  • Instead of taking an errorElement prop, <Await> leverages an #error scoped slot to render errors. For an example, please refer to the /defer route in the Vue reference application.
  • <Await> will not capture and hand render-errors to the #error slot because render errors in Vue propagate to the parent components of <Suspense>, and <Await> is a child component. See Suspense Error Handling for more details

Example Usage

Please refer to the beta docs for react-router@6.4 for reference on the APIs in question, but the following is a simple example of how to leverage remix-router-vue in a Vue application. You may also refer to the reference application for a more extensive usage example.

App.vue

1<script setup>
2  import { createBrowserRouter, RouterProvider } from "remix-router-vue";
3  import { h } from "vue";
4
5  import Layout from "./Layout.vue";
6  import Index, { loader as indexLoader } from "./Index.vue";
7
8  // Define your routes in a nested array, providing loaders and actions where
9  // appropriate
10  const routes = [
11    {
12      path: "/",
13      element: Layout,
14      children: [
15        {
16          index: true,
17          loader: indexLoader,
18          element: Index,
19        },
20      ],
21    },
22  ];
23
24  // Create a router from your routes
25  const router = createBrowserRouter(routes);
26
27  // Provide a fallbackElement to be displayed during the initial data load
28  const fallbackElement = () => h("p", "Loading..."),
29</script>
30
31<template>
32  <RouterProvider :router="router" :fallbackElement="fallbackElement" />
33</template>

Layout.vue

1<script setup>
2  import { Outlet } from "remix-router-vue";
3</script>
4
5<template>
6  <!-- Render global-layout stuff here, such as a header and nav bar -->
7  <h1>Welcome to my Vue Application!</h1>
8  <nav><!-- nav links --></nav>
9
10  <!-- Render matching child routes via <Outlet /> -->
11  <Outlet />
12</template>

Index.vue

1<script>
2  import { useLoaderData } from 'remix-router-vue';
3
4  export async function loader() {
5    // Load your data here and return whatever you need access to in the UI
6    return { ... };
7  };
8</script>
9
10<script setup>
11  // Use the useLoaderData composition API method to access the data returned
12  // from your loader
13  const data = useLoaderData();
14</script>
15
16<template>
17  <p>Check out my data!</p>
18  <pre>{{ data }}</pre>
19</template>