Search code examples
laravellaravel-5vue.jslaravel-elixir

Laravel vue js integration - No values in blade file


I try to integrate vue.js with laravel 5.3. I call "gulp" which creates the main.js file in the public folder. I can see in the browser that the js file is loaded but the value of "message" is not shown. It is only written {{message}}. Any ideas why?

<body>
    <div class="container">
        <div class="content">
            <div class="title">                   
                <p>@{{ message }}</p>
            </div>
        </div>
    </div>
   <script src="js/main.js"></script> 
</body>

gulpfile:

var elixir = require('laravel-elixir');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');

elixir(mix => {
   mix.sass('app.scss').browserify('main.js');
});

main.js:

import Vue from 'vue';

var app = new Vue({
   el: 'body',
   data: {
      message: 'Hello Vue!'
   }
})

package.json:

"dependencies": {
   "bootstrap-sass": "^3.3.7",
   "gulp": "^3.9.1",
   "jquery": "^3.1.0",
   "laravel-elixir": "^6.0.0-9",
   "laravel-elixir-browserify-official": "^0.1.3",
   "laravel-elixir-vue-2": "^0.2.0",
   "laravel-elixir-vueify": "^1.0.0",
   "laravel-elixir-webpack-official": "^1.0.2",
   "lodash": "^4.16.2",
   "vue": "^2.0.1",
   "vue-resource": "^1.0.3"
}

Solution

  • EDIT

    package.json

    {
      "private": true,
      "scripts": {
        "prod": "gulp --production",
        "dev": "gulp watch",
        "slate": "rimraf node_modules && npm install",
        "clean": "rimraf public/css/app.css public/css/app.css.map public/js/app.js && npm run dev"
      },
      "devDependencies": {
        "bootstrap-sass": "^3.3.7",
        "gulp": "^3.9.1",
        "jquery": "^3.1.1",
        "laravel-elixir": "^6.0.0-15",
        "laravel-elixir-browsersync-official": "^1.0.0",
        "laravel-elixir-vue-2": "^0.3.0",
        "laravel-elixir-webpack-official": "^1.0.10",
        "lodash": "^4.17.2",
        "moment": "^2.17.1",
        "vue": "^2.1.6",
        "vue-resource": "^1.0.3",
        "vuex": "^2.1.1"
      }
    }
    

    gulpfile.js

    const elixir = require('laravel-elixir');
    
    require('laravel-elixir-vue-2');
    
    /*
     |--------------------------------------------------------------------------
     | Elixir Asset Management
     |--------------------------------------------------------------------------
     |
     | Elixir provides a clean, fluent API for defining some basic Gulp tasks
     | for your Laravel application. By default, we are compiling the Sass
     | file for our application, as well as publishing vendor resources.
     |
     */
    
    elixir(mix => {
        mix
            .sass('app.scss')
            .webpack('main.js');
    });
    

    Your code is fine except one thing. Vue JS Doesn't recommend use of body element as vue js root.

    The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to or

    https://v2.vuejs.org/v2/api/#el

    Code

    <body>
        <div class="container" id="app"> <!-- Mind the id attached -->
            <div class="content">
                <div class="title">                   
                    <p>@{{ message }}</p>
                </div>
            </div>
        </div>
       <script src="js/main.js"></script> 
    </body>
    

    and main.js

    import Vue from 'vue';
    
    var app = new Vue({
       el: '#app', // mind the root element is changed to app.
       data: {
          return { // mind the return in data
            message: 'Hello Vue!'
          }
       }
    });