[Vuejs]-Laravel 5 vue setup unclear

by

0👍

✅

why you define two Vue const?

this part of js code is no needed:

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

remove that line and test it :

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));



var app5 = new Vue({
  el: '#app-5',
   data: {
     message: 'Hello Vue.js!'
   }  ,
   methods: {
     reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
   }
 })

but remmember your vuejs work should be beetween:

<div id="app-5"> vuejs codes should be run here </div>

Don’t forget running npm run watch or npm run dev to compile

if you have error and problem with this way you can skip to second way

Second Way:

create vue-script.js file in public/js/ directory

vue-script.js:

var app5 = new Vue({
  el: '#app',
   data: {
     message: 'Hello Vue.js!'
   }  ,
   methods: {
     reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
   }
 })

create sample.blade.php file in resources/views/ directory

sample.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
</head>

<body>
  <div id="app">
    @{{ message }}
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
<script src="https://unpkg.com/vue"></script>
<script src="{{ asset('js/vue-script.js') }}"></script>

</body>
</html>

then in routes/web.php:

Route::get('testvue', function() {
    return view('sample');
});

and go to url : /testvue in your browser

👤Mohammad Fanni

Leave a comment