InertiaJS Link support

[asvae]

Thanks. Looks interesting!

[rustem-nasyrov]

Hi, @VVBphp! Try to use vue' is directive like this:

<Link href="/" is="vue:va-button" color="danger">Home</Link>

[VVBphp]

<Link href="/" is="vue:va-button" color="danger">Home</Link>

@rustem-nasyrov , спасибо за ответ, но создавая этот запрос я имел в виду va-sidebar-item. Чтобы этот компонент поддерживал создание ссылок inertia. Чтобы мне не приходилось городить вот таких конструкций. Возможно уже есть какой-то способ сделать это лучше и красивее, но я не так давно использую vue.

<Link v-if="!item.children"
                      class="va-sidebar__item va-sidebar-item"
                      :href="route(item.name)">
                    <va-sidebar-item :active="isRouteActive(item)">
                        <va-sidebar-item-content>
                            <va-icon :name="item.meta.icon" class="va-sidebar-item__icon"/>

                            <va-sidebar-item-title>
                                {{ __(item.displayName) }}
                            </va-sidebar-item-title>

                            <va-icon v-if="item.children" :name="accordionValue[idx] ? 'expand_less' : 'expand_more'"/>
                        </va-sidebar-item-content>
                    </va-sidebar-item>
 </Link>
<va-sidebar-item class="pointer" :active="isRouteActive(item)" v-else>
                    <va-sidebar-item-content>
                        <va-icon :name="item.meta.icon" class="va-sidebar-item__icon"/>

                        <va-sidebar-item-title>
                            {{ __(item.displayName) }}
                        </va-sidebar-item-title>

                        <va-icon v-if="item.children" :name="accordionValue[idx] ? 'expand_less' : 'expand_more'"/>
                    </va-sidebar-item-content>
</va-sidebar-item>

[rustem-nasyrov]

@VVBphp, нужно сделать также как и в примере с кнопкой:

Sidebar example

```html Dashboard Organizations Contacts Reports ```

[VVBphp]

@rustem-nasyrov Попробовал пример. Нет реактивности, ссылки работают как обычные.

1. Код из примера с is="vue:va-sidebar-item"
2. Такой же код без is="vue:va-sidebar-item" Во втором случае ссылки реактивные

[rustem-nasyrov]

Привет, @VVBphp! Прошу прощения за задержку. Предлагаю следующее решение: нужно создать папку composables, а в ней файл useInertiaLinkMixin.js и поместить в него код из под спойлера ниже.

Код useInertiaLinkMixin.js

```javascript // useInertiaLinkMixin.js import { Inertia } from '@inertiajs/inertia' const useLinkProps = { as: { type: String, default: 'a', }, data: { type: Object, default: () => ({}), }, href: { type: String, }, method: { type: String, default: 'get', }, replace: { type: Boolean, default: false, }, preserveScroll: { type: Boolean, default: false, }, preserveState: { type: Boolean, default: null, }, only: { type: Array, default: () => [], }, headers: { type: Object, default: () => ({}), }, queryStringArrayFormat: { type: String, default: 'brackets', }, } const getInertiaLinkMixin = () => ({ props: useLinkProps, mounted () { this.$el.onclick = (e) => { e.preventDefault() Inertia.visit(this.href, { method: this.method, data: this.data, replace: this.replace, preserveState: this.preserveState, preserveScroll: this.preserveScroll, only: this.only, headers: this.headers, errorBag: null, forceFormData: false, onCancelToken: cancelToken => { }, onCancel: () => { }, onBefore: visit => { }, onStart: visit => { }, onProgress: progress => { }, onSuccess: page => { }, onError: errors => { }, onFinish: visit => { }, }) } }, }) export const useInertiaLinkMixin = (component) => { component.mixins = [...(component.mixins || []), getInertiaLinkMixin()] } ```

И затем использовать этот миксин в нужном вам компоненте следующим образом:

import { VaSidebarItem } from 'vuestic-ui';
import { useInertiaLinkMixin } from '@/plugin/index.js';

useInertiaLinkMixin(VaSidebarItem);

export default {
  components: { VaSidebarItem },
  // rest of props
};

[rustem-nasyrov]

Это не окончательное решение и чуть позже я доработаю его.

[aluarius]

@rustem-nasyrov check if https://github.com/epicmaxco/vuestic-ui/pull/3043 allows to render VaButton via Link.

[rustem-nasyrov]

@rustem-nasyrov check if #3043 allows to render VaButton via Link.

I've tested it and unfortunately it didn't work.