Trying to create a global Footer component and importing into my Vue.js file-CodePudding

I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!

So I have initially created a Footer Component in ./components/Footer.vue. Here is the code for that specific component (Footer component) -

<template>

  <section>
    <div >
      <svg  viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
      </svg>
    </div>
    <div >
      <svg  viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
      </svg>
    </div>
    <div >
      <div >
        <div >
          <div >
            <a  href="#">
              <img  src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
            </a>
            <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
            <div>
              <a  href="#">
                <img  src="atis-assets/social/facebook-purple.svg">
              </a>
              <a  href="#">
                <img  src="atis-assets/social/twitter-purple.svg">
              </a>
              <a  href="#">
                <img  src="atis-assets/social/instagram-purple.svg">
              </a>
            </div>
          </div>
          <div >
            <div >
              <h3 >Products</h3>
              <ul>
                <li ><a  href="#">Services</a></li>
                <li ><a  href="#">About Us</a></li>
                <li ><a  href="#">News and Stories</a></li>
                <li><a  href="#">Roadmap</a></li>
              </ul>
            </div>
            <div >
              <h3 >Important Links</h3>
              <ul>
                <li ><a  href="#">Organization Team</a></li>
                <li ><a  href="#">Our Journeys</a></li>
                <li ><a  href="#">Pricing Plans</a></li>
                <li ><a  href="#">Roadmap</a></li>
                <li ><a  href="#">Terms &amp; Conditions</a></li>
                <li><a  href="#">Privacy Policy</a></li>
              </ul>
            </div>
            <div >
              <h3 >Company</h3>
              <ul>
                <li ><a  href="#">About Us</a></li>
                <li ><a  href="#">Jobs</a></li>
                <li ><a  href="#">Press</a></li>
                <li><a  href="#">Contact Us</a></li>
              </ul>
            </div>
          </div>
        </div>
        <p >&copy; 2021. All rights reserved.</p>
      </div>
    </div>
    <div >
      <svg  viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
      </svg>
    </div>
    <div >
      <svg  viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
      </svg>
    </div>
  </section>

</template>

<script>
  export default {}
</script>```

**And here is the contents of my App.vue -**

```<script>

import { createApp } from 'vue'
import Footer from './components/Footer.vue'

const globalComponents = createApp({})

globalComponents.component(
  // the registered name
  'Footer',
)
app
.component('Footer', Footer)

</script>


<template>
  <h1 > Hello Vue JS </h1>
</template>

<Footer />

<style scoped>
</style>```

However, when I run npm run dev everything opens and the local server but just shows a blank page, not even then <template><h1>Hello Vue JS</h1><template/>

Not only this but the footer doesnt appear at all and is highlighted grey in my IDE which is assume means its not being imported correctly.

I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!**

CodePudding user response：

Put footer inside <template>

Code is here

I don't think you need createApp

simply put like this <Footer /> in your App.vue inside the <templete> tag

<template>
  Hello World!
  <Footer />
</template>

Hello World! is your main content, Footer is your footer content or breadcrumb content

Same way you can add header if you have Header.vue

<template>
  <Header />
  Hello World!
  <Footer />
</template>