Install vue in laravel project

By ukmodak | May 18th 2022 09:26:00 AM | viewed 18 times
Step 1:

Install nodejs, npm and install and create a laravel project restaurentPos

Step 2:

Install vue ui in laravel

restaurentPos>composer require laravel/ui 
restaurentPos>php artisan ui vue
Step 3:

Install vue library in laravel project

restaurentPos>npm install
restaurentPos>npm install -global cross-env
restaurentPos>npm install vue-router
restaurentPos>npm cache clear --force
restaurentPos>npm run dev
Step 4:

will create following files in the following location

add following code in resources\js\app.js =>


require('./bootstrap');
import Vue from "vue";

import router from "./routes";
import axios from "axios";
import i18n from "./i18uk";
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';


import Vuelidate from "vuelidate";
import VueProgressBar from "vue-progressbar"
import store from "../js/store/index";

import Notifications from 'vue-notification';
import JwPagination from 'jw-vue-pagination';

Vue.component('jw-pagination', JwPagination);
Vue.component('App',require('./components/mainapp.vue').default)

const lang = localStorage.getItem('lang') || 'en';

axios.defaults.headers['Accept-Language'] = lang;

const options = {
  color: '#0000CD',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'top',
  inverse: false
}



Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(Vuelidate);
Vue.use(Notifications);
Vue.use(VueProgressBar, options)

Vue.config.ProductionTip= false



const app = new Vue({
     el: '#app',
     router:router,
     store:store,
     i18n:i18n
    //render: h => h(App)
});

export default app;


add following code in resources\js\routes.js =>

import Vue from 'vue';
import Router from 'vue-router';
import configManual from "./components/config/configManual";


import Layoutone from './components/layout/Layoutone.vue';
import Layouttwo from "./components/layout/Layouttwo.vue";
import Layoutpdf from "./components/layout/Layoutpdf.vue";
import Home from "./components/page/Home.vue";
import Inventory from "./components/page/Inventory.vue";
import AddDashboard from "./components/page/AddDashboard.vue";
import NotFoundComponent from "./components/page/NotFoundComponent.vue";


/*** company page ***/
import CompanyInfo from "./components/page/CompanyInfo.vue";
import CompanyListPage from "./components/page/CompanyListPage.vue";
import CompanyEditPage from "./components/page/CompanyEditPage.vue";
import CompanyViewPage from "./components/page/CompanyViewPage.vue";
/*** end company page ***/

/*** category page ***/
import CategoryAddPage from "./components/page/CategoryAddPage.vue";
import CategoryListPage from "./components/page/CategoryListPage.vue";
import CategoryEditPage from "./components/page/CategoryEditPage.vue";
import CategoryViewPage from "./components/page/CategoryViewPage.vue";
/*** end category page ***/


/*** unit page ***/
import UnitAddPage from "./components/page/UnitAddPage.vue";
import UnitListPage from "./components/page/UnitListPage.vue";
import UnitEditPage from "./components/page/UnitEditPage.vue";
import UnitViewPage from "./components/page/UnitViewPage.vue";
/*** end unit page ***/


/*** item  page ***/
import ItemAddPage from "./components/page/ItemAddPage.vue";
import ItemListPage from "./components/page/ItemListPage.vue";
import ItemEditPage from "./components/page/ItemEditPage.vue";
import ItemViewPage from "./components/page/ItemViewPage.vue";
/*** end item page ***/


/*** role page ***/
import RoleAddPage from "./components/page/RoleAddPage.vue";
import RoleListPage from "./components/page/RoleListPage.vue";
import RoleEditPage from "./components/page/RoleEditPage.vue";
import RoleViewPage from "./components/page/RoleViewPage.vue";
/*** end unit page ***/

/*** user page ***/
import UserAddPage from "./components/page/UserAddPage.vue";
import UserListPage from "./components/page/UserListPage.vue";
import UserEditPage from "./components/page/UserEditPage.vue";
import UserViewPage from "./components/page/UserViewPage.vue";
/*** end user page ***/



/*** menu page ***/
import MenuAddPage from "./components/page/MenuAddPage.vue";
import MenuListPage from "./components/page/MenuListPage.vue";
import MenuEditPage from "./components/page/MenuEditPage.vue";
import MenuViewPage from "./components/page/MenuViewPage.vue";
/*** end menu page ***/


/*** customer page ***/
import CustomerAddPage from "./components/page/customer/CustomerAddPage.vue";
import CustomerListPage from "./components/page/customer/CustomerListPage.vue";
import CustomerEditPage from "./components/page/customer/CustomerEditPage.vue";
import CustomerViewPage from "./components/page/customer/CustomerViewPage.vue";
/*** end customer page ***/

/*** supplier page ***/
import SupplierAddPage from "./components/page/supplier/SupplierAddPage.vue";
import SupplierListPage from "./components/page/supplier/SupplierListPage.vue";
import SupplierEditPage from "./components/page/supplier/SupplierEditPage.vue";
import SupplierViewPage from "./components/page/supplier/SupplierViewPage.vue";
/*** end supplier page ***/


/*** department page ***/
import DepartmentAddPage from "./components/page/department/DepartmentAddPage.vue";
import DepartmentListPage from "./components/page/department/DepartmentListPage.vue";
import DepartmentEditPage from "./components/page/department/DepartmentEditPage.vue";
import DepartmentViewPage from "./components/page/department/DepartmentViewPage.vue";
/*** end department page ***/



/*** designation page ***/
import DesignationAddPage from "./components/page/designation/DesignationAddPage.vue";
import DesignationListPage from "./components/page/designation/DesignationListPage.vue";
import DesignationEditPage from "./components/page/designation/DesignationEditPage.vue";
import DesignationViewPage from "./components/page/designation/DesignationViewPage.vue";
/*** end designation page ***/


/*** designation page ***/

import EmployeeAddPage from "./components/page/employee/EmployeeAddPage.vue";
import EmployeeListPage from "./components/page/employee/EmployeeListPage.vue";
import EmployeeEditPage from "./components/page/employee/EmployeeEditPage.vue";
import EmployeeViewPage from "./components/page/employee/EmployeeViewPage.vue";

/*** end designation page ***/


/*** sales page ***/

import SalesInfoAddPage from "./components/page/sales_info/SalesInfoAddPage.vue";
import SalesInfoAddPageTest from "./components/page/sales_info/SalesInfoAddPageTest.vue";
import SalesInfoListPage from "./components/page/sales_info/SalesInfoListPage.vue";
import SalesInfoEditPage from "./components/page/sales_info/SalesInfoEditPage.vue";
import SalesInfoViewPage from "./components/page/sales_info/SalesInfoViewPage.vue";

/*** end sales page ***/



/*** role menu permission page ***/
import RoleMenuListPage from "./components/page/RoleMenuListPage.vue";
/*** end role menu permission page ***/

Vue.use(Router);


export default new Router({
  mode: 'history',
  //base: '/posmaster/',
   base: configManual.basePath,
  routes: [
      {
      path: '/',
      name:'/',
      component: Home,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_dashboard',
      name:'ad_dashboard',
      component: AddDashboard,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_company_info',
      name:'ad_companyInfo',
      component: CompanyInfo,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_company_list',
      name:'ad_company_list',
      component: CompanyListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_company_edit/:id',
      name:'ad_company_edit',
      component: CompanyEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_company_view/:id',
      name:'ad_company_view',
      component: CompanyViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_cat_add',
      name:'ad_cat_add',
      component: CategoryAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_cat_list',
      name:'ad_cat_list',
      component: CategoryListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_cat_edit/:id',
      name:'ad_cat_edit',
      component: CategoryEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_cat_view/:id',
      name:'ad_cat_view',
      component: CategoryViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_unit_add',
      name:'ad_unit_add',
      component: UnitAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_unit_list',
      name:'ad_unit_list',
      component: UnitListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_unit_edit/:id',
      name:'ad_unit_edit',
      component: UnitEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_unit_view/:id',
      name:'ad_unit_view',
      component: UnitViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_item_add',
      name:'ad_item_add',
      component: ItemAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_item_list',
      name:'ad_item_list',
      component: ItemListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_item_edit/:id',
      name:'ad_item_edit',
      component: ItemEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_item_view/:id',
      name:'ad_item_view',
      component: ItemViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/inventory',
      name:'inventory',
      component: Inventory,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/one',
      name:'layoutone',
      component: Layoutone,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/two',
      name:'layouttwo',
      component: Layouttwo,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/pdf',
      name:'layoutpdf',
      component: Layoutpdf,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_role_add',
      name:'ad_role_add',
      component: RoleAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_role_list',
      name:'ad_role_list',
      component: RoleListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_role_edit/:id',
      name:'ad_role_edit',
      component: RoleEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_role_view/:id',
      name:'ad_role_view',
      component: RoleViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    
     {
      path: '/ad_user_add',
      name:'ad_user_add',
      component: UserAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_user_list',
      name:'ad_user_list',
      component: UserListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_user_edit/:id',
      name:'ad_user_edit',
      component: UserEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_user_view/:id',
      name:'ad_user_view',
      component: UserViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    
    {
      path: '/ad_menu_add',
      name:'ad_menu_add',
      component: MenuAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_menu_list',
      name:'ad_menu_list',
      component: MenuListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_menu_edit/:id',
      name:'ad_menu_edit',
      component: MenuEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_menu_view/:id',
      name:'ad_menu_view',
      component: MenuViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_role_menu_list',
      name:'ad_role_menu_list',
      component: RoleMenuListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    
    {
      path: '/ad_cus_add',
      name:'ad_cus_add',
      component: CustomerAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_cus_list',
      name:'ad_cus_list',
      component: CustomerListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_cus_edit/:id',
      name:'ad_cus_edit',
      component: CustomerEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_cus_view/:id',
      name:'ad_cus_view',
      component: CustomerViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    
        {
      path: '/ad_sup_add',
      name:'ad_sup_add',
      component: SupplierAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_sup_list',
      name:'ad_sup_list',
      component: SupplierListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_sup_edit/:id',
      name:'ad_sup_edit',
      component: SupplierEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_sup_view/:id',
      name:'ad_sup_view',
      component: SupplierViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    
    {
      path: '/ad_dept_add',
      name:'ad_dept_add',
      component: DepartmentAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_dept_list',
      name:'ad_dept_list',
      component: DepartmentListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_dept_edit/:id',
      name:'ad_dept_edit',
      component: DepartmentEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_dept_view/:id',
      name:'ad_dept_view',
      component: DepartmentViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_desig_add',
      name:'ad_desig_add',
      component: DesignationAddPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_desig_list',
      name:'ad_desig_list',
      component: DesignationListPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    {
      path: '/ad_desig_edit/:id',
      name:'ad_desig_edit',
      component: DesignationEditPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
     {
      path: '/ad_desig_view/:id',
      name:'ad_desig_view',
      component: DesignationViewPage,
       meta: {
            progress: {
              func: [
                {call: 'color', modifier: 'temp', argument: '#ffb000'},
                {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                {call: 'location', modifier: 'temp', argument: 'top'},
                {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
              ]
            }
        }
    },
    
    
    {
      path: '/ad_emp_add',
      name:'ad_emp_add',
      component: EmployeeAddPage,
       meta: {
            
        }
    },
    {
      path: '/ad_emp_list',
      name:'ad_emp_list',
      component: EmployeeListPage,
       meta: {
            
        }
    },
    {
      path: '/ad_emp_edit/:id',
      name:'ad_emp_edit',
      component: EmployeeEditPage,
       meta: {
           
        }
    },
     {
      path: '/ad_emp_view/:id',
      name:'ad_emp_view',
      component: EmployeeViewPage,
       meta: {
           
        }
    },
    
     {
      path: '/ad_sale_add',
      name:'ad_sale_add',
      component: SalesInfoAddPage,
       meta: {
            
        }
    },
     {
      path: '/ad_sale_add_test',
      name:'ad_sale_add_test',
      component: SalesInfoAddPageTest,
       meta: {
            
        }
    },
    {
      path: '/ad_sale_list',
      name:'ad_sale_list',
      component: SalesInfoListPage,
       meta: {
            
        }
    },
    {
      path: '/ad_sale_edit/:id',
      name:'ad_sale_edit',
      component: SalesInfoEditPage,
       meta: {
           
        }
    },
     {
      path: '/ad_sale_view/:id',
      name:'ad_sale_view',
      component: SalesInfoViewPage,
       meta: {
           
        }
    },
    
    { 
      path: '/:catchAll(.*)', 
      name: 'NotFound',
      component: NotFoundComponent,
    }
    
  ],
});


Step 5:

Setup route in laravel project

add following code in posmaster\routes\web.php =>

<?php

use Illuminate\Support\Facades\Route;

use App\Models\Auth\Permission;
use Illuminate\Support\Facades\DB;

Route::get('locale/{locale}', function ($locale){
    Session::put('locale', $locale);
    return redirect()->back();
});

Route::get('profile', function () {
})->middleware('verified');


Route::get('/', ['uses'=>'Web\HomeController@vue','as'=>'/']); 
Route::get('/{any}', 'Web\HomeController@vueall')->where("any",'.*');


add following code in posmaster\routes\api.php =>

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Auth\Role;


Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});


// api
Route::get('getuser','Json\ApiController@getUser'); 
Route::post('logincheck','Json\ApiController@loginUser'); 


/* role api */
Route::post('role_insert','Json\ApiController@role_insert'); 
Route::post('role_filter','Json\ApiController@role_filter');
Route::get('role_edit/{id}','Json\ApiController@role_edit'); 
Route::post('role_update','Json\ApiController@role_update'); 
Route::post('role_del','Json\ApiController@role_del');
/* role api */


/* user api */

Route::post('user_insert','Json\ApiController@user_insert'); 
Route::post('user_filter','Json\ApiController@user_filter');
Route::get('user_edit/{id}','Json\ApiController@user_edit'); 
Route::post('user_update','Json\ApiController@user_update'); 
Route::post('user_del','Json\ApiController@user_del');

/* user api */


/* menu api */
Route::post('menu_insert','Json\ApiController@menu_insert'); 
Route::post('menu_filter','Json\ApiController@menu_filter');
Route::get('menu_edit/{id}','Json\ApiController@menu_edit'); 
Route::post('menu_update','Json\ApiController@menu_update'); 
Route::post('menu_del','Json\ApiController@menu_del');
Route::post('menu_instant','Json\ApiController@menu_instant');
/* menu api */


/* role menu api */

Route::post('role_menu_filter','Json\ApiController@role_menu_filter');
Route::post('role_menu_update','Json\ApiController@role_menu_update');

/* role menu api */

/* user menu api */
  Route::post('user_menu','Json\ApiController@getUserMenu');
/* end user menu api */


in app\Http\Controllers\Web\HomeController.php =>

<?php namespace App\Http\Controllers\Web;

use Auth;
use Illuminate\Contracts\Auth\Guard;
use App\Http\Controllers\Controller;

class HomeController extends Controller {

	
    protected $auth;
	public function __construct(Guard $auth)
                
	{
            
	}
	
	public function vue(Request $request)
	{ 
            
         return view('welcome');                                    
	}
	
	public function vueall(Request $request)
	{ 
              
         return view('welcome');                                    
	}


}


add following code in resources\views\welcome.blade.php  =>

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>POS Master
          <link href="{{asset('public/css/adminvue1.css')}}" rel="stylesheet">
         
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="path" data-path="{{URL::to("/")}}">
         <style>
          html{
            width:100% !important;
            height:100% !important;
            float:left !important;
          }
          body{
             width:100% !important;
            height:100% !important;
            float:left !important;
          }
           #app{
             width:100% !important;
            height:100% !important;
            float:left !important;
          }
         
    </head>
    <body class="bg">
        <div id="app">
            <App>
        </div>
    </body>
      <script src="{{asset('public/js/app.js')}}"></script>
</html>

  
Step 6:

Run the following command to run the vuejs

restaurentPos>npm run dev

For production env

restaurentPos>npm run production
bONEandALL
Visitor

Total : 4233

Today :29

Today Visit Country :

  • United States