Add Vue 2 & 3 Plugins

README.md

@@ -342,35 +342,32 @@ route('home', undefined, undefined, Ziggy);
 
 #### Vue
 
-To use the `route()` helper in Vue components, you can add a mixin to make it available globally:
+Ziggy includes a Vue plugin to make it easy to use the `route()` helper throughout your Vue app:
 
 ```js
-// app.js
+import { createApp } from 'vue';
+import { ZiggyVue } from 'ziggy';
+import { Ziggy } from './ziggy';
+import App from './App';
 
-import route from 'ziggy';
+createApp(App).use(ZiggyVue, Ziggy);
+
+// Vue 2
+import Vue from 'vue'
+import { ZiggyVue } from 'ziggy';
 import { Ziggy } from './ziggy';
 
-Vue.mixin({
-    methods: {
-        route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
-    },
-});
+Vue.use(ZiggyVue, Ziggy);
 ```
 
-> Note: If you include the `@routes` Blade directive in your views, the `route()` helper will already be available globally, including in your Vue app, so you don't need to import `route` or `Ziggy`. For convenience, you can optionally create a simpler version of the above mixin to make `route()` easily accessibly inside your components:
->
-> ```js
-> Vue.mixin({ methods: { route }});
-> ```
+> Note: If you use the `@routes` Blade directive in your views, Ziggy's configuration will already be available globally, so you don't need to import the `Ziggy` config object and pass it into `use()`.
 
-Now you can use the method in your Vue components like so:
+Now you can use `route()` anywhere in your Vue components and templates, like so:
 
 ```html
 <a class="nav-link" :href="route('home')">Home</a>
 ```
 
-Thanks to [Scott Christianson](/~https://github.com/Archer70) for originally sharing [this solution](/~https://github.com/tighten/ziggy/issues/70#issuecomment-369129032)!
-
 #### React
 
 To use Ziggy with React, start by importing the `route()` function and your Ziggy config. Because the Ziggy config object is not available globally in this setup, you'll have to pass it to the `route()` function manually:

src/js/index.js

@@ -5,3 +5,11 @@ export default function route(name, params, absolute, config) {
 
     return name ? router.toString() : router;
 }
+
+export const ZiggyVue = {
+    install: (v, options) => v.mixin({
+        methods: {
+            route: (name, params, absolute, config = options) => route(name, params, absolute, config),
+        },
+    }),
+};