@ramstack/alpinegear-router 1.1.0-preview.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -0
- package/alpinegear-router.esm.js +883 -0
- package/alpinegear-router.esm.min.js +1 -0
- package/alpinegear-router.js +888 -0
- package/alpinegear-router.min.js +1 -0
- package/package.json +18 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# @ramstack/alpinegear-router
|
|
2
|
+
|
|
3
|
+
`@ramstack/alpinegear-router` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides routing-related directives
|
|
4
|
+
for Alpine.js, enabling client-side navigation and routing functionality.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
### Using CDN
|
|
9
|
+
To include the CDN version of this plugin, add the following `<script>` tag before the core `alpine.js` file:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<!-- alpine.js plugin -->
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-router@1/alpinegear-router.min.js" defer></script>
|
|
14
|
+
|
|
15
|
+
<!-- alpine.js -->
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Using NPM
|
|
20
|
+
Alternatively, you can install the plugin via `npm`:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install --save @ramstack/alpinegear-router
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Then initialize it in your bundle:
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
import Alpine from "alpinejs";
|
|
30
|
+
import router from "@ramstack/alpinegear-router";
|
|
31
|
+
|
|
32
|
+
Alpine.plugin(router);
|
|
33
|
+
Alpine.start();
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<div x-data x-router>
|
|
40
|
+
<template x-route="/">
|
|
41
|
+
Main page
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<template x-route="/article/{id?:int}">
|
|
45
|
+
<div x-format>
|
|
46
|
+
Article #{{ $route.params.id }}
|
|
47
|
+
</div>
|
|
48
|
+
</template>
|
|
49
|
+
|
|
50
|
+
<template x-route="/about" x-route:view="/views/about-us.html"></template>
|
|
51
|
+
|
|
52
|
+
<nav>
|
|
53
|
+
<a x-router:link href="/" :class="{'active': $active }">Main</a>
|
|
54
|
+
<a x-router:link href="/article/123" :class="{'active': $active }">What is routing?</a>
|
|
55
|
+
<a x-router:link href="/about" :class="{'active': $active }">About Us</a>
|
|
56
|
+
</nav>
|
|
57
|
+
|
|
58
|
+
<div x-router:outlet></div>
|
|
59
|
+
</div>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Source Code
|
|
63
|
+
You can find the source code for this plugin on GitHub:
|
|
64
|
+
|
|
65
|
+
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router
|
|
66
|
+
|
|
67
|
+
## Contributions
|
|
68
|
+
Bug reports and contributions are welcome.
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
This package is released as open source under the **MIT License**.
|
|
72
|
+
See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.
|