No reason to use the Vue plugin if you're using @routes blade directive?

[Smef]

Is there any reason to use the Ziggy Vue plugin if you're using the @routes Blade directive? It seems to be redundant, since @routes adds in the window route() helper already, so the method is available in all of your Vue components.

The documentation says:

Note: If you use the @routes Blade directive in your views, Ziggy's configuration will already be available globally, so you don't need to import the Ziggy config object and pass it into use().

... but it seems that you don't need to use the Vue plugin at all in this scenario since route() is already available.

Am I missing something here, or should the docs be updates to say that you don't need to use the Vue plugin at all with Blade @routes?

[bakerkretzmar]

You're not missing anything, it is possible to use the global route() function in Vue normally with just @routes in your Blade view. Nowadays though it's highly likely that your editor/IDE will complain about this because it thinks that function doesn't exist. It also depends on your specific setup, for example if you're using <script setup> in your Vue components and want to use the route() function there, it has to be imported into your component, which is only possible using JavaScript. Same goes for Vue 2 if you wanted the mixin so that you could call this.route() inside your components.

[Smef]

That's the thing, though. The IDE (JetBrains stuff, at least) doesn't know about route() with either the plugin or the @route directive. It shows as an error either way, but it always works anyway. I haven't been able to see any difference between the IDE's display or the functionality with the plugin completely removed.

We do use the composition api with Vue 3 and <script setup lang="ts">. The mixin from the plugin doesn't seem to have any effect as far as the IDE is concerned. Mixins don't seem to be a preferred way to handle stuff like this in Vue 3, so maybe that's the issue? It's just falling back to the window-level route()? Does that make the plugin useless for Vue 3 and the composition API?

We use Jetstream to start a lot of projects, so the config looks like this: https://github.com/laravel/jetstream/blob/3.x/stubs/inertia/resources/js/app.js

[Smef]

To follow up on this, our current strategy for making everything work is to use the Jetstream app.js as in the link with @routes in app.blade.php, but then import route from "ziggy-js" in each component. ziggy-js is aliased to @types/ziggy-js so that we get full Typescript support and intellisense for the route() method.

[Smef]

More info about this here. What brought this up is looking at the implementation in Laravel Jetstream. This implementation uses the plugin, but then all the components are using the Vue 3 composition api with script setup. Is this implementation actually incorrect, and the plugin isn't doing anything here? It seems like it's been implemented incorrectly and should be adjusted. I'm not sure if there's a recommended way to be doing this with the composition api once the plugin is removed.

Should this very popular implementation be updated or corrected?

[bakerkretzmar]

To use the route() function inside your Vue component <template> tags you need the Vue plugin (or you need to recreate its functionality yourself), because the templates are compiled and can't access the global browser scope.

The IDE (JetBrains stuff, at least) doesn't know about route() with either the plugin or the @route directive. It shows as an error either way, but it always works anyway.

I don't know about JetBrains specifically and this depends a lot on where exactly you're talking about. Inside a component <template>, using the Vue plugin, the IDE should be able to tell that the route() function exists. In a component <script> you have to const route = inject('route');, although as you noticed it works without that because the route() function already exists globally.

our current strategy for making everything work is to use the Jetstream app.js as in the link with @routes in app.blade.php, but then import route from "ziggy-js" in each component.

If you don't care about intellisense you don't need to import route from 'ziggy-js', ever. If you do care, then keep what you have or use const route = inject('route');.

This implementation uses the plugin, but then all the components are using the Vue 3 composition api with script setup. Is this implementation actually incorrect, and the plugin isn't doing anything here?

No, the plugin is making it possible to use route() inside the <template> of your components. Because @routes is also in the Blade view, it's possible to use the route() function in component <script> tags with or without importing it. If you only want to use Ziggy "one way" you could remove the Blade directive, generate your routes using the Artisan command, and import them in your app.js. Using both together is doubling up a bit and it's not perfect, but it's definitely the easiest way for everything (except maybe intellisense) to just work.

[Smef]

If you don't care about intellisense you don't need to import route from 'ziggy-js', ever. If you do care, then keep what you have or use const route = inject('route');.

Actually, this makes the intellisense work correctly with typescript, since it's mapped to the type import rather than the import from ziggy directly (this is probably a weird implementation). But yeah, my understanding was that we are actually using the window-level function from the blade directive and that this import was just for typing that global function. That's good to have cleared up. Thanks!

I think the problem with const route = inject('route') is that it doesn't have typing, so it's missing some intellisense stuff for TypeScript, but yeah, it makes sense in a "proper", pure vue/js app without the blade directive to do it this way. Thank you for the clarification here.

I think the big confusing thing was that in Laravel Jetstream it implements the Vue plugin in the app setup, but then never does any const route = inject('route') in any of the components and instead (from what I'm discovering) relies on the blade directive route(), which is also implemented in the main template. Unfortunately, Jetstream being such a prominent example of Ziggy makes it unclear about what is doing what. It seems that they import the plugin, but then aren't actually ever using it.

Thank you for taking the time to reply to all of this and provide a thorough explanation of how the bits are working together.