https://github.com/eidellev/adonis-stardust
https://github.com/eidellev/adonis-stardust
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/eidellev/adonis-stardust
- Owner: eidellev
- Created: 2021-08-18T20:17:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-04T17:03:47.000Z (over 1 year ago)
- Last Synced: 2024-11-07T08:09:35.909Z (5 months ago)
- Language: TypeScript
- Size: 1.99 MB
- Stars: 30
- Watchers: 2
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-adonisjs - AdonisJS Stardust - Access Adonis named routes in the client (inspired by Laravel's ziggy library) (Packages)
README
# Adonis Stardust
# ⭐ Adonis Stardust ⭐
Use your adonis named stardust in the client.
## Installation
```shell
npm i @eidellev/adonis-stardust
node ace configure @eidellev/adonis-stardust
```
## Setup
### Register Middleware
Add the Stardust middleware to `start/kernel.ts`:
```typescript
Server.middleware.register([
() => import('@ioc:Adonis/Core/BodyParser'),
() => import('@ioc:EidelLev/Stardust/Middleware'),
]);
```
### Register a Named Route
Create a named route in your stardust file:
```typescript
Route.get('users/:id', () => {
...
}).as('users.show');
```
### In Your View
Add the `@routes` Edge tag to your main layout (before your application's JavaScript).
```blade
@routes
@entryPointStyles('app')
@entryPolintScripts('app')
```
## Client-Side Usage
### Client Setup
Stardust should be initialized as early as possible, e.g. in your application's entrypoint
```typescript
import { initRoutes } from '@eidellev/adonis-stardust/client';
initRoutes();
```
Now you can use the `stardust` helper to access your adonis routes:
```typescript
import { stardust } from '@eidellev/adonis-stardust/client';
stardust.route('users.show', { id: 1 }); // => `/users/1`
/**
* You can also pass path params as an array and they will populated
* according to their order:
*/
stardust.route('users.show', [1]); // => `/users/1`
```
You can also pass query parameters like so:
```typescript
stardust.route('tasks.index', undefined, { qs: { tags: ['work', 'personal'] } });
// `/tasks?tags=work,personal
```
### Checking the Current Route
```typescript
stardust.current; // => 'tasks.index'
stardust.isCurrent('tasks.index'); // => true
```