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

Question

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 class="skew skew-top mr-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
      </svg>
    </div>
    <div class="skew skew-top ml-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
      </svg>
    </div>
    <div class="py-20 bg-gray-900 radius-for-skewed">
      <div class="container mx-auto px-4">
        <div class="flex flex-wrap">
          <div class="w-full lg:w-1/3 mb-16 lg:mb-0">
            <a class="inline-block mb-3 text-white text-3xl font-bold leading-none" href="#">
              <img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
            </a>
            <p class="mb-4 max-w-sm text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
            <div>
              <a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
                <img class="mx-auto" src="atis-assets/social/facebook-purple.svg">
              </a>
              <a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
                <img class="mx-auto" src="atis-assets/social/twitter-purple.svg">
              </a>
              <a class="inline-block w-10 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
                <img class="mx-auto" src="atis-assets/social/instagram-purple.svg">
              </a>
            </div>
          </div>
          <div class="w-full lg:w-2/3 lg:pl-16 flex flex-wrap justify-between">
            <div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
              <h3 class="mb-6 text-2xl font-bold text-purple-600">Products</h3>
              <ul>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Services</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">News and Stories</a></li>
                <li><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
              </ul>
            </div>
            <div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
              <h3 class="mb-6 text-2xl font-bold text-purple-600">Important Links</h3>
              <ul>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Organization Team</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Our Journeys</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Pricing Plans</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Terms &amp; Conditions</a></li>
                <li><a class="text-gray-400 hover:text-gray-300" href="#">Privacy Policy</a></li>
              </ul>
            </div>
            <div class="w-full md:w-1/3 lg:w-auto">
              <h3 class="mb-6 text-2xl font-bold text-purple-600">Company</h3>
              <ul>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Jobs</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Press</a></li>
                <li><a class="text-gray-400 hover:text-gray-300" href="#">Contact Us</a></li>
              </ul>
            </div>
          </div>
        </div>
        <p class="lg:text-center text-sm text-gray-400 border-t border-gray-800 pt-12 mt-16">&copy; 2021. All rights reserved.</p>
      </div>
    </div>
    <div class="skew skew-bottom mr-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
      </svg>
    </div>
    <div class="skew skew-bottom ml-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" 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 class="text-[100px] text-center m-auto text-red underline"> 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!**

Answer 1

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>