Vue.js doesn't render components

Question

I am using Vue.js and I want to try to render components but it isn't working

main.js:

import Vue from 'vue';
import 'bulma';
import Navbar from './Navbar.vue';

Vue.component('navbar', Navbar);
const MyC = Vue.component('myc', {
  template: '<h1>Are you working?</h1>',
});

const root = new Vue({
  el: '#app',
  components: {
    Navbar, MyC,
  },
});

index.html

<body>
  <div id="app">
    <navbar></navbar>
    <myc></myc>
  </div>
  <script src="dist/build.js"></script> <!-- Webpack endpoint -->
</body>

Navbar.vue

<template>
<h1>HELLO FROM NAVBAR</h1>
</template>

<script>
// Some logic here

export default {
  name: 'navbar',
};

</script>

I coded as written in guide but neither of the ways to render a component is working

I just have blank page

I am using webpack+vue-loader

[UPDATE]

It works without components imports just rendering template

[UPDATE 2]

Got this message

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

No, even if i use template: '<h1>Hello</h1>' in Vue options it doesn't appear — Nick Gant
– Nick Gant, Commented Aug 16, 2017 at 14:42

Zany · Accepted Answer · 2017-08-16 15:21:46Z

1

move your code from index.html to app.vue, index.html is a html file but not a vue file

try it , now it will be work , happy life.

//main.js
import Vue from 'vue'
import App from './App'

Vue.component('myc', {  //gobal components
  template: '<h1>Are you working?</h1>',
})

new Vue({
    el: '#app',
    template: '<App><App/>',
    components: {
        App
    }
})

//index.html
<body>
  <div id="app">
  </div>
  <script src="dist/build.js"></script>
</body>

//app.js
<template>
    <div class="app">
        <navbar></navbar>
        <myc></myc>
    <div
</template>

<script>
     import navbar from 'path of Navbar.vue'  //local components
     export default {
       name: 'app',
       component:{
         navbar
       }
     }
</script>

edited Aug 16, 2017 at 15:21

answered Aug 16, 2017 at 14:49

Zany

794 bronze badges

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

2 Comments

Nick Gant Over a year ago

It isn't working too. Seems like webpack or vue-loader issue

Nick Gant Over a year ago

Thank you, I've done pretty the same but template and 'components` options didn't work. I used render and it works now. But thank you for your answer

Nick Gant · Accepted Answer · 2017-08-16 15:22:46Z

0

I've moved everything to App.vue

render: h => h(App) worked for me

answered Aug 16, 2017 at 15:22

Nick Gant

31 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue.js doesn't render components

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related