laravel + vue.jsの使い方

Question

http://blog.asial.co.jp/1496
↑こちらのサイトを参考にしながらlaravel + vue.jsを学んでいるのですが、最後のhelloコンポーネントの部分が上手く行きません。

resources/assets/js/components/Hello.vue

<template>
    <h2>Hello <span class="name">{{name}}</h2>!</div>
</template>
<script>
    export default {
        props: ['name']
    }
</script>
<style scoped>
    .name {
        font-weight: bold;
    }
</style>

resources/assets/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
 
require('./bootstrap');
 
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
 
Vue.component('example', require('./components/Example.vue'));
Vue.component('hello', require('./components/Hello.vue'));
 
const app = new Vue({
    el: '#app'
});

welcome.blade.php

<div id="app">
    <hello></hello>
    <hello name="Laravel"></hello>
    <hello name="Vue.js"></hello>
</div>

本来ならwelcome.blade.php（トップページ）にて
Hello!Laravel
Hello!Vue.js
と表示されるはずなのですが

[Vue warn]: Unknown custom element: <hello> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

というエラーが出て先に進めません。
Exampleコンポーネントは上手く作動しているので、helloと見比べてみましたがあまり違いがわかりません。
解決方法を教えて頂けたらと思います。宜しくお願い致します。

Answer 1

僕もその記事参考にしました。

<h2>Hello <span class="name">{{name}}</h2>!</div> を <h2>Hello <span class="name">{{name}}</span></h2>

にしたら、できましたよ！

Comments

[kirokira]

試してみましたが、エラー内容が変わりません・・・

[ryusei_kurata]

あ、{{name}}から、@{{name}}
にするといかがでしょうか？？

Answer 2

記載がないので気になったのですが、Hello.vueとapp.jsのコードを書いた後に

npm run devでコンパイルはしてらっしゃいますか？

Answer 3

詳しくわかりませんがテンプレートのタグがおかしくないですか？

<template>
    <h2>Hello <span class="name">{{name}}</h2>!</div>
</template>

spanの閉じタグないですし唐突にdivを閉じているように見えるのですが。