[Vuejs]-Vuejs Layouts and Page Components

by

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

enter image description here

-1👍

The file structure should consists of –
enter image description here

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

Leave a comment