I made my first vue.js app and trying to run it on one of the internal pages of a site. However, it renders only on index.html
(upd: the component should display a table with some data from mongoDB)
What I'm trying to add to html pages:
<div id="app"></div>
main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue:
<template>
<div id="app">
<UserComponent />
</div>
</template>
<script>
import UserComponent from './components/UserComponent.vue'
export default {
name: 'app',
components: {
UserComponent
}
}
</script>
Related
I made a Vue 2 web page and tried to use vue-router v3 to route to a different page. The web page is as follows:
src/App.vue: the web page opens from here
<template>
<div id="app">
<GoHere/>
</div>
</template>
<script>
import GoHere from './views/gohere/GoHere.vue'
export default {
name: 'App',
components: {
GoHere
}
}
</script>
src/main.js:
import Vue from 'vue'
import App from './App.vue'
import router from "./router/router"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src/views/gohere/GoHere.vue: the page from which the issue arises
<template>
<div>
<v-btn #click="goHere()">
Go Here
</v-btn>
</div>
</template>
<script>
export default {
name: "GoHere",
methods: {
goHere() {
this.$router.push("/menu")
}
}
}
</script>
src/views/menu/Menu.vue: the page to redirect to
<template>
<div>
Menu
</div>
</template>
<script>
export default {
name: "Menu",
}
</script>
src/router/router.js: the router file
import Vue from 'vue'
import VueRouter from 'vue-router'
import GoHere from '../views/gohere/GoHere'
import Menu from '../views/menu/Menu'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: "gohere", component: GoHere},
{ path: '/menu', name: "menu", component: Menu}
]
const router = new VueRouter({
routes
})
export default router
When I clicked on the button in GoHere.vue, the URL changes into "http://localhost:8080/#/menu" but the content does not change into the content for Menu.vue. How can the problem be solved?
The component from the current route will automatically render in <router-view></router-view>
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
Check the docs
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've created project with Vue CLI. Every time i save *.vue file i hear sound of Windows message, but i see changes in browser. There is no error. This sound is annoying! Can I remove it?
[UPDATE]
Here is my code:
App.vue
<template>
<div id="app">
<p v-html="msg"></p>
</div>
</template>
<script>
export default {
data(){
return {
msg: "Some message."
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
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)`