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.
> 
> 
>