Routes in your HTML.
Alpine renders them.

1. 01

   Routes in markup

   Each route is a <template x-route> with one root element. It renders when the path matches and is removed when it stops matching.

2. 02

   Link navigation

   x-link pushes, x-link.replace replaces, and .activity sets active classes. Ctrl-click, new tabs and external links behave as usual.

3. 03

   Dynamic params

   /users/:id exposes $router.params.id. Add a regex to tell routes apart: /:orderId(\d+) only matches digits.

4. 04

   External templates

   Point a route at template="/user.html" to fetch it on first visit, or template.preload to fetch it at start. Inline content is the fallback.

5. 05

   Hash or HTML5 history

   Normal paths by default, or #/ URLs that need nothing from the server. Either mode can run under a base such as /app.

6. 06

   The $router magic

   Read path, query, params and loading. Call push, replace, resolve, is and not from any expression.

<!-- three of the six routes in the frame -->
<body x-data
      x-init="$router.config({ mode: 'hash' })">

<a x-link.activity href="/users/42">User 42</a>

<template x-route="/users/:id(\d+)">
  <h1>User #<span
    x-text="$router.params.id"></span></h1>
</template>

<template x-route="/about"
          template="./about.html"></template>

<template x-route.notfound>
  <h1>Not found</h1>
</template>

Full source: site/demo/index.html. The repository also has a larger examples/ app.

Static paths are looked up directly and is() results are cached, so neither grows with the route count. Dynamic routes are indexed by their first path segment, which is why the first and last of 1,000 cost the same. Reproduce with npm run bench:router; numbers vary by machine.

Set either with $router.config({ mode, base }) in an x-init. In web mode, serve your index.html for any path that is not a static file, or a reload on /users/42 returns a 404.

<script src="https://unpkg.com/@shaun/alpinejs-router@1.x.x/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

$ npm install @shaun/alpinejs-router

$ yarn add @shaun/alpinejs-router

$ bun add @shaun/alpinejs-router

Load the router before Alpine. For older browsers, use dist/es6.min.js instead of dist/cdn.min.js.

Alpine.js 3 is a peer dependency. Register the plugin before Alpine.start(), as below.

Alpine.js 3 is a peer dependency. Register the plugin before Alpine.start(), as below.

Alpine.js 3 is a peer dependency. Register the plugin before Alpine.start(), as below.

import Alpine from 'alpinejs'
import router from '@shaun/alpinejs-router'

Alpine.plugin(router)
Alpine.start()