Components are not rendering in quasar project with no error-CodePudding

I created Vue 3, quasar project. everything worked fine till the moment I add new component. everything is rendering except the new component which I built and added it to the project. please help me with this problem if you can.

Here is my code: index page:


<template>
  <q-page >
    <!-- section one-->
    <SectionOne />

  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import SectionOne from "components/MainPage/SectionOne.vue";

export default defineComponent({
  components: {
    SectionOne,
  },
  name: "IndexPage",
});
</script>

Component:

<template>
  <div >
    <div >
      <q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg">
        <h1 >Basic</h1>
      </q-parallax>
    </div>
  </div>
</template>

CodePudding user response：

Not sure about your project structure, but try this (missing "./")

import SectionOne from "./components/MainPage/SectionOne.vue";

CodePudding user response：

You can also import from the root 'src' like this:

import SectionOne from "src/components/MainPage/SectionOne.vue";