tandd/laravel-route-to-vuejs

Generates the Laravel route to VueJS

6.0.0 2023-02-26 21:53 UTC

Requires

• php: >=5.6.0
• ext-json: *
• ext-mbstring: *

MIT

• TanDD

• laravel
• vuejs-route
• laravel-route-to-vuejs

README

About

Laravel 5 package that allows you to share your Laravel Routes with your vue front-end, using laravel-route-to-vuejs.

Laravel 5.7 notice!

Configuration paths have changed in Laravel 5.7, in order for this package to function properly you need to configure correct paths for jsFile in your config\laravel-route-to-vue-generator.php.

Install the package

In your project:

composer require tandd/laravel-route-to-vuejs --dev

For Laravel 5.4 and below:

For older versions of the framework:

Register the service provider in `config/app.php`

TanDD\LaravelRouteToVueJS\VueJSRouteGeneratorProvider::class,

Next, publish the package default config:

php artisan vendor:publish --provider="TanDD\LaravelRouteToVueJS\VueJSRouteGeneratorProvider"

Ignore route

From Version 4.0.0 you can set the route want to ignore

in the file laravel-route-to-vue-generator.php you can add the route or route's prefix to array ignoreRoute

for example:

.
.
'ignoreRoute' => [
                    'name'   => [
                        'ignition',
                    ],
                    'prefix' => [
                        null,
                        '_debugbar',
                        'sanctum',
                        '_ignition',
                    ],
                ],
.
.

Ignore fields output

From Version 4.0.0 you can set the fields if you want to ignore in the output file. The list you can skip export to the output are: ['domain','prefix','method','action']

you can add them to the ignoreFields for ignore the field

Config example:

'ignoreFields'       => [
                            'domain',
                            'prefix',
                            'method',
                            'action',
                        ],

Using laravel-route-to-vuejs in VueJS3

Generate the include file with

php artisan laravel-route-to-vue:generate

Then defined in Vue main.js file:

import {createApp} from 'vue'
import App from './App.vue'
import LaravelRoute from '@/plugins/laravel-route-to-vue'; //Path to the index file

const app = createApp(App);
app.use(LaravelRoute).mount('#app')

Using in the plugin

import {routeApi} from "@/plugins/laravel-route-to-vue/laravel-routes.generated"; //Path to the generated directiory

console.log(routeApi('route.name'))

Using in template

Vue template:

<div class="age">
    <p>{{ proxy.routeApi('route.name') }}</p>
</div>

<script setup>
    import {getCurrentInstance} from "vue";
    const {proxy} = getCurrentInstance();
</script>

Vue template with the params:

<div class="age">
    <p>{{ proxy.routeApi('route.name',{param1:value, param2:value}) }}</p>
</div>

<script setup>
    import {getCurrentInstance} from "vue";
    const {proxy} = getCurrentInstance();
</script>

Vue script:

<script setup>
    import {getCurrentInstance} from "vue";
    const {proxy} = getCurrentInstance();
    
    console.log(proxy.routeApi('route.name', {param1: value, param2: value}))
</script>

Using laravel-route-to-vuejs in VueJS

Generate the include file with

php artisan laravel-route-to-vue:generate

Then defined in Vue main.js file:

import Vue from 'vue';

import LaravelRoutes from './laravel-route-to-vue.generated';

Vue.use(LaravelRoutes)

Using in template

Blade template:

<div class="age">
    <p>{{ route('route.name') }}</p>
</div>

With the param:

<div class="age">
    <p>{{ route('route.name',['name'=>value]) }}</p>
</div>

Vue template:

<div class="age">
    <p>{{ route('route.name') }}</p>
</div>

Vue template with the params:

<div class="age">
    <p>{{ route('route.name',{param1:value, param2:value}) }}</p>
</div>

Vue script:

console.log(this.route('route.name', {param1: value, param2: value}))

License

Under MIT

Auth

Tandd