Laravel vue js integration - No values in blade file

Question

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"
}

tony19 · Accepted Answer · 2022-07-15 04:47:03Z

1

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!'
      }
   }
});

edited Jul 15, 2022 at 4:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 5, 2017 at 15:09

Rehan Manzoor

2,7833 gold badges20 silver badges36 bronze badges

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

12 Comments

Steve Over a year ago

I edited like you suggested. But still the same problem. Any other idea?

Rehan Manzoor Over a year ago

See the return statement in data() part of vue

Steve Over a year ago

The return statement nothing changed. Always the same problem. I added the package.json file to my post. Could there be a problem with the used versions?

Rehan Manzoor Over a year ago

Can you open the console of browser and see what is the error..?

Rehan Manzoor Over a year ago

And have you recompiled the js..?

|

Collectives™ on Stack Overflow

Laravel vue js integration - No values in blade file

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related