I want to add a component basePage to my main.ts but I have a problem:
No overload matches this call.
Code:
basePahe.html
<template>
<v-app id="basePage">
<v-app-bar app color="primary" dark>
<p>Hello World!</p>
</v-app-bar>
<v-main>
</v-main>
</v-app> </template>
BasePage.vue.ts
import Vue from "vue";
import Component from "vue-class-component";
import './basePage.html'
#Component
export default class BasePage extends Vue {
}
main.ts
import Vue from 'vue'
import App from './App.vue'
import basePage from './components/basePage/BasePage.vue'
Vue.config.productionTip = false
new Vue({
basePage,
render: h => h(App),
}).$mount('#app')
Also, I don't know why I can't import vue.ts? Is it my mistake and I should create separate file for vue and ts?
Related
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
I'm using vue cli to build a Spa. It is just a basic vue router code. After installing and using vue router, it is not displaying anything on my app.vue file.
I tried to inspect from console, but there is just a commented line, nothing else.
Here is the code
main.js File
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {route} from './router'
Vue.use(VueRouter);
const router = new VueRouter({
route: route
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
router.js file
import Home from './component/home'
import User from './component/user'
export const route = [
{path:'/', component: Home},
{path:'/user', component:User}
]
app.js file
<template>
<div id="app">
<h1>This is main app</h1>
<router-link to="/user">User</router-link>
<router-link to="/">Home</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
user.vue file
<template>
<div>
<h1>This is User page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
home.vue file
<template>
<div>
<h1>This is home page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
All the code is at https://github.com/shanegibney/vue-component-routes
Using Vue3.8.3, I am trying to use and to link to single page components. These components are registered in src/routes/index.js here is the file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home.vue'
import About from '#/components/About.vue'
Vue.use(VueRouter)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/about',
name: 'About',
component: About
}]
})
That should set up the routes.
Then Home.vue component contains a menu which should link to these components.
Home.vue
<template>
<div class="home">
<b-navbar type="light" variant="light" toggleable="md">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
</style>
Also the App.vue file looks like this,
<template>
<div id="app">
<div class="">
I am app.vue
</div>
<Home />
</div>
</template>
<script>
import Home from '#/components/Home.vue'
export default {
name: 'app',
components: {
Home
}
}
</script>
all this really does is calls the Home.vue component.
If the components are registered in src/routes/index.js should they be globally accessible?
Also after I installed routes using $npm install vue-router I created the directory routes inside src because it did not exist. Then I put index.js inside routes. Perhaps this is not correct.
Not sure if it is helpful but main.js looks like this,
import Vue from 'vue'
import '#babel/polyfill'
import 'mutationobserver-shim'
import VueRouter from 'vue-router'
import './plugins/bootstrap-vue'
import App from './App.vue'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
The error I get mentions a 'mismatch',
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
I presume this is something to do with the routes in index.js not matching with the "to" paths in router-link.
How can I ensure index.js in being included in the app?
Any help would be greatly appreciated.
Thanks,
You forgot to inject your router in the Vue app:
import Vue from 'vue'
import '#babel/polyfill'
import 'mutationobserver-shim'
import VueRouter from 'vue-router'
import './plugins/bootstrap-vue'
import App from './App.vue'
import router from './router' // <= here
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router, // <= and here
render: h => h(App),
}).$mount('#app')
I tried to use a vue component(Global.vue) in other component(App.vue), but there
Failed to mount component: template or render function not defined
error.
Global.vue:
<template>
<div class="global-view">
<p>Global </p>
</div>
</template>
<script>
export default {
name: 'global'
}
</script>
App.vue:
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.component('global', require('./components/Global'))
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
You need to import the component within the component file that you want to use it in.
`import Global from './components/Global'
From there you need to add a new key inside your components option that will "register" the component.
Here is what you want your app component to look like.
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
import Global from './components/Global
export default {
name: 'app'
components: {
'global': Global,
}
}
</script>
<global></global> should be able to render at this point.
I use import instead of require(in main.js) and it works for me:
import Global from './components/Global.vue
Vue.component('global', Global)`
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 ;) )