Laravel+Elixir+vue.js?

Question

[kolyafat]

Доброго времени все, помогите пожалуйста разобраться. Второй день пошел уже, не получается с однофайловыми компонентами. Строго не судите ибо фронт не мой конек. В общем замесил все по инструкции:

"devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^4.0.0",
    "laravel-elixir-vueify": "^1.0.0",
......

Далее инсталл и:

elixir(function(mix)  {
    // mix.scriptsIn('resources/assets/js', 'resources/assets/res.js')
    mix.browserify('app.js');
});

Вот app.js :

import Vue from 'vue'
import Hero from './Hero.vue'

new Vue({
    el: '#ahtung',
    components: { Hero }
});

Вот Херо.вью:

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'Matt Stauffer'
            };
        }
    };
</script>

<style>
    .profile {
        background: #eee;
        border: 1px solid #aaa;
        border-radius: 2em;
        margin: 2em auto;
        min-height: 150px;
        padding: 2em;
        width: 300px;
    }
</style>

gulp все собирает без ошибок, в blade вставляю:
<hero></hero>
... и ничего такого не произошло.
В чем и где я затупил, пожалуйста, помогите разобраться, уж очень охота этот вью поюзать.

Answer 1

[kolyafat]

Сам спросил, сам отвечаю:
В документации про еликсирЬ могли бы об этом написать! Немного возмущен даже)))
Ошибка описанная выше связана с пересечением минтаксиса blade и компонент вью, если не размазывать:
Вот эта часть -

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

должна выглядеть вот так, и всего то лишь, столько времени угрохано, надеюсь кому то это сэкономит его:

<template>
    <div class="profile">
        @{{ name }}
    </div>
</template>

Фигурные скобочки blade кушает по своему. Всем спасибо!