Level 34
@vincent15000 check the solution here: https://github.com/element-plus/element-plus/issues/2018#issuecomment-1041243913
1 like
Jul 11, 2022
12
Level 63
[Vue warn]: Methods property "route" is already defined in Props.
Hello,
I'm using Laravel / InertiaJS / VueJS / Vite.
I have this warning : [Vue warn]: Methods property "route" is already defined in Props.
It is probably a conflict between packages.
How and where can I rename route to (for example) laravelRoute in order to not have this warning anymore ?
Thanks for your help ;).
Vincent
Level 63
@neilstee Ok thank you ... I don't understand where I can write this line.
.mixin({ methods: { appRoute: route } })
Level 102
@vincent15000 isn't the route from any of you own code? If it's 100% out of your code, it will be hard to change
1 like
Level 63
@Sinnbeck That' not in my code, I think it's a conflict between packages.
Level 102
@vincent15000 so you don't add route into vue at any point?
1 like
Level 63
@Sinnbeck Oh sorry I didn't thought you were saying this about my routes.
Yes of course I add my own routes.
But this route method is the one from Ziggy to be able to use the Laravel named routes inside VueJS.
Level 102
@vincent15000 ok. I just thought you had to register helpers etc in vue with either .mixin() or .use()
1 like
Level 63
@Sinnbeck Are you talking about this ?
createApp(App)
.use(store)
.use(router)
.use(ElementPlus, { locale })
.use(Vuex)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app')
Level 102
@vincent15000 I would assume yes. Someone who uses vue daily can provide give a better answer.
If you check the full stack trace of the error, it does not mention a single of your files?
1 like
Level 1
Anyone find a solution for this? I have the same stack Laravel + Vue 3 + Vue Router + Jetstream(InertiaJS).
I guess Ziggy and Vue Router have the same prop called route that causes the conflict?
Tried the .mixin method suggested and it didn't work.
Much appreciated for anyone's help!!
1 like
Level 4
I worked around this by creating a custom class to swap out the function name route for appRoute when the @routes blade directive injects JavaScript:
in app/Ziggy/AppRouteScript.php:
<?php
namespace App\Ziggy;
use Stringable;
use Tightenco\Ziggy\Ziggy;
class AppRouteScript implements Stringable
{
protected string $function;
public function __construct(protected Ziggy $ziggy, string $function, protected string $nonce = '')
{
$function = file_get_contents(base_path('vendor/tightenco/ziggy/dist/index.js'));
$this->function = str_replace('.route=', '.appRoute=', $function);
}
public function __toString(): string
{
return <<<HTML
<script type="text/javascript"{$this->nonce}>
const Ziggy = {$this->ziggy->toJson()};
{$this->function}
</script>
HTML;
}
}
and defining a configuration file in config/ziggy.php:
<?php
use App\Ziggy\AppRouteScript;
return [
'output' => [
'script' => AppRouteScript::class,
]
];
and finally, updating resources/js/app.js to use appRoute in the global mixin instead of route:
.mixin({ methods: { appRoute } })
It feels pretty hacky because of the string replacement in a transpiled JavaScript file, but I'm not sure how to avoid this.
It would be nice if Ziggy provided a way to configure the name of the helper function.
1 like
Level 1
That's an interesting idea, it does look quite "hacky" though.
I can't rewrite all our templates to not use the route() function.
Is there any other way of doing this?
Please or to participate in this conversation.