Friday, March 10, 2017

vue2 and laravel through browserify binded data not displaying

Current Version : Laravel 5.2 Bundler :Using built in browserify not webpack

Please have some patience and read my post. This is a detailed one.

What i did is pull my dependencies vue and vueify through npm and save them in dependencies

this is my package.json file

 {
      "private": true,
      "scripts": {
        "prod": "gulp --production",
        "dev": "gulp watch"
      },
      "devDependencies": {
        "gulp": "^3.9.1",
        "laravel-elixir": "^5.0.0",
        "bootstrap-sass": "^3.0.0"
      },
      "dependencies": {
        "laravel-elixir-vueify": "^1.0.6",
        "vue": "^2.2.2"
      }
    }

gulpfile.js

var elixir = require('laravel-elixir');


elixir(function(mix) {
   // mix.sass('app.scss');

    mix.styles([
      'vendor.css',
      'font-awesome.css',
      'theme-default.css',
      'custom.css',
      ],'public/assets/css/styles.css');

     mix.scripts([
    'vendor.js',
    'demodata.js',
    'app.js',
    'demo.js'
    ],'public/assets/js/index.js');

   mix.browserify('main.js');
   mix.version('js/main.js');

});

This is my blade file :

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield('title')</title>
</head>
    <link rel="stylesheet" type="text/css" href="">
<body>

<div class="container">
      <h1> @ </h1>
</div>
<script type="text/javascript" src = ""></script>
<script type="text/javascript" src = ""></script>
</body>
</html>

And this is my main.js file that contains the Vue instance itself

import Vue from "vue"

new Vue({
    el : '.container',
    data : {
        name : 'Ragnar Lothbrok'
    }
})

After running

gulp watch

and serving it. My page loads and then I can only see the page for 2 seconds then it's gone. And the

@

just displays the words itself not the Binded data which is 'Ragnar Lothbrok'

These are the errors in my console :

Uncaught ReferenceError: google is not defined at Object. (vendor.js:9467) at webpack_require (vendor.js:51) at Object. (app.js:10) at Object. (app.js:100) at webpack_require (vendor.js:51) at webpackJsonpCallback (vendor.js:22) at app.js:2

second one is

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in )

If you are reading this. Thank you for having some patience



via d3cypher
Labels: ,

Advertisement