Update Preset

app/Http/Controllers/AppController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class AppController extends Controller
+{
+    public function index() {
+        return view('app');
+    }
+}

package-lock.json

@@ -1543,12 +1543,6 @@
             "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
             "dev": true
         },
-        "bootstrap": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
-            "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==",
-            "dev": true
-        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5082,12 +5076,6 @@
             "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
             "dev": true
         },
-        "jquery": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-            "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
-            "dev": true
-        },
         "js-levenshtein": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -6304,12 +6292,6 @@
                 "find-up": "^3.0.0"
             }
         },
-        "popper.js": {
-            "version": "1.14.7",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
-            "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==",
-            "dev": true
-        },
         "portfinder": {
             "version": "1.0.20",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -8671,6 +8653,11 @@
             "integrity": "sha512-1wFuMUIM16MDJRCrpbpuEPTUGmM5QMUg0cr3KFwra2XgOgFcPGDQHDh3CszSCD2Zewc/dh/pamNEW8CbfDebUw==",
             "dev": true
         },
+        "validate.js": {
+            "version": "0.12.0",
+            "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.12.0.tgz",
+            "integrity": "sha512-/x2RJSvbqEyxKj0RPN4xaRquK+EggjeVXiDDEyrJzsJogjtiZ9ov7lj/svVb4DM5Q5braQF4cooAryQbUwOxlA=="
+        },
         "vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -8717,6 +8704,11 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
+        "vue-router": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
+            "integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg=="
+        },
         "vue-style-loader": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -8743,6 +8735,16 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
+        "vuetify": {
+            "version": "1.5.7",
+            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.7.tgz",
+            "integrity": "sha512-e7Vvj9gh41Pth7pXJxH1hrm8wfnvWt3nvxPCnwBWTgr4kiUXTG4CaUBqWVVgyfLjJGJSyR1y1EoRNEP5tJv0HQ=="
+        },
+        "vuex": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+            "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+        },
         "watchpack": {
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -11,16 +11,19 @@
     },
     "devDependencies": {
         "axios": "^0.18",
-        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
-        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.5",
-        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
         "vue": "^2.5.17",
         "vue-template-compiler": "^2.6.10"
+    },
+    "dependencies": {
+        "validate.js": "^0.12.0",
+        "vue-router": "^3.0.2",
+        "vuetify": "^1.5.7",
+        "vuex": "^3.1.0"
     }
 }

resources/js/App.vue

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

resources/js/app.js

-
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-
 window.Vue = require('vue');
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i);
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
-
+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';
+
+Vue.use(Vuetify);
+Vue.use(VueRouter);
+Vue.use(Vuex);
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
 
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
+const router = new VueRouter({
+    routes,
+    mode: 'history'
+});
+
+const store = new Vuex.Store(stores);
 
 const app = new Vue({
-    el: '#app'
+    el: '#app',
+    router,
+    store,
+    render: h => h(App)
 });

resources/js/bootstrap.js

-
-window._ = require('lodash');
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.Popper = require('popper.js').default;
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
-
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Next we will register the CSRF Token as a common header with Axios so that
- * all outgoing HTTP requests automatically have it attached. This is just
- * a simple convenience so we don't have to attach every token manually.
- */
-
-let token = document.head.querySelector('meta[name="csrf-token"]');
-
-if (token) {
-    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
-} else {
-    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
-}
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo'
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });

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 {
+  state: {
+    message: 'Kittisak Maneewong'
+  },
+  mutations: {
+  },
+  actions: {
+
+  },
+  getters: {
+    welcome (state) {
+      return state.message;
+    }
+  }
+};

resources/js/views/Home.vue

+<template>
+  <div>
+    Home, {{ welcome }}
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    welcome () {
+      return this.$store.getters.welcome;
+    }
+  }
+}
+</script>
+

resources/sass/_variables.scss

-
-// Body
-$body-bg: #f8fafc;
-
-// Typography
-$font-family-sans-serif: "Nunito", sans-serif;
-$font-size-base: 0.9rem;
-$line-height-base: 1.6;
-
-// Colors
-$blue: #3490dc;
-$indigo: #6574cd;
-$purple: #9561e2;
-$pink: #f66D9b;
-$red: #e3342f;
-$orange: #f6993f;
-$yellow: #ffed4a;
-$green: #38c172;
-$teal: #4dc0b5;
-$cyan: #6cb2eb;

resources/sass/app.scss

 
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons');
 
-// Variables
-@import 'variables';
-
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';
-
-.navbar-laravel {
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-}
+// Vuetify
+@import '~vuetify/dist/vuetify.min.css';

resources/views/welcome.blade.php → resources/views/app.blade.php

@@ -5,10 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>Laravel</title>
+        <title>CO-OP Search</title>
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
+        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 
         <!-- Styles -->
         <style>
@@ -81,9 +82,8 @@
             @endif
 
             <div class="content" id="app">
-                <example-component></example-component>
             </div>
         </div>
-        <script src="/js/app.js"></script>
+        <script src="{{ asset('js/app.js') }}"></script>
     </body>
 </html>

routes/web.php

@@ -11,6 +11,4 @@
 |
 */
 
-Route::get('/', function () {
-    return view('welcome');
-});
+Route::get('/{any}', 'AppController@index')->where('any', '.*');