how to pass variables from server to app.js? Laravel + Vue

Question

the plugin I want to use let's define variables in plugin declaration within app.js

Vue.use(AirbnbStyleDatepicker, {monthNames: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'Julyyy',
        'Augusttt',
        'September',
        'October',
        'November',
        'December',
    ],});

however my website has few locales which is managed in server, I usually encode vars from laravel and pass them as props. In this case this does not work. I didn't find how to initialize plugin with options in component, so what is the way to solve this?

James · Accepted Answer · 2020-07-09 09:00:28Z

1

you can define that javascript array before you load "app.js" in the the view. And then just put it in app.js as const.

in view before app.js is inserted:

<script type="text/javascript"> 
  const trans_month = {{getTransMonths()}}
</script>

then in you app.js

Vue.use(AirbnbStyleDatepicker, {monthNames: trans_month,});

or you could use ajax call to server, which will return array of translated months

answered Jul 9, 2020 at 9:00

James

2141 silver badge8 bronze badges

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

Comments

Lizard Derad · Accepted Answer · 2020-07-09 08:40:27Z

0

Just found one solution, but maybe threre's a better one?

Install this package https://packagist.org/packages/laracasts/utilities
In server do

JavaScript::put(['langs' => [
   july => __('configname.july'),
   august => __('configname.august')
]])

in client do this

Vue.use(AirbnbStyleDatepicker, {monthNames: [
       'January',
       'February',
       'March',
       'April',
       'May',
       'June',
       window.langs['july'],
       window.langs['august'],
       'September',
       'October',
       'November',
       'December',
   ],});

answered Jul 9, 2020 at 8:40

Lizard Derad

3791 gold badge4 silver badges24 bronze badges

Collectives™ on Stack Overflow

how to pass variables from server to app.js? Laravel + Vue

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