current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

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>
share|improve this question
up vote 4 down vote accepted

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.

share|improve this answer
up vote 2 down vote

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!

share|improve this answer
    
I guess thats what vueify is supposed to do, check github.com/vuejs/vueify I already checked around for some examples and as far as I searched I'm doing like everybody else xD github.com/vuejs/vueify-example – cbcaio Dec 11 '15 at 14:57
    
thanks man, you kinda directed me to the answer. I found this repo which explains what I needed to add to make vueify work github.com/JeffreyWay/laravel-elixir-vueify – cbcaio Dec 11 '15 at 15:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.