shaunlee / alpinejs-router Goto Github PK

View Code? Open in Web Editor NEW

96.0 96.0 2.0 32 KB

Easy to use and flexible router for Alpine.js

License: MIT License

JavaScript 100.00%

alpinejs-router's People

Contributors

Stargazers

Watchers

Forkers

ilvmd wttw

alpinejs-router's Issues

Page reload changes location to server root

Hi, I like your approach and would like to use your alpinejs-router in a project. However I need a working router for a page in a sub directory of the servers root like /calculator/. When I load your example the first time the URL is

http://127.0.0.1:5500/examples/index.html, however all routes in the example transform the URL to http://127.0.0.1:5500/#/ instead of http://127.0.0.1:5500/examples/#/.

Is there any way I can configure the router to work in a sub directory of the servers root?

Thanks, Bernd

Provide API of `$router` in JS

Hey, thanks for your work.

I am trying to do something in the EventListener of alpine:init depending on the current route. I do not seem to be able to do that, since the magic property $router is not available in JS context.

Is there any way to expose/export an instance of the route object of index.js so the same functions which are accessible in HTML are accessible in JS?

different template, how to make sure the one is active, and others are hidden

Hi @shaunlee

I saw the code, how to make sure the active template is up, and others are hidden?

Thanks
Eric Xin

need to support relative path to files

when using template="./login.html", it still references the login.html at the project root instead of the same folder of current file, no difference of template="/login.html"

Catch-all fallback route for Vite [[question]]

Hi Shaunlee, first thanks for this amazing code!

For the web mode you say:

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

But I don't fully understand this. I'm using Vite (no-vue, just Alpine) and I don't know how to add a catch-all fallback route.

This is the piece I'm using with no luck. Could you help me with this?

  server: {
    proxy: {
      '/hello/world': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        secure: false,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        }
      }
    }
  }

Anchors don't work in hash mode

I don't seem to be able to navigate to an anchor:

Anchor Headline

when I'm in hash mode.

The URL would look like this:

http://127.0.0.1:5500/app/#/test#my-anchor

Unfortunately due to the restrictions of the external static hoster I have to use hash mode. Do you think you could support anchors in hash mode?

Thanks, Bernd

really useful! could you consider adding authentication/authorization features to the router?

Dynamic Routes

Hello, how to add dynamic routes?, there is a fuction like $router.addRoute ?
thx for your work.

How to disable loader on the bottom while loading?

Example does not work ?

From your example (using cdn)

 <div  x-data>
        <a x-link href="/hello/world">Hello World</a>

        <template x-route="/hello/:name">
            <div>Say hello to <span x-text="$router.params.name"></span></div>
        </template>

    </div>

When clicking, browser will just try to go to /hello/world, should there be a prevent.default or something ?

Path attribute of router not properly initialised in v1.2.12

Unfortunately, there seems to be an issue with the new version. At least the path property of $router is not properly initialised when visiting a path, and only changes to the right value some time after. This worked in 1.2.9.

Minimal reproducible example:

index.html

<body x-data x-init="fetchData($router)">
    <p>Data is: <span x-text="$store.someContent"></span></p>
    <script src="/app.js"></script>
</body>

app.js

document.addEventListener('alpine:init', () => {
  Alpine.store('someContent', "")

})

function fetchData(r) {
  router = Alpine.$router ? Alpine.$router : r;

  Alpine.effect(() => console.log("router.path: " + router.path))

  if (router.path == '/fetch'){
    Alpine.store('someContent', "Hello World")
  }
}

Result for v1.2.9

Result for v1.2.12

Thank you for your continuous effort.

$router is not defined

with both cdn.min.js and es6.min.js

Used with vite js and electron js

`$router.params` set to false when accessing route directly

Copying the example from README.md, the value of $router.params is set to false when accessing the route /hello/world directly without using the link provided by x-link.