Proper Use of route() in Composition API/SFC

[andrewskm]

I've been using this.route() in my Vue code and everything works fine.
Flipping pages over to use the composition API and I was wonder if the proper way to call route() is to use getCurrentInstance() like so getCurrentInstance().root.ctx.route() or is there a better way?

Everything works, just wanted to make sure it's proper.

[bakerkretzmar]

Inside your templates you should be able to keep using route() normally, and if you're using the @routes Blade directive then route() should actually also be available globally, which means you can use it directly even in the setup() function.

I didn't know about getCurrentInstance(), if that works then I think it's totally fine to do that.

Otherwise, you can import route in each component and just use it like a regular function, see #454 (comment) for some detailed examples. We're planning to provide a useRoute() hook eventually to make this easier too.

[andrewskm]

Yeah the route still works in the templates as normal.
I'm not using the blade directive, so it's not defined in the setup.

Importing from ziggy/dist seems fine, but needing to call it like route(name, params, absolute, config) may be a lil much, so I may stick with the getCurrentInstance for now.

The useRoute() hook would be perfect, especially since I use InertiaJS as they have similar hooks for useForm and usePage.

Thanks for your help!

[romsar]

At the moment I use provide/inject vue functionality that works in composition api.

In setup() you can easilly do const route = inject('route').

In app.js or ssr.js .provide('route', route)

[livevsonline]

provide('route', route)

Hey Roman

Can you help me solve my ssr.ts file? I'm using Laravel 9, Inertia SPA with SSR + Typescript, and Vite...

I have a few problems with the ssr file

[romsar]

provide('route', route)

Hey Roman

Can you help me solve my ssr.ts file? I'm using Laravel 9, Inertia SPA with SSR + Typescript, and Vite...

I have a few problems with the ssr file

Sure.

// import modules...
import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import route from 'ziggy';

createServer((page) => createInertiaApp({
  page,
  render: renderToString,
  resolve: name => require(`./pages/${name}`),
  setup({ app, props, plugin }) {
    const Ziggy = props.initialPage.props.ziggy;

    return createSSRApp({
      render: () => h(app, props),
    })
      .use(plugin)
      .mixin({
        methods: {
          route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
        },
      })
      .provide('route', (name, params, absolute, config = Ziggy) => route(name, params, absolute, config))
  },
}));

[livevsonline]

Thank you for your time Roman, i get this now:

How come we removed the resolvecomponent part?

[livevsonline]

provide('route', route)

Its also still not resolved in the files as seen below:

[romsar]

Above your loadCurrencies func put:

const route = inject('route')

Don't forget to import inject from vue.

How come we removed the resolvecomponent part?

My code is pretty old (~1 year), so don't change your code except:

const Ziggy = props.initialPage.props.ziggy;

.mixin({
        methods: {
          route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
        },
      })
      .provide('route', (name, params, absolute, config = Ziggy) => route(name, params, absolute, config))