Component does not show in vue

Question

I do not get vue components really .... I have a vue component in my html and want to show it, but it does not show anything, what do I do wrong? What is the proper way to register and show a component in vue? Can someone give me a simple example for a beginner? :)

This is my code:

HTML

<div id="na-vue-app">
 <activity-filter>
  <template>
   'Some Text'
  </template>
 </activity-filter>
</div>

Vue

new Vue({
 el: '#na-vue-app'
});

const filterActivity = Vue.extend({
data: function () {
    return {
      distance:100,
    }
  },
  mounted() {

},
methods: {
}
});

Vue.component('activity-filter', filterActivity);

No, obviously I did, why would I be here otherwise? I actually took most over from the docs, and it still isn't clear to me, doesn't work — Benny
– Benny, Commented Nov 18, 2017 at 15:23

Nartub · Accepted Answer · 2017-11-18 15:29:35Z

2

Look at this pen: https://codepen.io/Nartub600/pen/oopBYJ

HTML

<div id="app">
  <my-component msg="Hi!">
  </my-component>
</div>

JS

Vue.component('my-component', {
  props: ['msg'],
  template: '<p>{{ msg }}</p>'
})

var app = new Vue({
  el: '#app'
})

It's the easiest form to try components I think

answered Nov 18, 2017 at 15:29

Nartub

4,0281 gold badge16 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Benny Over a year ago

Thanks for the pen! Just a question here, is it possible to add the template into html instead of inside the vue component as shown in my example? Like in between <template></template> in html?

Nartub Over a year ago

Yes but you must use vue-loader in order to do that through Single File Components (.vue files). Try the vue-cli templates which come with everything configured out of the box.

Benny Over a year ago

What are those vue-cli templates good for? It seems like a lot of overhead only for defining template tags inside of html ....

Nartub Over a year ago

Those templates are starting points for a modern javascript app using vue and are the way to go if you ask me. But of course it boils down to the scale of your app and may be too much if what you're doing is something small like a landing page.

Benny Over a year ago

Thanks for the explanation, I will mark it as solved, I decided to refrain from this method, it is indeed an easier landing page, nothing fancy

Collectives™ on Stack Overflow

Component does not show in vue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related