I am a beginner in Vue js and I am facing an issue while running my application. It is showing an empty page with the error message:

Component is missing template or render function.  at <App>

. Additionally, there is also a warning from Vue Router saying

[Vue Router warn]: Record with path "/" is either missing a "component(s)" or "children" property.

. The version of Vue being used is 3

Vue Router.js

import VirtualMachine from "../views/virtualMachine.vue";
import HomePage from "../views/home.vue";

import CustomerProfile from "../views/CustomerProfile.vue";
import LoginPage from "../views/LoginPage.vue";
import RegistrationPage from "../views/RegistrationPage.vue";

import { createRouter, createWebHistory } from "vue-router";

/* eslint-disable no-unused-vars */


const routes = [
 {
   path: '/',
   name: 'main_page',
   component: HomePage,
 },
 {
   path: '/login/',
   name: 'login_page',
   component: LoginPage,
 },
 {
   path: '/register/',
   name: 'register_page',
   component: RegistrationPage,
 },
 {
   path: '/virtual/machine/:VirtualMachineId',
   name: 'virtual_machine',
   component: VirtualMachine,
 },
 {
   path: '/customer/profile/',
   name: 'customer_profile',
   component: CustomerProfile,
 }
]

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes
})

export {router};

main.js

import { createApp } from 'vue';
import {App} from './App.vue';
import { router } from "../router/router.js";

/* eslint-disable no-unused-vars */
createApp(App).use(router).mount('#app')

App.vue

<template>
  
  <div v-if="virtualMachineLoaded">
    <div v-if="!mobile" class="app flex flex-column">
      <navigationPage />
      <div class="app-content flex flex-column">
        <modalPage v-if="modalActive" />
        <transition name="virtualMachine">
          <initializationModal v-if="initializationModal" />
        </transition>
        <router-view />
      </div>
    </div>
    <div v-else class="mobile-message flex flex-column">
      <h2>Sorry, this app is not supported on Mobile Devices</h2>
      <p>To use this app, please use a Laptop or Another Device</p>
    </div>
  </div>

</template>
<script>

/* eslint-disable no-unused-vars */

import { mapState, mapActions } from "vuex";
import navigationPage from "./components/NavigationPage";
import initializationModal from "./components/InitializationModal";
import modalPage from "./components/ModalWindow";

export default {
  name: "App",
  data() {
    return {
      mobile: null,
    };
  },
  components: {
    navigationPage,
    initializationModal,
    modalPage,
  },
  created() {
    this.GET_VIRTUAL_MACHINES();
    this.checkScreen();
    window.addEventListener("resize", this.checkScreen);
  },
  methods: {
    ...mapActions(["GET_VIRTUAL_MACHINES"]),
    checkScreen() {
      const windowWidth = window.innerWidth;
      if (windowWidth <= 750) {
        this.mobile = true;
        return;
      }
      this.mobile = false;
    },
  },
  computed: {
    ...mapState(["initializationModal", "modalActive", "VirtualMachinesLoaded"]),
  },
};

</script>

I understand that I have not provided all files with Components, so feel free to point out any errors or inconsistencies you may notice,

EDIT: The second error is happening for all routes, not just the home page. Could it be an issue with exporting?

Here is how one of the route components looks like, others are similar:

<template>
  <div class="HomePage container">
    <router-link :to="{ name: 'Login'}"></router-link>
    <router-link :to="{ name: 'Register'}"></router-link>
    <router-view/>
    <!-- Header -->
    <div class="header flex">
      <div class="left flex flex-column">
        <h1>Virtual Machines</h1>
        <span>You have {{ virtualMachineData.length }} total Virtual Machines</span>
      </div>
      <div class="right flex">
        <div @click="toggleFilterMenu" class="filter flex">
          <span
            >Filter by status <span v-if="filteredVirtualMachine">: {{ filteredVirtualMachines }}</span></span
          >
          <img src="@/assets/icon-arrow-down.svg" alt="" />
          <ul v-show="filterMenu" class="filter-menu">
            <li @click="filteredVirtualMachine">Running</li>
            <li @click="filteredVirtualMachine">Shutdown</li>
            <li @click="filteredVirtualMachine">Deploying</li>
            <li @click="filteredVirtualMachine">Clear</li>
          </ul>
        </div>
        <div @click="newVirtualMachine" class="button flex">
          <div class="inner-button flex">
            <img src="@/assets/icon-plus.svg" alt="" />
          </div>
          <span>New Virtual Machine</span>
        </div>
      </div>
    </div>
    <!-- Virtual Machines -->
    <div v-if="virtualMachineData.length > 0">
      <Invoice v-for="(VirtualMachine, index) in filteredData" :VirtualMachine="VirtualMachine" :key="index" />
    </div>
    <div v-else class="empty flex flex-column">
      <img src="@/assets/illustration-empty.svg" alt="" />
      <h3>There is nothing here</h3>
      <p>Create a new invoice by clicking the New Invoice button and get started</p>
    </div>
  </div>
</template>

<script>

/* eslint-disable no-unused-vars */

import { mapMutations, mapState } from "vuex";

export default {

  name: "HomePage",
  data() {
    return {
      filterMenu: null,
      filteredVirtualMachine: null,
    };
  },
  methods: {

     ...mapMutations(["TOGGLE_VIRTUAL_MACHINE"]),

    newVirtualMachine() {
      // Initializes Empty Form for the Virtual Machine Configuration
      this.TOGGLE_VIRTUAL_MACHINE()
    },

    toggleFilterMenu() {
      this.filterMenu = !this.filterMenu;
    },

    filterVirtualMachine(e) {
      if (e.target.innerText === "Clear") {
        this.filteredVirtualMachine = null;
        return;
      }
      this.filteredVirtualMachine = e.target.innerText;
    },
  },

  computed: {
    ...mapState(["virtualMachineData"]),
    filteredData() {
      return this.virtualMachineData.filter((virtualMachine) => {

        if (this.filteredVirtualMachine === "Clear") {
          this.filteredVirtualMachine = null
          return true
        }
        if (this.filteredVirtualMachine === "Running") {
          return virtualMachine.Running === true;
        }
        if (this.filteredVirtualMachine === "Shutdown") {
          return virtualMachine.Shutdown === true;
        }
        if (this.filteredVirtualMachine === "Deploying") {
          return virtualMachine.Deploying === true;
        }
        return virtualMachine;
      });
  },
},
}

</script>