I'm new to Vue js, and I'm trying to run the application, but it returns back the empty blank page with error: Component is missing template or render function. at <App>, also it shows [Vue Router warn]: Record with path "/" is either missing a "component(s)" or "children" property., Version of Vue 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" >
      <navigationPage />
      <div >
        <modalPage v-if="modalActive" />
        <transition name="virtualMachine">
          <initializationModal v-if="initializationModal" />
        </transition>
        <router-view />
      </div>
    </div>
    <div v-else >
      <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 know, that I haven't provided all files with Components, but if you see some mistakes or mismatches there, comment it up please,

EDIT: Second Error happens not only for home page, but also for all of the routes, ( can it be the issue with exporting ? )

One of the route components looks like this, others is fully similar

<template>
  <div >
    <router-link :to="{ name: 'Login'}"></router-link>
    <router-link :to="{ name: 'Register'}"></router-link>
    <router-view/>
    <!-- Header -->
    <div >
      <div >
        <h1>Virtual Machines</h1>
        <span>You have {{ virtualMachineData.length }} total Virtual Machines</span>
      </div>
      <div >
        <div @click="toggleFilterMenu" >
          <span
            >Filter by status <span v-if="filteredVirtualMachine">: {{ filteredVirtualMachines }}</span></span
          >
          <img src="@/assets/icon-arrow-down.svg" alt="" />
          <ul v-show="filterMenu" >
            <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" >
          <div >
            <img src="@/assets/icon-plus.svg" alt="" />
          </div>
          <span>New VirtualMachine</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 >
      <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>

CodePudding user response：

I think your component imports in the router maybe incorrect. You should not destructure the object during import.

Change:

import {HomePage} from "../views/home.vue";

To:

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

CodePudding user response：

The two problems in your main.js file is that you imported App and router in braces. Use this syntax instead:

import App from './App.vue';
import router from "../router/router.js";

CodePudding user response：

the error is in the main.js file. You need to import App from './App.vue' like this:

 import { App } from "./App.vue";