Package: masonite-js-routes
IntroductionUse your Masonite named routes in Javascript.This package provides a helper that inject your Masonite application routes definition into your views. It will export a JavaScript object of your application's named routes, keyed by their names (aliases).You can combine it withziggy-jslibrary as to get a globalroute()helper function which you can use to access your routes in your JavaScript.FeaturesAvoid hard-coding urls client-sideGenerate once your routes fileCompatible with client-side route helperziggy-jsPossibility to filter routes to include client-sideOfficial Masonite DocumentationNew to Masonite ? Please first read theOfficial Documentation.
Masonite strives to have extremely comprehensive documentation 😃. It would be wise to go through the tutorials there.
If you find any discrepencies or anything that doesn't make sense, be sure to comment directly on the documentation to start a discussion!Hop onMasonite Discord Communityto ask any questions you need!Installationpipinstallmasonite-js-routesConfigurationAdd JSRoutesProvider to your project inconfig/providers.py:# config/providers.py# ...frommasonite.js_routesimportJSRoutesProvider# ...PROVIDERS=[# ...# Third Party ProvidersJSRoutesProvider,# ...]Then you can publish the configuration file in your project if you need to change some parameters:pythoncraftpackage:publishjs_routesUsage⚠️ The routes must have a name, else the package won't pick up your routes ! Ensure you're usingRoute.get()...name("some_name").Usingroutesview helper: routes will be generated at each request and included client-side in the page.Generating routes as Javascript file: routes are generated once in a file and you load this file client-side. When you update your routes, you must regenerate the file.1. Usingroutesview helperIn your views, just add this helper where you want to getZiggyroutes as a Javascript object (e.g. in<head></head>or at the end of body).{{ routes() }}Basic filteringOnly the routes matching a list of name patterns will be included:FILTERS={"only":["welcome.*"],}Only the routes which does not match a list of name patterns will be included:FILTERS={"except":["admin.*"],}Note: You have to choose one or the other. Setting bothonlyandexceptwill disable filtering altogether and simply return the default list of routes.Filtering using GroupsOnly the routes matching a group or a list of groups will be included if
groups are passed to the helpersFILTERS={"groups":{"app":["app.*"],"api":["api.*"],}}and in your view :{{ routes('app') }}or a list of group names{{ routes(['app', 'api']) }}Note: Passing group names to therouteshelper will always take precedence over your other only or except settings.2. Generating routes as Javascript fileYou can also generate once the routes as a Javascript file. For now it generates a file exportingZiggyobject routes as it is made to use it withziggy-js.To generate the routes, run the craft command (it takes an optional--pathargument to change the output path):pythoncraftjs_routes:generate(You could add this into a pipeline, to regenerate it whenever needed).You will get a file like this:varZiggy={routes:{home:{uri:"",methods:["GET","HEAD"],domain:null},login:{uri:"login",methods:["GET","HEAD"],domain:null},},url:"http://ziggy.test",port:null,defaults:{},};export{Ziggy};Client-side usageThen to be able to use it client-side you can refer toziggy-js documentation.
(Note that you don't have to use this library you can use the routes objects as you like.)Quick explanation with Vue.jsInstall the library:npminstallziggy-jsThen in your Vue.js entrypoint you could for example define a globalroute()mixin (using theroute()method fromziggy-js).With theoption 1,Ziggywill be available in the global javascriptwindowscope// app.jsimport{createApp,h}from"vue";importroutefrom"ziggy-js";importAppfrom"./App.vue";constapp=createApp(App).mixin({methods:{route(name,params={},absolute=true){returnroute(name,params,absolute,window.Ziggy);},},});// App.vue// ...this.route("users",2);// == http://ziggy.test/users/2With theoption 2, the routes config must be imported from the generated file (instead of thewindowobject)// app.jsimport{createApp,h}from"vue";importroutefrom"ziggy-js";import{Ziggy}from"./routes";importAppfrom"./App.vue";constapp=createApp(App).mixin({methods:{route(name,params={},absolute=true){returnroute(name,params,absolute,Ziggy);},},});// App.vue// ...this.route("users",2);// == http://ziggy.test/users/2Content Security PolicyA Content Security Policy may block unsafe inline scripts which Ziggy uses to pass the routes to JavaScript. By adding a nonce to your CSP you can allow certain inlined scripts. To add this nonce to Ziggy you can pass it as the second argument to the helper:{{ routes(false, '[YOUR_NONCE]') }}ContributingPlease read theContributing Documentationhere.MaintainersSamuel GirardinLicenseMasonite JS Routes is open-sourced software licensed under theMIT license.