working with laravel 5.7 and vue.js my
app.js file is as following,
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue') },
{ path: '/profile', component: require('./components/Profile.vue') }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router
});
and I need link following link with vue file
<router-link to="/dashboard" class="nav-link">
and Dashboard.vue file is like this
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Dashboard Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
but when I click above link to dashbord.vue file it is not loading. only display url in the address bar. my console error is as following
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>
how can fix this error
You need add App.vue
<template>
<div>
<router-link to="/dashboard" class="nav-link">Dashboard</router-link>
</div>
</template>
<script>
export default {
// some code here if needed
}
</script>
and then use it in main.js
require('./bootstrap'); // maybe better use import "./bootstrap"
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from "./App.vue";
import Dashboard from './components/Dashboard.vue';
import Profile from './components/Profile.vue';
import ExampleComponent from './components/ExampleComponent.vue';
Vue.use(VueRouter)
window.Vue = Vue; // why you do that???
let routes = [
{ path: '/dashboard', component: Dashboard },
{ path: '/profile', component: Profile }
]
const router = new VueRouter({
routes // short for `routes: routes`
});
Vue.component('example-component', ExampleComponent);
new Vue({
router,
render: (h) => h(App)
}).$mount('#app');
Related
Well, this is my App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Home/>
<AddService/>
</div>
</template>
<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/addService',
name: 'addService',
component: AddService
}
]
});
Vue.use(router)
export default {
name: 'App',
components: {
Home
}
}
</script>
I'd like to route between the Home and AddService Component. My Home page has a link which is basically this: Add a new Service
And if I press on this link I should get redirected to the AddService Component. But at the moment it only adds the right url in the search bar but I don't get redirected
When using Vue router you are not supposed to make your own anchor tags with hrefs for navigation. To navigate you can use the router-link component.
If you want to programmatically navigate you can use the push method on the router.
Your App.vue should look like this
<template>
<div id="app">
<router-view />
</div>
</template>
Your index.js should look like this
import Vue from 'vue'
import App from '#/App.vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import AddService from '#/components/AddService'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/add-service',
name: 'Add Service',
component: AddService
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')
BUT best practise is to use an external router/index.js file to declare all your routes and import to the index.js(main app file) and use it when you declare new Vue instance.
After that you can have router-link in your code as
<router-link to="path">
or navigate programmaticaly with
this.$router.push({ name: AddService })
or
this.$router.push({ path: '/' })
Basically I want to render the Login component on my Login Route but it is not rendering-
Login component-
<template>
<v-app>
<h1>Login Component</h1>
</v-app>
</template>
<script>
export default {
}
</script>
Routes.js-
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import Register from '#/components/Register'
import Login from '#/components/Login'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
this is my main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
I am using vue version-2.6.10 and vue router version-3.1.2..it is also not showing any error please help.
Make sure that you wrap up the router-view></router-view> in <v-content></v-content> then only your routing will work properly. Otherwise only URL will change and the respective component will not render.
I am tying to port a stand alone Vue app into a larger Java Spring web project. The Vue app has Vue router as a dependency. When I try to load the main page, I am getting a [Vue warn]: Error in render: "TypeError: Cannot read property 'to' of undefined". found in ---> <RouterLink>...<AppHeader> at src/views/AppHeader.vue error in the browser console.
The main JSP loads fine, and is using a compiled JS file.
src/main.js
import Vue from 'vue';
import AppLayout from './views/Layout.vue';
import router from './router';
import Vuetify from 'vuetify';
import vueMoment from 'vue-moment';
import VueTippy from 'vue-tippy';
new Vue({
el: '#app',
router,
render: h => h(AppLayout)
});
Vue.use(VueTippy);
Vue.use(Vuetify);
Vue.use(vueMoment);
src/views/AppLayout.vue
<template>
<div id="app">
<app-header></app-header>
<section class="main-section section">
<div class="container content">
<router-view></router-view>
</div>
</section>
<app-footer></app-footer>
</div>
</template>
<script>
import AppHeader from './AppHeader.vue';
import AppFooter from './AppFooter.vue';
export default {
components: {
'app-header': AppHeader,
'app-footer': AppFooter
}
}
</script>
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import SearchForm from '../views/search/searchform.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => ({ y: 0 }),
routes: [
{ path: '/app/path/search', component: SearchForm },
{ path: '/app/path/new', component: NewReturn },
{ path: '/app/path/home', component: SearchForm },
{ path: '/', redirect: '/app/path/search' },
{ path: '*', component: NotFound }
]
})
export default router
src/views/Appheader.vue
<template>
<div>
<router-link to="/app/path" exact>Search</router-link>
</div>
</template>
It seems like router-link is not working for some reason. I can't seem to figure out how to fix this issue. Anyone know what I am missing?
You don't need an <a> tag inside the router-link, that is rendered by vue when using <router-link>
https://router.vuejs.org/api/#router-link
The undefined 'to' will be your empty href declaration.
I am new to vue. Sorry if this is a silly question. I am using vue-router to route to a component. My url is changing when I click on the router link but the contents of the component are not being displayed. I am not getting any error in the developer tools. It would be a huge help if you can help.
I tried all the answers regarding this issue here and still couldn't get it to work.
src/App.vue
<template>
<div id="app">
<router-link to="/toread">Go toread</router-link>
<router-view></router-view>
</div>
</template>
<script>
import toread from './components/toread.vue';
export default {
name: 'app',
components:{
toread
},
}
</script>
src/components/toread.vue
<template>
<div>
<h1>toread</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes'
import toread from './components/toread.vue'
Vue.use(VueRouter)
const router = new VueRouter({
Routes
});
new Vue({
el: '#app',
render: h => h(App),
router
})
src/routes.js
import toread from './components/toread.vue'
export default[
{path:'/toread', component:toread},
]
I expect to click on the router link and display the h1 tag from toread component.
Change Routes to routes: Routes
const router = new VueRouter({
routes: Routes
});
I'm using Laravel 5.6 and Vuejs 2. I'm a beginner in Vuejs and stuck at the layout structure. I want to use laravel for backend API and frontend completely on Vuejs so that i can move to different pages without refreshing the browser.
I have created these in the components folder
Components
-INCLUDES
- navbar.vue
- footer.vue
-PAGES
- about.vue
- contact.vue
-AUTHENTICATION
- login.vue
- register.vue
- resetpassword.vue
I have installed Vue router and made a routes.js file in assets
My question is how to make a layout with the components above so that navbar and footer stay on every page and page components load without refreshing when clicking on the links.
You should have a main component, such as app.vue where you import the router and display the router-view. Then, you can also use your navigation and footer components in there. Something like this:
<template>
<div id="app">
<Navigation v-if="isHome" />
<router-view></router-view>
<BottomFooter />
</div>
</template>
In your app.js file (or main.js, something like that)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
//import here page components
import App from './App.vue'
import Home from './components/Home.vue'
//Routes
const routes = [
{ path: '/', name: 'home', component: Home }
//other routes here
];
const router = new VueRouter({
mode: 'history',
routes // short for `routes: routes`
});
//Vue Init
new Vue({
el: '#app',
router,
render: h => h(App)
})
My file structure with Vue and Laravel
The file structure should consists of -
It should consists of src folder containing store, components and assets as crucial elements to any vue boilerplate.
<router-view></router-view> can be also written as <router-view/> now onwards. It only displays the components that are included in routes.js which is below app.vue.
app.vue
<template>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<router-link class="mdl-navigation__link" to="/" #click.native="hideMenu">Home</router-link>
<router-link class="mdl-navigation__link" to="/postview" #click.native="hideMenu">Post a picture</router-link>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<router-view></router-view>
</div>
</main>
</div>
</template>
routes.js can be in router folder in src, but here I have taken it in src folder as I don't have much to do with vue-router.
routes.js
import Vue from 'vue'
import Router from 'vue-router'
import homeview from '../components/homeview'
import detailview from '../components/detailview'
import postview from '../components/postview'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Homeview',
component: homeview
},
{
path: '/detailview',
name: 'detailview',
component: detailview
},
{
path: '/postview',
name: 'Postview',
component: postview
}
]
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.use(axios);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})