imported component into views not showing / VUE js

Question

TLDR: Ive nested a component into a views folder and it wont show, I believe I have imported it correctly and think I'm missing something / any help here would be great

im importing a component into a views file which is then to be displayed via the vue router - the issue is the component or view does not show -

Oddly this code works if I ask the router to display the component as a stand alone, but not when I nest the component into the views file:

File structure is:

VIEWS FILE importing the component to be nested inside of it: src/views/Contact.vue <<<< i imagine I have an issue here but I cannot seem to figure this out

<template>
     <div class="contact_container">
         <Contact/>
     </div>
</template>

<script>
import Contact from '@/components/Contact.vue'
export default {
    name: 'Contact',
    components: {
        Contact
    }
}
</script>

Component file src/components/Contact.vue

<template>
    <div>
        <h1>Welcome to the contact page</h1>
    </div>
</template>
<script>
export default {
    name: 'Contact',
    data(){
        return{
            
        }
    }
}
</script>

Views Router File:

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]

const router = new VueRouter({
  routes
})

export default router

and finally App.veu

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contact">Contact</router-link>
    </div>
    <router-view/>
  </div>
</template>

/// UPDATED ///

In the code below - what does the name property do? 

(the code below is defining a component) 

<template>
    <div>
        <h1>Welcome to the contact page</h1>
    </div>
</template>
<script>
export default {
    name: 'Contact-Component',  <<<< what does this do? 
    data(){
        return{

        }
    }
}
</script>

The reason why i'm a little lost here is because when we use this component we import it into another file using the below: 

import Contact from '../views/Contact.vue'

In that process we have defined the component as Contact (so it is not referenced by its name any more) .... so why did we define a name?

If there is any documentation on this that would be amazing and while it seems like a silly question (and probably is) it is distracting me with curiosity...

Thanks for any help -

Wally

Answer 1

The name is used to allow the component to recursively invoke itself in its template. It also helps when debugging as it allows for a more helpful error message.

Have a read over this to get a better idea: https://vuejs.org/v2/api/#name

Answer 2

change your code with this

<template>
     <div class="contact_container">
         <Contact/>
     </div>
</template>

<script>
import Contact from './components/Contact.vue'
export default {
    name: 'Contact',
    components: {
        "Contact":contact
    }
}
</script>

Answer 3

You have to let the app know it's a Vue component:

<script lang="js">
import Vue from 'vue';

export default Vue.extend({
  name: 'Contact',
  ...
});