Quasar with Inertia.js?

[boriskondev]

Hi, guys. I wanted to ask you for information if Quasar can be used in Inertia.js apps? Inertia is a small library that allows you to render single-file Vue components from Laravel backend by providing the name of the component and the data that should be hydrated into that component's "props". I tried to look for information on the Internet, but it is quite scarce. Thanks in advance!

[ontwikkelfabriek]

@boriskondev

Yeah Initia will never work together with any Vue framework like Quasar. That's because Inertia wants full control of the the client side Vue app creation( just as Quasar wants full control), see:
https://inertiajs.com/client-side-setup

I don't understand Inertia. They don't deliver what is promised: Initia is NOT a framework:
https://inertiajs.com/

Inertia isn't a framework, nor is it a replacement to your existing server-side or client-side frameworks. Rather, it's designed to work with them.

Then on another page how to setup the Vue client side:
https://inertiajs.com/client-side-setup

Once you have your server-side framework configured, you then need to setup your client-side framework WTF??

And now it is a framework according to them..... such a bummer. Could be a very nice system, but they had to resolve to fully controlling Vue instead of offering a component suite with Server side support/integration.

I Ques you can always use Quasar in UMD mode together with Initia....

[piperone]

Dude, the client-side framework that you're referencing from the docs is Vue, not Inertia.

Inertia is designed to bridge the gap between server- and client-side frameworks. Say you use a Python/Django- or PHP/Laravel-stack and you also want to use React or Vue, things like exchanging data between the front- and backend becomes a chore. As I'm sure you know, backend frameworks often come with their own template engines that you're supposed to use for the frontend, but if you want to create an SPA with Vue or React along with your backend, you can't really use those engines. That's where Inertia helps you out.

[metalsadman]

@boriskondev you can probably use quasar as vue-cli plugin along with inertia.

[makroxyz]

Inertia works fine with Quasar and Vite. The only problem is in q-item or other component which uses router-link.
Inertia needs his own component (Link) to generate links.
In BootstrapVue components with link (as BLink) have a router-component-name prop that can be globally configured

prop: BootstrapVue auto detects between <router-link> and <nuxt-link>. In cases where you want to use a 3rd party link component based on <router-link>, set this prop to the component name. e.g. set it to 'g-link' if you are using Gridsome (note only <router-link> specific props are passed to the component)

So it's quite simple... with a property like this q-item with "to" property should render the router-component-name passing the same props as router-link

[Minotti]

Yes, just like Bootstrap Vue. He has the property, but the Quasar Framework doesn't (i think)

[TobyMosque]

https://github.com/inertiajs/inertia/issues

we need a router with the same interface of the vue router,
or at least who had the following methods:

• $router.resolve(route)
• $router.replace(route)
• $router.push(route)

but if them already had a router like that, all what u need to do is:

app.config.globalProperties.$router = InertiaVueRouter

[Minotti]

Hmm, interesting, I'll test soon

[makroxyz]

@TobyMosque which issue do you refer to?

Inertia doesn't have a router.
It has a component Link to use in place of <a> tag that uses href prop for links.
Inertia Link

What I usually do is creating a MyRouterLink with to property. The component template has the Link with attribute href filled with MyRouterLink to property.

In BoostrapVue I simply fill the mentioned above router-link-name prop with my-router-link which is globally registered.

[rasasak]

Is there some progress ?

I found that in vuetify can use plugin
vuetifyjs/vuetify#11573 (comment)

so I can do native <v-btn to="url">
But it not work in quasar .... is there some plugin of this type ? or how update plugin for working with quasar ?

[makroxyz]

Hope they will implement it soon Il lun 5 set 2022, 20:57 Marlon Ferreira Minotti ***@***.***> ha scritto:

…

Yes, just like Bootstrap Vue. He has the property, but the Quasar Framework doesn't (i think) — Reply to this email directly, view it on GitHub <#10519 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAPZLPM4BRDD25SFK37QAQ3V4Y7AVANCNFSM5DAQIGXA> . You are receiving this because you commented.Message ID: ***@***.*** com>