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
