TypeScript icon, indicating that this package has built-in type declarations

0.6.1 • Public • Published


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


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


npm install remix-router-vue

# or

yarn 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.


<script setup>
  import { createBrowserRouter, RouterProvider } from "remix-router-vue";
  import { h } from "vue";

  import Layout from "./Layout.vue";
  import Index, { loader as indexLoader } from "./Index.vue";

  // Define your routes in a nested array, providing loaders and actions where
  // appropriate
  const routes = [
      path: "/",
      element: Layout,
      children: [
          index: true,
          loader: indexLoader,
          element: Index,

  // Create a router from your routes
  const router = createBrowserRouter(routes);

  // Provide a fallbackElement to be displayed during the initial data load
  const fallbackElement = () => h("p", "Loading..."),

  <RouterProvider :router="router" :fallbackElement="fallbackElement" />


<script setup>
  import { Outlet } from "remix-router-vue";

  <!-- Render global-layout stuff here, such as a header and nav bar -->
  <h1>Welcome to my Vue Application!</h1>
  <nav><!-- nav links --></nav>

  <!-- Render matching child routes via <Outlet /> -->
  <Outlet />


  import { useLoaderData } from 'remix-router-vue';

  export async function loader() {
    // Load your data here and return whatever you need access to in the UI
    return { ... };

<script setup>
  // Use the useLoaderData composition API method to access the data returned
  // from your loader
  const data = useLoaderData();

  <p>Check out my data!</p>
  <pre>{{ data }}</pre>

Package Sidebar


Weekly Downloads






Unpacked Size

47 kB

Total Files


Last publish


  • brophdawg11