Can't create custom Vue component in JSFiddle

Question

In my JSFiddle example, I'm trying to define a custom Vue component: https://jsfiddle.net/50wL7mdz/402951/ .

Unfortunately, nothing is rendered. Why?

The code:

HTML:

<script src="https://unpkg.com/vue"></script>
<blog-post title="hi again!"></blog-post>

JS:

Vue.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
})

Answer 1

You forgot to create a Vue. Wrap the <blogpost> component into a div and create a Vue using that div as the template.

Like so

HTML:

<script src="https://unpkg.com/vue"></script>
<div id="app"> 
    <blog-post title="hi again!"></blog-post>
</div>

JS

Vue.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
})

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
    el: '#app'
});

Look at the documentation documentation

Here is the working fiddle

Answer 2

My friend I recommend you another option, that I preferred. Please use, if you want, sandbox where you can add or modify components much much easier.

Here is the sandbox link .