title: Footer in Vue js start page
body: <p>I need to add a footer to the Vue js project home page. But it is not working, i dont konw more about vue, I'm a begineer.</p>
  <p><a href="https://i.stack.imgur.com/YCPLX.png" rel="nofollow noreferrer">I need to add footer to this page</a></p>
  <p>This is my footer component:</p>
  <pre><code>&lt;template&gt;
   &lt;footer&gt;
   &lt;/footer&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  
  footer
  {
  display: flex;
  background-color: #42b942; 
  height: 50px;
  width: 100%;
  position: fixed;}
  &lt;/style&gt;
  </code></pre>
  <p>This is my code in App.vue:</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;/div&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import footer from '@/components/footer.vue';
  
      export default {
    name: &quot;footer&quot;,
    components: {
      footer
     }
   }
   &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  
  #nav {
    padding: 30px;
  }
  
  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }
  
  #nav a.router-link-exact-active {
    color: #42b983;
  }
  &lt;/style&gt;
  </code></pre>
  <p>What are changes to get the footer in the open page of the vue project.</p>