title: imported component into views not showing / VUE js
body: <p>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</p>
  <p>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 -</p>
  <p>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:</p>
  <p>File structure is:</p>
  <p><a href="https://i.stack.imgur.com/rirQQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rirQQ.png" alt="enter image description here" /></a></p>
  <p>VIEWS FILE importing the component to be nested inside of it:
  src/views/Contact.vue  &lt;&lt;&lt;&lt; i imagine I have an issue here but I cannot seem to figure this out</p>
  <pre><code>&lt;template&gt;
       &lt;div class=&quot;contact_container&quot;&gt;
           &lt;Contact/&gt;
       &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Contact from '@/components/Contact.vue'
  export default {
      name: 'Contact',
      components: {
          Contact
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Component file
  src/components/Contact.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Welcome to the contact page&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: 'Contact',
      data(){
          return{
              
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Views Router File:</p>
  <p>src/router/index.js</p>
  <pre><code>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: () =&gt; import(/* webpackChunkName: &quot;about&quot; */ '../views/About.vue')
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
  
  const router = new VueRouter({
    routes
  })
  
  export default router
  </code></pre>
  <p>and finally App.veu</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div id=&quot;nav&quot;&gt;
        &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; |
        &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt; |
        &lt;router-link to=&quot;/contact&quot;&gt;Contact&lt;/router-link&gt;
      &lt;/div&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>/// UPDATED ///</p>
  <p>In the code below - what does the <code>name</code> property do? </p>
  <p>(the code below is defining a component) </p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Welcome to the contact page&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: 'Contact-Component',  &lt;&lt;&lt;&lt; what does this do? 
      data(){
          return{
  
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>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: </p>
  <pre><code>import Contact from '../views/Contact.vue'
  </code></pre>
  <p>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?</p>
  <p>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...</p>
  <p>Thanks for any help -</p>
  <p>Wally</p>