Hi I'm trying to import a component in Vue 3. This is my component structure :
src
App.vue
components
Navbar.vue
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
In my App.vue I tried :
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<Navbar/>
</div>
</template>
<script>
import Navbar from './components/Navbar.vue';
</script>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
This is my main.ts :
import { createApp } from 'vue'
import router from './router'
import mitt from 'mitt';
const emitter = mitt();
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(BootstrapVue3)
app.mount('#app')
app.config.globalProperties.emitter = emitter;
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
But I get this error :
Already included file name '/home/jip/Projects/snippedit/client/src/components/Navbar.vue' differs from file name '/home/jip/Projects/snippedit/client/src/components/navBar.vue' only in casing.
The file is in the program because:
Imported via './components/Navbar.vue' from file '/home/jip/Projects/snippedit/client/src/App.vue'
Root file specified for compilation
Root file specified for compilation
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Does anyone know a solution to this problem? Thanks in advance.
CodePudding user response:
That's how App.vue should look like:
<template>
<div>
<Navbar/>
</div>
</template>
<script setup>
import Navbar from './components/Navbar.vue';
</script>