Vuejs Layouts and Page Components

Question

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.

Answer 1

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

Answer 2

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 }
})