Implement slugs with Vue & Laravel


Have been trying to get a {slug} value to populate for a url. e.g.


Here’s vue component:

<div class="search-panel__results">

    <template slot="item" slot-scope="{ item }">
    <h1><a href="/jobs/('slug')"> <ais-highlight :hit="item" attribute="jobtitle"></ais-highlight></a></h1>

I’ve tried the above methods, but get an error from vue:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
However, it’s not clear how to use a colon on a <a href=""> Thank you for any tips on this…

Hi there,

This is an issue with Vue.js, not Vue InstantSearch. The error message you’re getting is coming from the Vue.js development runtime.

Here’s the Vue.js documentation to bind dynamic values in attributes:


Hi Sarah,

Thank you. Was hoping to see a sample in the algolia docs. But I was able to track down the fix with your help.

<a :href="'/jobs/'+ item.slug">

It was unclear to me how to concatenate the slug.

Thank you again,
Trevor ~