[Vue warn]: Methods property "route" is already defined in Props

Laravel 9.51.0,Vue,Inertia(Ziggy),Vite,Element Plus

I have a simple file: test.vue

 <script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as EpVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
</script>
<template>
<el-menu default-active="2" class="el-menu-demo" mode="horizontal" background-color="#545c64"
    text-color="#fff" active-text-color="#ffd04b" >
    <el-menu-item index="1">Processing Center</el-menu-item>    
  </el-menu>
</template>

at the time of adding el-menu-item warning appears in the console

[Vue warn]: Methods property "route" is already defined in Props. 
  at <ElMenuItem index="1" > 
  at <ElMenu default-active="2" class="el-menu-demo" mode="horizontal"  ... > 
  at <TEST errors= 
Object {  }
 auth= 
Object { user: {…} }
 ziggy= 
Object { url: "http://localhost:8000", port: 8000, defaults: [], routes: {…}, location: "http://localhost:8000/test" }
  ... > 
  at <Inertia initialPage= 
Object { component: "TEST", props: {…}, url: "/test", version: "da1d12f994a2f8b5d255118f7dfb6c26", scrollRegions: [], rememberedState: {} }
 initialComponent= 
Object { __name: "TEST", setup: setup(__props), __hmrId: "1b138046", render: _sfc_render(_ctx, _cache, $props, $setup, $data, $options)
, __file: "/home/marek/Projects/CrescentiaPanel2/resources/js/Pages/TEST.vue", inheritAttrs: false, … }
 resolveComponent=fn<h2>  > 
  at <App>

I don't have vue-router, when i add: " .mixin({ methods: { appRoute: route } }) " to app.js, the warning still appears

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import ElementPlus from 'element-plus';
import pl from 'element-plus/dist/locale/pl.mjs';
import dayjs from 'dayjs';
dayjs.Ls.en.weekStart = 1;

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })        

            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(ElementPlus, {locale: pl})
            .mixin({ methods: { appRoute: route } });            

            app.config.globalProperties.$filters = {
                dataPL(value) {
                    var str = new Date(value);
                    var result = str.toLocaleDateString("pl-PL", {
                        year: "numeric",
                        month: "2-digit",
                        day: "2-digit",
                    });
                    return result;
                },    
                toPLN(value) {
                    return (new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(value));
                },
            };
            app.mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

how to get rid of this warning ?

please help

lbecket

3 years ago

Level 39

The warning message appears because the route method is already defined in the Props, but you are trying to add it as a method in the mixin. The mixin methods are merged with the component's methods, and if there's a conflict, the last method defined wins.

You could resolve this warning by renaming the method in the mixin to avoid the conflict. For example:

.mixin({ methods: { appRouteMethod: route } });

Or you could check if the route method is already defined before adding it in the mixin:

if (!app.methods.route) {
  app.mixin({ methods: { appRoute: route } }); 
}

Marlee

3 years ago

Level 1

all the app works fine, route implements Laravel->Inertia->Ziggy

when i wanted to add a menu (Element plus ->) I got this warning: [Vue warn]: Methods property "route" is already defined in Props

in my default app.js no mixin

after finding a solution(laracasts.com/discuss/channels/vue/vue-warn-methods-property-route-is-already-defined-in-props), I added to app.js: .mixin({ methods: { appRoute: route } });

but the warning still occurs when I add:

if (!app.methods.route) {
  app.mixin({ methods: { appRoute: route } }); 
}

appears error:

 Uncaught (in promise) TypeError: can't access property "route", app.methods is undefined

Pierre_AIR

3 years ago

Level 1

Hi Marlee !

I have exactly the same problem with my projet (Larvel 10.5.1/Inertia 1.0.2 (Ziggy 1.5.0)/Element-plus 2.3.2). I also added the mixin config :

.mixin({ methods: { appRoute: route } })

but I still get the warning.

Did you find any solution ?

Pierre_AIR

3 years ago

Level 1

Okay, I eventually found a solution but I don't really know what to think about... The thing is that route() has to be used in the setup part of the vue file, and appRoute() in the template part

To summarize :

here is my app.js :

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            // .use(ZiggyVue, Ziggy) // no need to declare Ziggy
            .use(ElementPlus, { locale: fr, })
            .mixin({ methods: { appRoute: route } }) // to avoid namespace conflict with Element Plus NaveMenu component
            .mount(el);
    },,
});

here is a vue file :

<script setup>
import { Link, router } from "@inertiajs/vue3";

const goHome = () => {
    router.visit(route("home")); // use route() here
};
</script>
<template>
        <div @click="goHome">Link 1</div>
        <!-- use appRoute here -->
        <Link :href="appRoute('home')"> Link 2</Link>
</template>

Please or to participate in this conversation.