docs: explain usage of inertia link

fix #179

Author: Barbapapazes

src/usage/inertia.md

@@ -193,3 +193,56 @@ bun test
 ```
 
 :::
+
+## Updating the `Link` Component for Inertia
+
+To integrate Inertia's navigation capabilities, you need to update the `Link` component in Vue UI to utilize the `Link` component from `@inertiajs/vue3`. This ensures seamless handling of internal links within your Inertia application.
+
+### Steps to Update
+
+1. **Import the `Link` Component**
+  Begin by importing the `Link` component from Inertia:
+
+  ```ts
+  import { Link } from '@inertiajs/vue3'
+  ```
+
+2. **Modify the Template**
+  Update the `Link` component's template to dynamically use Inertia's `Link` component when the `href` prop is provided:
+
+  ```vue
+  <template>
+    <Primitive
+      v-bind="href ? {
+        'as': target === '_blank' ? 'a' : Link, // [!code ++]
+        'href': disabled ? undefined : href,
+        'aria-disabled': disabled ? 'true' : undefined,
+        'role': disabled ? 'link' : undefined,
+        'tabindex': disabled ? -1 : undefined,
+      } : as === 'button' ? {
+        as,
+        type,
+        disabled,
+      } : {
+        as,
+      }"
+      :rel="rel"
+      :target="target"
+      :class="resolvedClass"
+      @click="onClickWrapper"
+    >
+      <slot />
+    </Primitive>
+  </template>
+  ```
+
+### Explanation of Changes
+
+- When the `href` prop is provided:
+  - The `as` property dynamically determines whether to render as an `<a>` tag (for external links) or the `Link` component (for internal navigation).
+  - Accessibility attributes like `aria-disabled` and `tabindex` are conditionally applied based on the `disabled` state.
+
+- When the `href` prop is not provided:
+  - The component defaults to rendering as a `button` or another specified element, ensuring flexibility for non-link interactions.
+
+This enhancement ensures proper navigation behavior and accessibility within your Inertia-powered application.