Refactor Required for Inertia's Page Link Component

[mskapusuz]

Hey! Thanks for the great package.

I have detected pagination links doesn't work well on my latest JetStream and Inertia env.

Inertia changed the Link component usage with inertia-vue@0.7.0 (ref: https://inertiajs.com/releases/inertia-vue-0.7.0-2021-07-13)

inertia-link usages should be refactored as Link, and the component should be imported on here https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/blob/main/js/Tailwind2/Pagination.vue#L9

Usage of the links: https://inertiajs.com/links

I wanted to fix it with a PR but I could not create a new branch due to I don't have permission

Thanks!

[Udaberrico]

Hey @mskapusuz,
you have already answered your own question. As the 0.7.0 release notes say, you can still register the link component globally with an alias.

import { Link } from '@inertiajs/inertia-vue'
Vue.component('InertiaLink', Link)

So in a default Laravel Jetstream app.js with vue3 it should look like

import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('InertiaLink', Link) // Here happens the magic ;-)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Hopefully this helps you

[pascalbaljet]

I tried to come up with a solution to get the Paginator component to work with both Vue 2 and 3, but I can't get it to work:

<script>
import Pagination from "./../Components/Pagination.vue";
import * as Vue from "vue";

// https://stackoverflow.com/questions/65251803/vue-module-component-detect-vue-js-version
// Make copy to prevent import warning in Vue 2
const vueObject = { ...Vue };
let version;

if (vueObject.default) version = 2;
if (vueObject.version && vueObject.version[0] === "3") {
  version = 3;
}

export default {
  mixins: [Pagination],

  components: {
    "inertia-link": () =>
      import(
        version === 2 ? "@inertiajs/inertia-vue" : "@inertiajs/inertia-vue3"
      ).then((inertia) => inertia.Link),
  },
};
</script>

I think we have to drop support for Vue 2 to solve this issue permanently.

[pascalbaljet]

Fixed in v2