Nouveau Papier Mâché

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

    0.4.0 • Public • Published


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



    This repo is very much in an alpha state and production usage is highly discouraged

    npm install remix-router-vue
    # or
    yarn add remix-router-vue

    Note: If you are using TypeScript you will need to use patch-package and copy the @remix-run+router+0.1.0.patch patch from this repo to internally change the RouteObject.element type from React.ReactNode to any for use with Vue components.

    Notable API Differences

    • For now, you must provide your routes through the DataBrowserRouter routes prop, we don't support the declarative JSX-style <Route> children approach used by react-router-dom

    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 { DataBrowserRouter } 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,
      // Provide a fallbackElement to be displayed during the initial data load
      const fallbackElement = () => h("p", "Loading..."),
      <DataBrowserRouter :routes="routes" :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>


    npm i remix-router-vue

    DownloadsWeekly Downloads






    Unpacked Size

    46.1 kB

    Total Files


    Last publish


    • brophdawg11