Vue mixins in Laravel Inertia

Question

I'm trying to create a global helper function via Vue mixin on a Laravel Inertia project to no avail:

//app.js
Vue.mixin({
    methods: {
        myFunction() {
            return 'Returnign from myFunction';
        },
    },
});

new Vue({
...
}).$mount(app);

.

//MyComponent.vue
console.log(myFunction()); // ReferenceError: myFunction is not defined

On a standalone Vue.JS project, this works. Maybe there's something behind the scene in Inertia that prevents the mixin from loading. Can somebody help me understand why this is happening?

Thank you.

Willower · Accepted Answer · 2022-09-05 15:10:09Z

0

You need to add the function in the mixin of the createInertiaApp method in your app.js file.

For instance:

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup ({ el, app, props, plugin }) {
    return createApp({ render: () => h(app, props) })
      .use(plugin)
      .mixin({
        methods: {
          myFunction: () => {
            return 'Returning from myFunction';
          }
        }
      })
      .mount(el)
  }
})

answered Sep 5, 2022 at 15:10

Willower

1,2721 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kim De Guzman · Accepted Answer · 2021-03-03 11:03:23Z

0

you need () on your function

Vue.mixin({
    methods: {
        myFunction() {
            return 'Returnign from myFunction';
        },
    },
});

and then you missed this before your mixin function

console.log(this.myFunction());

answered Mar 3, 2021 at 11:03

Kim De Guzman

554 bronze badges

Collectives™ on Stack Overflow

Vue mixins in Laravel Inertia

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related