split layout employer

resources/js/App.vue

 <template>
-  <div>
-    <Dialog></Dialog>
-    <Toolbar></Toolbar>
-    <v-content class="mt-5">
-      <v-container fluid>
-        <v-layout>
-          <v-flex xs10 offset-xs1>
-            <v-card flat height="600px">
+  <v-app>
     <router-view></router-view>
-            </v-card>
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-content>
-    <Footer></Footer>
-  </div>
+  </v-app>
 </template>
 
-<script>
-import Toolbar from './components/Toolbar.vue';
-import Footer from './components/Footer.vue';
-import Dialog from './components/Dialog.vue';
-export default {
-  components: {
-    Toolbar,
-    Footer,
-    Dialog
-  }
-}
-</script>
 

resources/js/app.js

 window.Vue = require('vue');
 import Vue from 'vue';
 import Vuetify from 'vuetify';
-import VueRouter from 'vue-router';
-import Vuex from 'vuex';
 
 import App from './App.vue';
-import { routes } from './router';
-import stores from './store';
+import router from './route';
+import store from './store';
 
-Vue.use(Vuetify);
-Vue.use(VueRouter);
-Vue.use(Vuex);
-
-const router = new VueRouter({
-    routes,
-    mode: 'history'
-});
+// Vue.config.productionTip = false;
 
-const store = new Vuex.Store(stores);
+Vue.use(Vuetify);
 
 const app = new Vue({
     el: '#app',

resources/js/components/Dialog.vue

-<template>
-  <v-dialog
-    v-model="dialog"
-    width="500px"
-  >
-    <v-card>
-      <v-card-title
-        class="headline grey lighten-2"
-        primary-title
-      >
-        Privacy Policy
-      </v-card-title>
-
-      <v-card-text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </v-card-text>
-
-      <v-divider></v-divider>
-
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn
-          color="primary"
-          flat
-          @click="dialog = false"
-        >
-          I accept
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-export default {
-  computed: {
-    dialog: {
-      get () {
-        return this.$store.getters.getOpenDialog  
-      },
-      set (value) {
-        this.$store.commit('setOpenDialog', value)
-      }
-    }
-  }
-}
-</script>
-

resources/js/components/Toolbar.vue

@@ -2,9 +2,13 @@
   <v-toolbar absolute flat color="white" app>
     <v-toolbar-title>Cooperative Search</v-toolbar-title>
     <v-spacer></v-spacer>
+    <v-btn dark color="success" class="elevation-0" @click="$router.push('/employer')">สำหรับผู้ประกอบการ</v-btn>
     <v-divider inset vertical></v-divider>
-    <v-btn round small outline color="teal" @click.stop="$store.commit('setOpenDialog', true)">
-      เข้าสู่ระบบ / สมัครสมาชิก
+    <v-btn outline color="success">
+      เข้าสู่ระบบ
+    </v-btn>
+    <v-btn outline color="success" class="ml-0">
+      สมัครสมาชิก
     </v-btn>
   </v-toolbar>
 </template>
@@ -14,5 +18,3 @@ export default {
 }
 </script>
 
-<style lang="scss">
-</style>

resources/js/layouts/AppLayout.vue

+<template>
+  <div>
+    <Toolbar></Toolbar>
+    <v-content class="mt-5">
+      <v-container fluid>
+        <v-layout>
+          <v-flex xs10 offset-xs1>
+            <v-card flat height="600px">
+              <router-view></router-view>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-content>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Toolbar from '../components/Toolbar.vue';
+import Footer from '../components/Footer.vue';
+export default {
+  components: {
+    Toolbar,
+    Footer
+  }
+}
+</script>
+

resources/js/layouts/EmployerLayout.vue

+<template>
+  <router-view></router-view>
+</template>

resources/js/route.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+Vue.use(VueRouter);
+
+import AppLayout from './layouts/AppLayout.vue';
+import EmployerLayout from './layouts/EmployerLayout.vue';
+
+import Home from './views/Home.vue';
+import Login from './views/Login.vue';
+import LoginEmployer from './views/LoginEmployer.vue';
+import PageNotFound from './views/PageNotFound.vue';
+
+export default new VueRouter({
+  mode: 'history',
+  routes: [
+    {
+      path: '/employer',
+      name: 'employerLayout',
+      component: EmployerLayout,
+      children: [
+        {
+          path: 'login',
+          name: 'loginEmployer',
+          component: LoginEmployer
+        },
+        {
+          path: '*',
+          name: '404Employer',
+          component: PageNotFound
+        }
+      ]
+    },
+    {
+      path: '/',
+      name: 'appLayout',
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          name: 'Home',
+          component: Home
+        },
+        {
+          path: 'login',
+          name: 'login',
+          component: Login
+        },
+        {
+          path: '*',
+          name: 'pageNotFound',
+          component: PageNotFound
+        }
+      ]
+    }
+  ]
+})
\ No newline at end of file

resources/js/router.js

-import Home from './views/Home.vue';
-
-export const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  }
-];
\ No newline at end of file

resources/js/store.js

-export default {
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
   state: {
-    message: 'Kittisak Maneewong',
-    openDialog: false
+    message: 'Kittisak Maneewong'
   },
   mutations: {
-    setOpenDialog(state, payload) {
-      state.openDialog = payload
-    }
   },
   actions: {
 
@@ -14,9 +15,6 @@ export default {
   getters: {
     welcome (state) {
       return state.message;
-    },
-    getOpenDialog (state) {
-      return state.openDialog
     }
   }
-};
+});

resources/js/views/Login.vue

+<template>
+  <div>Login</div>
+</template>

resources/js/views/LoginEmployer.vue

+<template>
+  <div>Login Employer</div>
+</template>

resources/js/views/PageNotFound.vue

+<template>
+  <div>Page Not Found</div>
+</template>

resources/views/app.blade.php

@@ -23,7 +23,7 @@
         </style>
     </head>
     <body>
-        <v-app id="app"></v-app>
+        <div id="app"></div>
         <script src="{{ asset('js/app.js') }}"></script>
     </body>
 </html>