Use Glaze to access your Alpas named routes from inside your JavaScript.
You can use Glaze in one of two ways - using glaze template function that will make a global Glaze JavaScript object as well as a route() helper function, you can then call these to access named routes in your JavaScript.
You can also integrate Glaze with Mix by importing it in your asset pipeline. You can then use it from a frontend library like VueJS easily.
// Returns '/posts'
route('posts.index')
// Returns /posts/1
route('posts.show', 1)
route('posts.show', [1])
route('posts.show', {id: 1})- Add Glaze as a Gradle dependency:
implementation 'com.github.alpas:glaze:master'
- Register
GlazeServiceProviderin bothHttpKernelandConsoleKernel:
override fun serviceProviders(app: Application): Iterable<KClass<out ServiceProvider>> {
return listOf(
//...
//...
GlazeServiceProvider::class
)
}
- Add
{{ glaze() }}in one of your layout template's<head>section. Any scripts added after this will have access to a globalGlazeobject and aroute()helper function.
- Publish all the required scripts by using the
alpas glaze:publishconsole command. This will add two scripts —route.jsandglaze.js— inresources/jsfolder. - Open
webpack.mix.jsfile and add the following:
const path = require('path')
mix.webpackConfig({
resolve: {
alias: {
glaze: path.resolve('src/main/resources/js/route.js'),
},
},
})- Open
app.jsand make theroute()method available in every Vue components:
import Vue from 'vue'
import route from 'glaze'
import { Glaze } from './glaze'
// ...
Vue.mixin({
methods: {
route: (name, params, absolute) => route(name, params, absolute, Glaze)
}
})
// ...You can now use the route() method in your Vue components like so: <a :href="route('login')">Login</a>
Or you can call it from your VueJS component's script like so: this.route('login')
You can set the base URL to be used for each routes by extending the GlazeConfig file.