Need an example vue-router (vue 2.x) for a Layout.vue with other route based components

Question

I cannot figure out how to set this up properly using vue-router with vue.js 2.x

I want App.vue to be a main site layout module which contains basic site level things like footer, logo, main nav, etc.

A route based architecture which will load components based on the route inside this App.vue

ie: /things to show list and /things/:id to show individual item

I'm using the webpack template from vue-cli

I'm confused about main.js vs. App.vue should I be moving the routes out of main.js into App.vue?

Can someone link to a simple hello world using layouts in vue-router?

import Vue from 'vue'
import App from './App'
import Items from './components/Items'
import Item from './components/Item'
import Axios from 'axios'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.prototype.$http = Axios

const routers = new VueRouter([
  { path: '/items/:id', component: Item },
  { path: '/', component: Items }
])

// how to specify App.vue as a layout?
new Vue({
  routes
}).$mount('#app')

Check my repo here github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app Take look into layouts directory — Belmin Bedak
– Belmin Bedak, Commented Dec 26, 2016 at 20:58

Belmin Bedak · Accepted Answer · 2016-12-26 21:00:34Z

1

I think this should work for you

const app = new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app')

or spread operator

const app = new Vue({
    router,
    ...App
}).$mount('#app')

As I mentioned in comment, take look at the repo that I created https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

answered Dec 26, 2016 at 21:00

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

chovy Over a year ago

Exactly what I was looking for except I'm getting: Uncaught TypeError: Cannot read property 'matched' of undefined when I load the page. If I remove <router-view> from App.vue the error goes away and I get the header and footer but no content.

Belmin Bedak Over a year ago

Did you have defined the #app div into the App.vue or it's defined into html file, php or whatever?

chovy Over a year ago

yes

<template>   <div id="app">     <header-bar></header-bar>     <router-view></router-view>     <footer-bar></footer-bar>   </div> </template>

chovy Over a year ago

header and footer load if i remove <router-view>

Belmin Bedak Over a year ago

Okay, so try to move that outside .vue file, so keep it in your main template file, blade or whatever

|

chovy · Accepted Answer · 2016-12-27 00:18:31Z

1

I had wrong property name:

new Vue({
  router,
  ...App
}).$mount('#app')

This fixes it. I had imported it as routes not router. Another way to fix would have been { router: routes } but I renamed the file to router and now everything works.

Big thanks to @belmin for hoping on screenhero to try and help me fix it!

answered Dec 27, 2016 at 0:18

chovy

76.2k63 gold badges249 silver badges325 bronze badges

Collectives™ on Stack Overflow

Need an example vue-router (vue 2.x) for a Layout.vue with other route based components

2 Answers 2

17 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related