app.js vue

app.js

require('./bootstrap');
/**
 * I N C L U D E_____ALL_____R E Q U I R E ________FROM____VUEjs
 * ✓ GOOD
 * npm install
 * npm install vue-router
 * npm-install vue-axios
 * npm run dev || npm run watch
 * ✗ BAD
 */
window.Vue = require('vue');

window.VueRouter = require('vue-router').default;

window.VueAxios = require('vue-axios').default;

window.Axios = require('axios').default;

const AppLayout = require('./components/App.vue').default;

/**
 * S H O W ____________TEMPLATE___________VUEjs________
 */
// show the list post template
const Listposts = Vue.component(
    'Listposts',
    require('./components/Listposts.vue').default
);
// show the add post template
const Addpost = Vue.component(
    'Addpost',
    require('./components/Addpost.vue').default
);
// show the view post  template
const Viewpost = Vue.component(
    'Viewpost',
    require('./components/Viewpost.vue').default
);
// show the edit post template
const Editpost = Vue.component(
    'Editpost',
    require('./components/Editpost.vue').default
);
// show the delete post template
const Deletepost = Vue.component('Deletepost',
    require('./components/Deletepost.vue').default
);

// Registering Module
Vue.use(VueRouter, VueAxios, axios);

const routes = [{
  name: 'Listposts',
  path: '/',
  component: Listposts,
},
{
  name: 'Addpost',
  path: '/add-post',
  component: Addpost,
},
{
  name: 'Viewpost',
  path: '/view-post',
  component: Viewpost,
},
{
  name: 'Editpost',
  path: '/edit-post/',
  component: Editpost,
},
{
  name: 'Deletepost',
  path: '/delete-post',
  component: Deletepost,
},
];

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

new Vue(Vue.util.extend({
  router,
}, AppLayout)).$mount('#app');