cbcaio cbcaio - 1 year ago 211
PHP Question

Laravel Elixir Browserify Failed!: Unexpected token - Using VueJs

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

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?


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


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

elixir(function(mix) {


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

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

and /components/skills.vue

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

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

this.list = data;
this.skills_array = [];
props: ['list', 'skills_array']

Answer Source

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) {

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