Hi I'm trying to import a component in Vue 3.
This is my component structure :
+src
+App.vue
+components
+Navbar.vue
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>
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;
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
Does anyone know a solution to this problem?
Thanks in advance.
That's how App.vue should look like:
<template>
<div>
<Navbar />
</div>
</template>
<script setup>
import Navbar from './components/Navbar.vue';
</script>
If you are using vuter extension try restarting/reloading vscode
Related
This is my folder
+src
+components
+Logo.vue
App.vue
main.js
In my main.js I had been import the file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Logo from '#/components/Logo.vue'
createApp(App).use(router).mount('#app')
This is my App.vue
<template>
<div>
<Logo />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
And I was stucked at how to link my Logo.vue into App.vue
You can register the component globally by using:
app.component("Logo", Logo);
Example:
...
const app = createApp(App);
// Register component globally
app.component("Logo", Logo);
app.use(router);
app.mount("#app");
...
Read more in the official docs.
I'm trying to use VueThreeSixty ( https://github.com/rajeevgade/vue-360 ) component in my Vue3 + Vite project.
I imported everything, added VueThreeSixty to my components object, but it looks like I'm still missing something, can u help me figure out what?
[Vue warn]: Component is missing template or render function.
Here's my code.
<template>
<Navigation></Navigation>
<div class="tb_header">
</div>
<div class="container">
<div class="row">
<div class="w-2/5">
<VueThreeSixty
:amount="36"
imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
fileName="chair_{index}.jpg?v1"
/>
</div>
<div class="w-3/5">Sound</div>
</div>
</div> <template>
<script>
import Navigation from "../components/Navigation.vue";
import Footer from "../components/Footer.vue";
import VueThreeSixty from 'vue-360'
import "vue-360/dist/css/style.css";
export default {
data() {},
components: {
Navigation,
Footer,
VueThreeSixty
},
};
</script>
main.js
import { createApp } from 'vue'
import Home from './views/Home.vue'
import Navigation from './components/Navigation.vue'
import Footer from './components/Footer.vue'
import App from './App.vue'
import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'
import './main.css'
import './typo.css'
createApp(App)
.use(VueThreeSixty)
.mount('#app')
You should follow the documentation of https://github.com/rajeevgade/vue-360. You need to 'Vue.use' the component first and include tag vue-three-sixty. But it looks like this component does not support Vue 3 yet.
In the example router project generated by Vue CLI, I don't see export statement in App.vue. But App module is found imported in main.ts. How the import of a module is made possible without an export statement?
But I see the export statement in App.vue of a non-router example project.
main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App)
.use(router)
.mount("#app");
App.vue of router example project
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
<style>
...
</style>
App.vue of a non-router example project
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "./components/HelloWorld.vue";
#Options({
components: {
HelloWorld
}
})
export default class App extends Vue {}
</script>
<style>
...
</style>
Im trying to use this library: https://github.com/rigor789/vue-scrollto
But Im having trouble using it and the instructions are not very helpful to me. it says I should do this:
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
But I have no idea where to do this. So I have tried just using it like this:
<template>
<div>
<Navbar/>
<Cover/>
<button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
<Offers/>
<AboutUs id="about"/>
<Info/>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Cover from '#/components/main/Cover'
import Offers from '#/components/main/Offer/Offers'
import AboutUs from '#/components/main/AboutUs'
import Info from '#/components/main/Info'
import Menu from '#/components/main/menu/Menu'
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
export default {
components: {
Navbar,
Cover,
Offers,
AboutUs,
Info,
Menu
}
}
</script>
But that doesn't work. So how do I import libraries properly so I can use the directives?
Try to use import instead of using require.
The es6 script will be transpiled to old js versions when you build the app.
<template>
<div>
<Navbar/>
<Cover/>
<button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
<Offers/>
<AboutUs id="about"/>
<Info/>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Cover from '#/components/main/Cover'
import Offers from '#/components/main/Offer/Offers'
import AboutUs from '#/components/main/AboutUs'
import Info from '#/components/main/Info'
import Menu from '#/components/main/menu/Menu'
import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo)
export default {
components: {
Navbar,
Cover,
Offers,
AboutUs,
Info,
Menu
}
}
</script>
So bacause I use Vue it did the following:
create a new file called nuxt-scroll-to.js in the plugins folder with this code:
import Vue from 'vue';
import VueScrollTo from 'vue-scrollto/vue-scrollto.js';
Vue.use(VueScrollTo)
and the in the nuxt.config.js array add this code: { src: '~/plugins/nuxt-scroll-to.js', ssr: false },
Am using vuetify to build a template but am getting an error
unknown custom element dashboard did you register the component correctly?
This is my code:
In the main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(Vuetify)
new Vue({
el: '#app',
render: h => h(App)
})
In my App.vue
<template>
<dashboard></dashboard>
</template>
<script>
import Dashbaord from './components/dashboard/Dashboard.vue';
export default {
name: "appinit",
components: {
"dashboard":Dashboard
}
}
And here is my dashboard
<template>
<v-app>
<left-drawer></left-drawer>
<toolbar></toolbar> <!-- Dashboard Toolbar-->
<main>
<v-container fluid>
..info are
</v-slide-y-transition>
</v-container>
</main>
<right-drawer></right-drawer>
<footer-area></footer-area>
</v-app>
</template>
<script>
imports ......
export default {
components: {
Toolbar, RightDrawer,LeftDrawer,FooterArea
}
}
What could be wrong as i have just separated the initial vuefy installation component into different component sections
The code is available at github on This link
What could be wrong?
You have few issues in your code.
You have to close tag in App.vue
Fix typo App.vue line 6 "Dashboard"
Remove footer-area from Dashboard.Vue (you don't have that component, yet ;) )