Wrapper for injecting laravel routes into your vue application
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2fded77 May 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Initial commit Nov 10, 2017
config Initial commit Nov 10, 2017
dist Adds fix for window loaded Vue and laroute combo May 18, 2018
example Fix index paths Nov 10, 2017
src Adds fix for window loaded Vue and laroute combo May 18, 2018
.babelrc Initial commit Nov 10, 2017
.editorconfig Initial commit Nov 10, 2017
.eslintignore Initial commit Nov 10, 2017
.eslintrc Initial commit Nov 10, 2017
.gitignore Initial commit Nov 10, 2017
.npmignore Initial commit Nov 10, 2017
CHANGELOG.md Initial commit Nov 10, 2017
CONTRIBUTING.md Initial commit Nov 10, 2017
LICENSE Initial commit Nov 10, 2017
README.md Demo Nov 10, 2017
package-lock.json 0.2.0 May 18, 2018
package.json 0.2.0 May 18, 2018

README.md

vue-laroute

npm vue2

Inject Laravel routes into your Vue application via aaronlord/laroute. I actually recommend the alternative and more slim-lined version of this package from AXN-Informatique/laravel-laroute.

DEMO

Using this plugin

Adding vue-laroute to your application is as simple as any other plugin:

import Vue from 'vue';

import VueLaroute from 'vue-laroute';
import routes from '../path/to/laroute.js';

Vue.use(VueLaroute, {
  routes,
  accessor: '$routes', // Optional: the global variable for accessing the router
});

new Vue({
  el: '#app',
});

You can now access your global accessor ($routes by default) in any component via this.$routes, for example:

<template>
  <div>
    <h1>You can access it in your template</h1>
    <nav>
      <ul>
        <li>
          <a :href="$routes.route('home')">Home</a>
        </li>
        <li>
          <a :href="$routes.route('products')">Home</a>
          <ul>
            <li>
              <a :href="$routes.route('products.show', { id: 1 })">Product 1</a>
            </li>
            <li>
              <a :href="$routes.route('products.show', { id: 123 })">Product 123</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <button @click.prevent="purchaseProduct(123)">Purchase product</button>
  </div>
</template>

<script>
  export default {
    methods: {
      purchaseProduct (id) {
        this.$http.post(this.$routes.route('products.purchase', { id: id }))
          .then((response) => {
            // Handler
          });
      },
    },
  }
</script>

📜 Changelog

Details changes for each release are documented in the CHANGELOG.md.

❗️ Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

💪 Contribution

Please make sure to read the Contributing Guide before making a pull request.

©️ License

MIT