Use 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 with ziggy-js library as to get a global route() helper function which you can use to access your routes in your JavaScript.
- Avoid hard-coding urls client-side
- Generate once your routes file
- Compatible with client-side route helper
ziggy-js - Possibility to filter routes to include client-side
New to Masonite ? Please first read the Official 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 on Masonite Discord Community to ask any questions you need!
pip install masonite-js-routesAdd JSRoutesProvider to your project in config/providers.py:
# config/providers.py
# ...
from masonite.js_routes import JSRoutesProvider
# ...
PROVIDERS = [
# ...
# Third Party Providers
JSRoutesProvider,
# ...
]Then you can publish the configuration file in your project if you need to change some parameters:
python craft package:publish js_routesRoute.get()...name("some_name").
- Using
routesview 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.
- In your views, just add this helper where you want to get
Ziggyroutes as a Javascript object (e.g. in<head></head>or at the end of body).
{{ routes() }}Only 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 both only and except will disable filtering altogether and simply return the default list of routes.
Only the routes matching a group or a list of groups will be included if groups are passed to the helpers
FILTERS = {
"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 the routes helper will always take precedence over your other only or except settings.
You can also generate once the routes as a Javascript file. For now it generates a file exporting
Ziggy object routes as it is made to use it with ziggy-js.
To generate the routes, run the craft command (it takes an optional --path argument to change the output path):
python craft js_routes:generate(You could add this into a pipeline, to regenerate it whenever needed).
You will get a file like this:
var Ziggy = {
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 };Then to be able to use it client-side you can refer to ziggy-js documentation. (Note that you don't have to use this library you can use the routes objects as you like.)
Install the library:
npm install ziggy-jsThen in your Vue.js entrypoint you could for example define a global route() mixin (using the route() method from ziggy-js).
- With the option 1,
Ziggywill be available in the global javascriptwindowscope
// app.js
import { createApp, h } from "vue";
import route from "ziggy-js";
import App from "./App.vue";
const app = createApp(App).mixin({
methods: {
route(name, params = {}, absolute = true) {
return route(name, params, absolute, window.Ziggy);
},
},
});
// App.vue
// ...
this.route("users", 2); // == http://ziggy.test/users/2- With the option 2, the routes config must be imported from the generated file (instead of the
windowobject)
// app.js
import { createApp, h } from "vue";
import route from "ziggy-js";
import { Ziggy } from "./routes";
import App from "./App.vue";
const app = createApp(App).mixin({
methods: {
route(name, params = {}, absolute = true) {
return route(name, params, absolute, Ziggy);
},
},
});
// App.vue
// ...
this.route("users", 2); // == http://ziggy.test/users/2A 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]') }}Please read the Contributing Documentation here.
Masonite JS Routes is open-sourced software licensed under the MIT license.