Laravel Elixir Browserify Failed!: Unexpected token - Using VueJs

Question

can anyone help me solving this problem? I'm trying to learn how to use Laravel's elixir.browserify + vue.js but I can't make this work! I'm getting this error:

gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

D:\xampp\htdocs\pwebdev-project\resources\assets\js\components\skills.vue:1
<template>
^
ParseError: Unexpected token

Any idea what could be the problem? Do I need to specify somehere that I want to use vueify or I just need to npm install it like I did?

package.json

{
  "private": true,
  "devDependencies": {
    "babel-runtime": "^6.3.13",
    "gulp": "^3.8.8",
    "vue-hot-reload-api": "^1.2.2",
    "vueify": "^7.0.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "laravel-elixir": "^4.0.0",
    "vue": "^1.0.11",
    "vue-resource": "^0.1.17"
  }
 }

gulpfile.js

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

elixir(function(mix) {
    mix.browserify('main.js');
});

main.js

var Vue = require('vue')
var Skills = require('./components/skills.vue')

new Vue({
    el: '#app',
    components: {
        'skills' : Skills
    }
})

and /components/skills.vue

<template>
    <div>
        <select v-model="skills_array" class="form-control" multiple>
            <option v-for="skill in list" value="@{{skill.id }}" >
                @{{ skill.name }}
            </option>
        </select>
        <input type="text" name="skills" hidden v-model="skills_array">
    </div>
</template>

<script>
    export default {
        created: function () {
            var data = [];
            for (var i = 0; i < this.list.length; i++) {
                data.push({
                    'id': this.list[i].id,
                    'name': this.list[i].name,
                    'selected': false
                });
            }

            this.list = data;
            this.skills_array = [];
        },
        props: ['list', 'skills_array']
    }
</script>

Answer 1

After some time looking around I found this repo (JeffreyWay) which states there is some lines I needed to add in my gulp file

Basically I needed this:

npm install laravel-elixir-vueify

And then in my gulpfile:

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

require('laravel-elixir-vueify');  ---> this line was missing

elixir(function(mix) {
    mix.browserify('main.js');
});

I tought elixir was already compatible with vueify :/ I hope this helps anyone. Sorry for making whoever tried to help me waste your time.

Answer 2

I know that this is already so long ago but putting this code block in your package.json file will correctly compile it.

  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  },

Now you can run again gulp

Answer 3

It appears you're mixing up your templates and your Javascript code.

In main.js, you do this:

var Skills = require('./components/skills.vue')

require is intended to import Javascript modules so the code in one module can be used in another. components/skills.vue is not a Javascript file, it's HTML. So the Javascript interpreter is choking on it.

You'll need to rewrite skills.vue to expose the Javascript. The HTML should (probably) be moved to a blade template - I say probably, because it appears you might be trying to use a Javascript templating system with Vue which is something I don't have much experience with (and I can't see any evidence of in the code you posted).

EDIT

I've never used vueify before, but my guess is that there's something missing in your gulpfile.js that should configure vueify.

For example, I write Coffeescript instead of Javascript and use elixir to browserify my Coffeescript. To get this to work right, I had to add some configuration to my gulpfile:

// add the coffeeify transform to the browserify stack
//
elixir.config.js.browserify.transformers.push({
    name: 'coffeeify',
    options: {}
});

// configure browserify to recognize the .coffee extension
//
elixir.config.js.browserify.options.extensions = ['.coffee'];

elixir(function(mix) { ... });

I'm guessing that you need to do something like my first config item above:

elixir.config.js.browserify.transformers.push({
    name: 'vueify',
    options: {}
});

This will instruct browserify to add vueify to it's stack of transformations.

You might also need to second option:

elixir.config.js.browserify.options.extensions = ['.vue'];

But I'm not sure about that. On my system, adding the .coffee extension allows me to refer to modules without the .coffee extension in my code. It doesn't appear you're doing that.

Hope that helps!