Built on top of the core x-if directive, x-route aims to simplify some of the process of having select content appear on different routes for simple Single Page Applications build with AlpineJS

Before:
<template x-if="window.location.path.includes('/products')"></template>

After:
<template x-route="products"></template>

Note: To enable consistent reactivity, this uses a shim for history.pushState.

Install

npm i @ekwoka/x-router

Usage

Import into your JS build as shown.

import Alpine from "alpinejs"
import Router from "@ekwoka/x-router"

Alpine.plugin(Router)

window.Alpine = Alpine
Alpine.start()

Add x-route to a <template> tag. As with x-if and x-for, the template needs to have a single child.

For simple first level routes, just add x-route.

By default, these are evaluated as strings, not as reactive variables. This is for simplicity, as dynamic routes seems against the idea of a router.

<template x-route></template> // root

<template x-route="products"></template>
// domain.com/products

To use a specific level in the route, apped .[index]. This can be helpful for handling nested routes.

<template x-route.1="orders"></template>
// will show on domain.com/customer/orders and domain.com/account/orders

<template x-route.0="account"> // domain.com/account
  <div>
    <template x-route.1="orders"></template> // domain.com/account/orders
    <template x-route.1="settings"></template> //domain.com/account/settings
  </div>
</template>

To use the entire route, just append .full to the directive:

<template x-route.full="account/orders"></template> 
// will show on domain.com/account/orders
// will not show on domain.com/account/settings or domain.com/custom/orders

To use a reactive variable from your Alpine component, append .reactive to the directive.

<div x-data="{routeURL: 'account/orders'}">
  <template x-route.full.reactive="routeURL"></template>
</div>

Trigger page changes in a normal manner:

history.pushState({},'products','/products')

Known Limitations

• No support for anything that changes the current route other than history.pushState

Roadmap

• Support for other methods of URL change

Author

👤 Eric Kwoka

• Github: @ekwoka

Show your support

Give a ⭐️ if this project helped you!