0

Hi guys I tried to use VueJS on Laravel without using component, but face an error.

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

Inside laravel app.js there is default VueJS instance

const app = new Vue({
    el: '#app'
});

So this is my html code for test.blade.php

<div id="app">

    <div id="test" class="">
         @{{ message }}</h3>
    </div>

</div>

<script>

    new Vue({
        el: '#test',
        data: {
            message: 'Hello Vue!'
        }
    })

</script>

From the code, the div #test is inside the div #app (default laravel vue instance).

If I comment out the default laravel app vuejs instance, the problem is gone.

My question is:

  1. Do nested instance is prohibited or I was doing it wrong? How to properly declare Vue instance on individual blade page?

  2. Is it safe to comment out the default Vue instance from Laravel? Or will it affected others vue component inside Laravel?

Thanks

--

Edit:

Found similar question with good answer, so I am closing this.

Using Vue.js in Laravel 5.3

Edit 2:

Here is the best solution if you want to utilize the power of Blade but still enjoy reactive of VueJS

https://stackoverflow.com/a/54349029/417899

cyberfly
  • 5,568
  • 8
  • 50
  • 67
  • I might be missing something, but why would you want to have multiple Vue instances? What's the use case? – Mozammil Jan 21 '19 at 14:12
  • @Mozammil let say on individual blade page, I want to use VueJS instead of jQuery. What is the proper way without using Vue component and at the same time utilize build in VueJS in Laravel? – cyberfly Jan 21 '19 at 14:16
  • I'd think that you need to have one single Vue instance and multiple components. Is there any reason why you don't want to use a Vue component? – Mozammil Jan 21 '19 at 14:21
  • @Mozammil I prefer Laravel to handle most of the task, and minimal VueJs usage, for example validation task. Btw I found duplicate question that is similar to mine and have good answer, so I am closing this. Thanks for your time – cyberfly Jan 21 '19 at 14:23
  • Cool. Could you link to it? – Mozammil Jan 21 '19 at 14:24

0 Answers0