How to Pass a PHP Variable to Vue Component Instance in Laravel Blade

How to pass a PHP variable to Vue component instance in Laravel blade?

You have to use Vue's props to be able to pass attributes to Vue's components through markup. Take a look at the following example:

<client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

In your Vue component:

Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

Now in other parts of your Vue component, you can access this value as this.clientId.

Issue Details

Please note that in HTML we write attribute name in kebab-case but in Vue side we write it in camelCase. More info in official docs here.

Also, you are using Vue's v-bind shorthand in :clientId="{{ $client->id }}" which means that Vue will deal anything inside double quotes as a JavaScript expression, therefore you may get errors in that case as well. Instead, you should use this format clientId="{{ $client->id }} without a colon.

pass php parameters to vue function inside bladee

as your passing string you need to add ' 'this quote

try this

@foreach($r_templates as $key => $rt)
    <button @click="someFunc( '{{$rt['title'}}' )">click me</button>
@endforeach

Pass variable to a component Laravel 9

You need to add props in your component

<x-component :categories="$categories">

Also you should add this in your component

public $categories;

public function __construct($categories)
{
    $this->categories = $categories;
}

I recommend you read this article

Pass data from Blade template to Vue component

Silly me. I do not need to declare components property in the app Vue instance. Just specify the component that you are going to use in resources/js/app.js and that component will be available globally in Blade template.

Watch for syntax differences between Laravel Mix differences tho. It could be the problem (Vue template or render function not defined yet I am using neither?)

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

Get value from Vue component in Laravel blade

in your vue components define watcher and emit event on webcam value change :

  watch: {
    webcam: function (val) {
      this.$emit('webcamchange',val)
    }
  }

then handle event on your main page:

<input name="avatar" type="hidden" :value="webcam.img" />
<webcam-avatar @webcamchange="webcam"></webcam-avatar>

don't forgot to define webcam on data section in your main page :

   data:function () {
    return {
      webcam:{}
      }
    }

set laravel variable in vuejs

The main way to share (global) variables from Laravel to Vue is to:

pass a state variable via the window to your Vue application (e.g. for user info)
pass attributes to your component

There is however no way to share your hidden_id variable from Vue to Blade. I'd suggest making a component from your snippet and the content of the table row and handle everything in Vue, instead of half in Vue and half in blade.

With the state variable you can do something this like this:

<html>
<head>
    <script type="application/javascript">
        window.state = {
            my_js_var: '{{ $myPhpVar }}',
        };
    </script>
</head>
<body>

</body>
</html>

Or just pass the variable to a TableRowComponent:

TableRowComponent.vue:

<template>
    <tr v-for='item, id in items'>
        <td>
            <TreatsCreateSearchAndSelectComponent :hidden-id="item.value"/>
        </td>
    </tr>
</template>

Pass data from blade to vue component

To pass down data to your components you can use props. Find more info about props over here. This is also a good source for defining those props.

You can do something like:

<example :userId="{{ Auth::user()->id }}"></example>

<example v-bind:userId="{{ Auth::user()->id }}"></example>

And then in your Example.vue file you have to define your prop. Then you can access it by this.userId.

Like :

<script>
  export default {
    props: ['userId'],
    mounted () {
      // Do something useful with the data in the template
      console.dir(this.userId)
    }
  }
</script>

How do I pass data from a Laravel Blade file to a Vue instance?

There's a problem with your approach.

First of all, don't make HTTP requests in your blade files, do it in the controller, then pass data as variables to blade view('index', ['data' => 'array']).

Second point: if you want to pass simple data from PHP to Javascript, use echo in a script, example:

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

Finally, for your particular case, you should have an API endpoint in Laravel that makes the HTTP request, and call it with an AJAX request from Vue JS.

How to Pass a PHP Variable to Vue Component Instance in Laravel Blade