wip

Author: joetannenbaum

.github/workflows/mintlify-broken-links.yml

@@ -16,7 +16,7 @@ However, if you need to handle CSRF protection manually, one approach is to incl
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.post('/users', {
@@ -26,7 +26,7 @@ router.post('/users', {
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router, usePage } from '@inertiajs/vue3'
 
 const page = usePage()

v1/advanced/csrf-protection.mdx

@@ -44,7 +44,7 @@ You may have noticed we're returning an `Error` page component in the example ab
 
 <CodeGroup>
 
-```vue Vue 2
+```vue Vue 2 icon="vuejs"
 <template>
     <div>
         <H1>{{ title }}</H1>
@@ -79,7 +79,7 @@ export default {
 </script>
 ```
 
-```vue Vue 3
+```vue Vue 3 icon="vuejs"
 <script setup>
 import { computed } from 'vue'
 

v1/advanced/error-handling.mdx

@@ -12,15 +12,15 @@ To register an event listener, use the `router.on()` method.
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('start', (event) => {
     console.log(`Starting a visit to ${event.detail.visit.url}`)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('start', (event) => {
@@ -50,15 +50,15 @@ Under the hood, Inertia uses native browser events, so you can also interact wit
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 document.addEventListener('inertia:start', (event) => {
     console.log(`Starting a visit to ${event.detail.visit.url}`)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 document.addEventListener('inertia:start', (event) => {
@@ -90,7 +90,7 @@ When you register an event listener, Inertia automatically returns a callback th
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 let removeStartEventListener = router.on('start', (event) => {
@@ -101,7 +101,7 @@ let removeStartEventListener = router.on('start', (event) => {
 removeStartEventListener()
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 let removeStartEventListener = router.on('start', (event) => {
@@ -140,7 +140,7 @@ Combined with hooks, you can automatically remove the event listener when compon
 
 <CodeGroup>
 
-```vue Vue 2
+```vue Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 export default {
@@ -155,7 +155,7 @@ export default {
 }
 ```
 
-```vue Vue 3
+```vue Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 import { onUnmounted } from 'vue'
 
@@ -194,7 +194,7 @@ Alternatively, if you're using native browser events, you can remove the event l
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 let startEventListener = (event) => {
@@ -207,7 +207,7 @@ document.addEventListener('inertia:start', startEventListener)
 document.removeEventListener('inertia:start', startEventListener)
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 let startEventListener = (event) => {
@@ -254,7 +254,7 @@ Some events, such as `before`, `invalid`, and `error`, support cancellation, all
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('before', (event) => {
@@ -264,7 +264,7 @@ router.on('before', (event) => {
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('before', (event) => {
@@ -300,15 +300,15 @@ For convenience, if you register your event listener using `router.on()`, you ca
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('before', (event) => {
     return confirm('Are you sure you want to navigate away?')
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('before', (event) => {
@@ -342,15 +342,15 @@ The `before` event fires when a request is about to be made to the server. This
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('before', (event) => {
     console.log(`About to make a visit to ${event.detail.visit.url}`)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('before', (event) => {
@@ -380,15 +380,15 @@ The primary purpose of this event is to allow you to prevent a visit from happen
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('before', (event) => {
     return confirm('Are you sure you want to navigate away?')
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('before', (event) => {
@@ -420,15 +420,15 @@ The `start` event fires when a request to the server has started. This is useful
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('start', (event) => {
     console.log(`Starting a visit to ${event.detail.visit.url}`)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('start', (event) => {
@@ -462,15 +462,15 @@ The `progress` event fires as progress increments during file uploads.
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('progress', (event) => {
     this.form.progress = event.detail.progress.percentage
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('progress', (event) => {
@@ -504,15 +504,15 @@ The `success` event fires on successful page visits, unless validation errors ar
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('success', (event) => {
     console.log(`Successfully made a visit to ${event.detail.page.url}`)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('success', (event) => {
@@ -546,15 +546,15 @@ The `error` event fires when validation errors are present on "successful" page
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('error', (errors) => {
     console.log(errors)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('error', (errors) => {
@@ -590,7 +590,7 @@ This event is fired for all response types, including `200`, `400`, and `500`res
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('invalid', (event) => {
@@ -599,7 +599,7 @@ router.on('invalid', (event) => {
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('invalid', (event) => {
@@ -632,7 +632,7 @@ You may cancel the `invalid` event to prevent Inertia from showing the non-Inert
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('invalid', (event) => {
@@ -642,7 +642,7 @@ router.on('invalid', (event) => {
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('invalid', (event) => {
@@ -680,7 +680,7 @@ The `exception` event fires on unexpected XHR errors such as network interruptio
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('exception', (event) => {
@@ -689,7 +689,7 @@ router.on('exception', (event) => {
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('exception', (event) => {
@@ -722,7 +722,7 @@ You may cancel the `exception` event to prevent the error from being thrown.
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('exception', (event) => {
@@ -731,7 +731,7 @@ router.on('exception', (event) => {
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('exception', (event) => {
@@ -768,15 +768,15 @@ The `finish` event fires after an XHR request has completed for both "successful
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('finish', (event) => {
     NProgress.done()
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('finish', (event) => {
@@ -810,15 +810,15 @@ The `navigate` event fires on successful page visits, as well as when navigating
 
 <CodeGroup>
 
-```js Vue 2
+```js Vue 2 icon="vuejs"
 import { router } from '@inertiajs/vue2'
 
 router.on('navigate', (event) => {
     console.log(`Navigated to ${event.detail.page.url}`)
 })
 ```
 
-```js Vue 3
+```js Vue 3 icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
 router.on('navigate', (event) => {