Skip to content

Commit

Permalink
- change name to laravel inertia route
Browse files Browse the repository at this point in the history
- update readme for a beter documentation
  • Loading branch information
jecovier committed May 23, 2021
1 parent 845d3ee commit 8226ff8
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 103 deletions.
193 changes: 95 additions & 98 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,71 +1,117 @@
# Laravel Inertia Routes

Render any inertia file inside a folder as html page auotmatically.
```php
/**
* /resources/js/Pages/folder/component.vue
* http://your-domain.com/folder/component
*/
InertiaRoute::get('folder/component');

/**
* Change route:
* /resources/js/Pages/folder/component.vue
* http://your-domain.com/about
*/
InertiaRoute::get('about', 'folder/component');

/**
* Automatically:
* /resources/js/Pages/folder/component.vue
* http://your-domain.com/folder/component
*/
InertiaRoute::bind('folder');

// change framework
InertiaRoute::vue();
InertiaRoute::react();
InertiaRoute::svelte();
```

Instead of doing this:
## Installation

```
composer require jecovier/laravel-inertia-route
```

## Usage

## Single component

```php
Route::get('your/custom/route/home', function(){
Inertia::render('path/to/component/home');
});
Route::get('your/custom/route/about', function(){
Inertia::render('path/to/component/about');
});
Route::get('your/custom/route/contact', function(){
Inertia::render('path/to/component/contact');
});
Route::get('your/custom/route/landing', function(){
Inertia::render('path/to/component/landing');
});
```

you can do this:
/**
* /resources/js/Pages/folder/component.vue
* http://your-domain.com/folder/component
*/
InertiaRoute::get('folder/component');

/**
* Change route:
* /resources/js/Pages/folder/component.vue
* http://your-domain.com/about
*/
InertiaRoute::get('about', 'folder/component');
InertiaRoute::get('/', 'folder/component');
```

Also you can use other verbs:

```php
InertiaRoute::bind('your/custom/route/', 'components/folder/');
InertiaRoute::get('folder/component');
InertiaRoute::post('folder/component');
InertiaRoute::put('folder/component');
InertiaRoute::delete('folder/component');
InertiaRoute::patch('folder/component');
```

Now if you visit http://localhost:8000/your/custom/route/about it will render /resources/js/Pages/path/to/component/about.vue (or react or svelte). All components that you create inside /resources/js/Pages/path/to/component/ will be automatically bind to a route like http://localhost:8000/your/custom/route/{component_name} 🤯.
## Bind folder

Want to serve components from your root domain?
Bind all components inside a folder:

```php
InertiaRoute::bind('/', 'components/folder/');
InertiaRoute::bind('some/folder/');
```

**IMPORTANT!** InertiaRoute::bind use a "catch all" strategy, so put this route at the end of your route file or group.
If you have components like:

## Installation
```
resources/js/Pages/components/folder/index.vue
resources/js/Pages/components/folder/about.vue
resources/js/Pages/components/folder/anotherPage.vue
```

Now you can access them using:

```
composer require jecovier/inertia-route
http://yourdomain.com/some/folder/
http://yourdomain.com/some/folder/about
http://yourdomain.com/some/folder/anotherPage
```

Requirements:
You can change routes for folders using:

- PHP 7.3 | 8
- Laravel 8
- Inertia-Laravel 0.3.3
```php
InertiaRoute::bind('you/route', 'some/folder/');
```

It's posible that this package works with older versions of PHP, Laravel or Inertia, but I don't have time to test it. If you try, please let me know 🙌.
**IMPORTANT!** InertiaRoute::bind use a "catch all" strategy, so put this route at the end of your route file or group.

## What about parameters
### Parameters

If you want to use route paramaters(without any backend proccess) you could define a route like this:

```php
InertiaRoute::get('/your/custom/route/{parameter}', 'path/to/your/component');
InertiaRoute::get('/route/{name}', 'folder/component');
```

And in your component you will receive that variable as a prop:
And your component will receive parameters as props:

vue:

```js
<script>
export default{
props: {
parameter: { required:true }
name: { required:true }
}
}
</script>
Expand All @@ -74,65 +120,38 @@ export default{
svelte:

```js
<script>export let parameter</script>
<script>export let name</script>
```

Reat:

```
Someone could help me with a react example? 🙊
// I don't know react :(
```

## Middlewares... Prefixes... Can

InertiaRoute returns a Route object instance, so you can chained other methods:
Also you can use:

```php
InertiaRoute::get('/your/custom/route/{parameter}', 'path/to/your/component')
->middleware('validateParameter')
->can('viewThis');
```

## I'm really lazy

```php
InertiaRoute::get('path/to/component/{parameter}');
InertiaRoute::bind('components/folder/');
InertiaRoute::get('folder/component/{name}');
```

This automatically bind the route your provide with the folder or component name. In this case:
## Middlewares... Prefixes... Can...

```
http://localhost:8000/path/to/component/{parameter}
```

will be load:

```
/resources/js/Pages/path/to/component/{parameter}.vue (react or svelte)
```

... And for InertiaRoute::bind:

```
http://localhost:8000/components/folder/hola
```

will be load:
InertiaRoute returns a Route object instance, so you can chained other methods:

```php
InertiaRoute::get('/route/{parameter}', 'folder/component')
->middleware('validateParameter')
->can('viewThis');
```
/resources/js/Pages/components/folder/hola.vue (react or svelte)
```

nice, right? 😎

## what if there is no component?
## 404

InertiaRoute verifies if the file exist before try to render it. In case you want to access a non existing component, it will display a 404 page.

## I prefer Svelte or React
## Svelte or React

Yeah, me too (svelte simp here 🙊). By default InertiaRoute will render Vue files, so in most cases you don't need to do anything. But, if you are working with React or Svelte, you could easily switch to those frameworks.
By default InertiaRoute will render Vue files. But, if you are working with React or Svelte, you could easily switch to those frameworks.

In case of **React**:

Expand All @@ -141,40 +160,18 @@ InertiaRoute::react();
InertiaRoute::get('path/to/component/{parameter}');
```

will be load:

```
/resources/js/Pages/path/to/component/{parameter}.js
```

And for **Svelte**:

```php
InertiaRoute::svelte();
InertiaRoute::get('path/to/component/{parameter}');
```

will be load:

```
/resources/js/Pages/path/to/component/{parameter}.svelte
```

## Other Verbs?

I don't know why you want to do that 🤷... but you can!... just define your routes like:

```php
InertiaRoute::get('/your/custom/route/{parameter}');
InertiaRoute::post('/your/custom/route/{parameter}');
InertiaRoute::put('/your/custom/route/{parameter}');
InertiaRoute::patch('/your/custom/route/{parameter}');
InertiaRoute::delete('/your/custom/route/{parameter}');
```
Remember to change framework before declare routes.

## I don't use /resources/js/Pages
## Change root path

Inertiajs suggests this folder in its installation guide, however, you may be use another folder. If that is the case, you can change your root folder with:
Inertiajs suggests resources/js/Pages as default folder, however, you may be use another path. If that is the case, you can change your root folder with:

```php
InertiaRoute::root('your/new/path');
Expand Down
8 changes: 4 additions & 4 deletions composer.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "jecovier/inertia-route",
"description": "use inertia components as pages",
"name": "jecovier/laravel-inertia-route",
"description": "Automatically create routes for any inertia component.",
"type": "library",
"require": {
"php": "^7.3|^8.0",
Expand Down Expand Up @@ -29,13 +29,13 @@
"autoload": {
"psr-4": {
"App\\": "app/",
"Jecovier\\InertiaRoute\\": "src"
"Jecovier\\LaravelInertiaRoute\\": "src"
}
},
"extra": {
"laravel": {
"aliases": {
"InertiaRoute": "Jecovier\\InertiaRoute\\InertiaRoute"
"InertiaRoute": "Jecovier\\LaravelInertiaRoute\\InertiaRoute"
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/InertiaRoute.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?php

namespace Jecovier\InertiaRoute;
namespace Jecovier\LaravelInertiaRoute;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Expand Down

0 comments on commit 8226ff8

Please sign in to comment.