Git Product home page Git Product logo

laravel-js-routes's Introduction

Laravel JS routes

Note

This package is not maintained anymore, I suggest you to use Ziggy since is a bigger one, with more support.

Anyways, thank you so much for your support ๐Ÿ˜„

Command for use Laravel routes in JS

Usage:

composer require halivert/laravel-js-routes

Execute artisan command

php artisan route:tojs

Add the resource to webpack.mix.js:

mix.js("resources/js/routes", "public/js");

Or add route function to bootstrap.js as stated in #1 by @clandestine8

window.route = require('./routes.js').route;
// You can't use absolute routes with this method.

If you want to use absolute urls, you need to have MIX_APP_URL .env var

And to use it, you need to import it

import { route } from "./routes.js";

And voila! you can have the route function, the first parameter is the route name (same as in laravel), the second is an array of parameters or an object, and the third is if you want to use absolute paths, by default true.

License

MIT

Contributing

Pull requests and issues are welcome.

laravel-js-routes's People

Contributors

dansleboby avatar dependabot[bot] avatar geodro avatar halivert avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

laravel-js-routes's Issues

using post method doesn't work

with this package i try to use post method for a single route, but in laravel side i get 'undefined for data

route:

Route::prefix('{language}')->middleware(['setLanguage'])->group(function () {
    Route::prefix('panel')->group(function () {
        Route::get('/user-profile', UserProfileController::class)->name('user-profile');
    });
});

route.js

const routes = {
    //
    "update_profile": {
        "uri": "{language}\/panel\/update_profile"
    },
    //
};
//...

vuejs axios impleemntation:

let formData = new FormData();
formData.append('name', this.name)
formData.append('family', this.family)
formData.append('website', this.website)
formData.append('telegram_id', this.telegram_id)
formData.append('instagram_page', this.instagram_page)
formData.append('avatar', this.avatar)

axios.post(route('update_profile'), formData, {
    headers: {"Content-Type": "multipart/form-data"},
}).then((result) => {
    console.log(result);
}).catch((error) => {
    console.log(error);
})

and output which laravel return for me:

Illuminate\Http\JsonResponse {#772
  #data: ""undefined""
  #callback: null
  #encodingOptions: 0
  +headers: Symfony\Component\HttpFoundation\ResponseHeaderBag {#777
    #computedCacheControl: array:2 [
      "no-cache" => true
      "private" => true
    ]
    #cookies: []
    #headerNames: array:3 [
      "cache-control" => "Cache-Control"
      "date" => "Date"
      "content-type" => "Content-Type"
    ]
    #headers: array:3 [
      "cache-control" => array:1 [
        0 => "no-cache, private"
      ]
      "date" => array:1 [
        0 => "Sat, 03 Apr 2021 04:16:12 GMT"
      ]
      "content-type" => array:1 [
        0 => "application/json"
      ]
    ]
    #cacheControl: []
  }
  #content: ""undefined""
  #version: "1.0"
  #statusCode: 200
  #statusText: "OK"
  #charset: null
  +original: "undefined"
  +exception: null
}

laravel controller action:

public function update_profile(Request $request)
{
    dd(response()->json($request->input('avatar')));
}

error:

Missing parameters

Global Import in Bootstrap.js files

Adding
window.route = require('./routes.js').route;
to bootstrap.js is an easier, more reliable way of importing the routes into webpack and doesn't require editing the Mix JS file

Note: Not really an issue, more of a suggestion, but wanted to add it here for users to see

Include not exclude the rest

Hi,
Here is the config in "app.php" (we should use a separate config file)

'jsroutes' => [
        'name' => 'routes.js',
        'include' => [
            'admin.clients.autocomplete'
        ],
        'exclude' => [
            //
        ],
        'methods' => [
            //
        ],
    ]

With this config "includeRoute" in CreateJSRoutesCommand.php always return true

I made a pull request for the fix of both

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.