Closed mskapusuz closed 2 years ago
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
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.
Fixed in v2
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!