Vue

index.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import { mapGetters } from 'vuex'
import VueCookie from 'vue-cookie'
import Scrapbook from './components/Scrapbook'

import routes from './routes'

Vue.use(VueRouter)
Vue.use(VueCookie)
Vue.use(VueAxios, axios)
Vue.use(Vuex)

const router = new VueRouter({
  mode: 'history',
  routes
})

const store = new Vuex.Store({
  state: {
    products: []
  },
  getters:{
    productsAll: state => {
      return state.products;
    }
  },
  mutations: {
    addProducts (state, product) {
      state.products = product
    }
  }
})


var date = new Date();
var res = '';

new Vue({
  el: '#app',
  render: res.render,
  staticRenderFns: res.staticRenderFns,
  components: {
    Scrapbook: Scrapbook
  },
  data () {
    return {
    }
  },
  router,
  methods: {
  },  
  mounted: function () {

  }
})

MainNav.vue

<template>

    <div class="vh-100 nav-bar">
      <nav role="main" class="w-100 tl">
        <ul class="center pv5 ph5">
          <li class="db v-mid mb3 text-gray">My Folders</li>
          <li class="db v-mid mb3 text-gray">Shared with me</li>
          <li class="db v-mid mb3 text-gray">From Canvas8</li>
          <li class="db v-mid mb3 text-gray">Sent</li>
          <li class="db v-mid mb3 text-gray">Archive</li>
        </ul>
      </nav>
    </div>

 
</template>

<script>

export default {
  components: {
    MainNav
  },
  name: 'main-nav',
  data () {
    return {
      welcomeMessage: 'Main Navigation'
    }
  },
  computed: {
    products() {
      return this.$store.state.products;
    },
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>

.nav-bar{
  background-color: #f7f7f7;
  width: 250px;
}

</style>

routes.js

const routes = [
  {path: '/scrapbook.php', component: Scrapbook, props: true, meta: {title: 'Scrapbook'}},
];

Scrapbook.vue

<template>

	<main-nav/></main-nav>

</template>

<script>

import MainNav from './MainNav'

export default {
  components: {
  	Scrapbook
  },
  name: 'scrapbook',
  data () {
    return {
      welcomeMessage: 'Story Navigation'
    }
  },
  computed: {
    products() {
      return this.$store.state.products;
    },
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>

.nav-bar{
  background-color: #f7f7f7;
  width: 250px;
}

</style>