Create global method vue on app.js laravel

Question

I want create global method to translate message using Laravel-JS-Localization

But when i call the method using vue mustache got an error like this:

Property or method "trans" is not defined on the instance but referenced during render.
Make sure that this property is reactive.

Here my laravel app.js code:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dashboard', require('./components/Dashboard').default);

const app = new Vue({
  el: '#vue',
  methods: {
    trans: function (key) {
      return Lang.get(key);
    },
  },
});

Dashboard.vue code :

<template>
 <p>{{ trans('common.welcome') }}</p>
</template>

<script>
 data () {
  return {
   name: '',
  }
 },
</script>

dashboard.blade.php code :

..........

    <div class="col-9" id="vue">
     <dashboard></dashboard>
    </div> <!--c end col-8 -->

..........

tony19 · Accepted Answer · 2022-07-15 22:54:53Z

2

I would probably go with creating a Plugin. For example

Vue.use({
  install (Vue) {
    Vue.prototype.$trans = Lang.get
  }
})

Adding this to your app.js code before creating any components or new Vue({...}) will mean all your components will have access to the $trans method.

Alternatively, you can create a Global Mixin but these aren't strongly recommended.

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components

Vue.mixin({
  methods: {
    trans (key) {
      return Lang.get(key)
    }
  }
})

edited Jul 15, 2022 at 22:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 10, 2020 at 1:55

Phil

166k25 gold badges265 silver badges269 bronze badges

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

2 Comments

Phil Over a year ago

@PanjiSetyaNurPrawira I've updated my answer. I suggest using a plugin over a global mixin but I've provided details of both

Panji Setya Nur Prawira Over a year ago

Thank u for the explanation i will try it ^^

Collectives™ on Stack Overflow

Create global method vue on app.js laravel

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related