Laravel 4.2 Vuejs

Question

I am working in laravel 4.2 and I want to implement Vue.js into my application. When I put some testing code in my blade it only shows error that "Use of undefined constant message - assumed 'message'"I know that laravel read {{message}} like php code but do you know any solution how to add vue.js to my blade? Thanks for help. Here is code

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'hello from Vue.js 2.0'
    }
})
</script>
<div id="app">
<p>{{ message }}</p>
</div>

So no one doesn't know how to upgrade? Sorry for being so rude...But you will need to upgrade at some point. It is only a matter of time when will someone find a security flaw or some exploit. Don't use old software! — lewis4u
– lewis4u, Commented Jul 6, 2017 at 10:33

Yashvantsinh Zala · Accepted Answer · 2017-07-06 10:42:51Z

4

You can add @ before print message veriable

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <script>
        $(document).ready(function () {
            new Vue({
                el: '#app',
                data: {
                    message: 'hello from Vue.js 2.0'
                }
            })
        });
    </script>
    <div id="app">
        <p>@{{ message }}</p>
    </div>

edited Jul 6, 2017 at 10:42

answered Jul 6, 2017 at 10:26

Yashvantsinh Zala

5311 gold badge3 silver badges11 bronze badges

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

3 Comments

Konrad Uciechowski Over a year ago

when I add @ it load my page without laravel errors but only show {{message}} not actually my message data.

Yashvantsinh Zala Over a year ago

You need to add jquery library and and vuejs code in document ready portion

Konrad Uciechowski Over a year ago

Ok I find solution. I put script tag on down on my page not on a top.

Vamsi Krishna · Accepted Answer · 2017-07-06 10:34:13Z

1

escape the code using @

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'hello from Vue.js 2.0'
    }
})
</script>
<div id="app">
<p>@{{ message }}</p>
</div>

See Displaying Raw Text With Curly Braces section here

answered Jul 6, 2017 at 10:34

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Collectives™ on Stack Overflow

Laravel 4.2 Vuejs

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related