Gets working SPA homepage.

app/Http/Controllers/SinglePageController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class SinglePageController extends Controller
+{
+    public function index() {
+        return view("landing");
+    }
+}

package-lock.json

@@ -9446,6 +9446,11 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
+        "vue-router": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+            "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
+        },
         "vue-style-loader": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -27,6 +27,7 @@
         "@fortawesome/fontawesome-free": "^5.12.1",
         "clipboard": "^2.0.4",
         "laravel-echo": "^1.6.1",
-        "pusher-js": "^5.0.3"
+        "pusher-js": "^5.0.3",
+        "vue-router": "^3.1.6"
     }
 }

resources/js/app.js

@@ -9,41 +9,30 @@ require('./bootstrap');
 window.Clipboard = require('clipboard');
 require('./notify.min.js');
 
-window.Vue = require('vue');
+import Vue from 'vue'
+import VueRouter from 'vue-router'
 
-/**
- * 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>
- */
+Vue.use(VueRouter)
 
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-Vue.component('woinfo', require('./components/woinfo.vue').default);
-Vue.component('assetinfo', require('./components/assetinfo.vue').default);
-Vue.component('credential', require('./components/credential.vue').default);
-Vue.component('notes', require('./components/notes.vue').default);
-Vue.component('modal', require('./components/modal.vue').default);
-Vue.component('woinfo-edit-modal', require('./components/woinfo-edit-modal.vue').default);
-Vue.component('errorlist', require('./components/errorlist.vue').default);
-Vue.component('credential-form-modal', require('./components/credential-form-modal.vue').default);
-Vue.component('autocomplete-custom-dropdown', require('./components/autocomplete-custom-dropdown.vue').default);
-Vue.component('credential-list', require('./components/credential-list.vue').default);
-Vue.component('note-form-modal', require('./components/note-form-modal.vue').default);
+import App from './views/App'
+import Welcome from './views/Welcome'
 
-/**
- * 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({
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: Welcome
+        },
+    ],
+})
 
 const app = new Vue({
     el: '#app',
-});
+    components: { App },
+    router,
+})
 
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()

resources/js/views/App.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <nav class="navbar navbar-expand navbar-dark bg-primary text-light shadow-sm">
+            <div class="container-fluid">
+                <router-link :to="{name: 'home'}" class="navbar-brand">
+                    UPCCRT
+                </router-link>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <!-- Left Side Of Navbar -->
+                    <ul class="navbar-nav mr-auto text-center">
+                        <li class="nav-item">
+                            <a href="#" class="nav-link"><i class="fas fa-sign-in-alt"></i> <span class="d-none d-sm-block d-md-inline">Check-In</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link"><i class="fas fa-sign-out-alt"></i> <span class="d-none d-sm-block d-md-inline">Check-Out</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link"><i class="fas fa-tachometer-alt"></i> <span class="d-none d-sm-block d-md-inline">Dashboard</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link"><i class="fas fa-chart-bar"></i> <span class="d-none d-sm-block d-md-inline">Reports</span></a>
+                        </li>
+                    </ul>
+
+                    <!-- Right Side Of Navbar -->
+                    <ul class="navbar-nav ml-auto">
+                        <!-- Authentication Links -->
+                        <!-- @guest
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
+                            </li>
+                            @if (Route::has('register'))
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
+                                </li>
+                            @endif
+                        @else
+                            <li class="nav-item dropdown">
+                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
+                                    {{ Auth::user()->username }} <span class="caret"></span>
+                                </a>
+
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                                    <a class="dropdown-item" href="{{ route('logout') }}"
+                                       onclick="event.preventDefault();
+                                                     document.getElementById('logout-form').submit();">
+                                        {{ __('Logout') }}
+                                    </a>
+
+                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                                        @csrf
+                                    </form>
+                                </div>
+                            </li>
+                        @endguest -->
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <main class="py-4">
+            <router-view></router-view>
+        </main>
+    </div>
+</template>
+<script>
+export default {
+    
+}
+</script>

resources/js/views/Welcome.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="flex-center position-ref full-height">
+        <div class="content">
+            <div  class="m-b-md">
+                <h2 class="title m-b-md">
+                    UPCCRT
+                </h2>
+                <h3>
+                    University PC Care Repair Tracker
+                </h3>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+    .full-height {
+        height: 100vh;
+    }
+    .flex-center {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    }
+    .position-ref {
+        position: relative;
+    }
+    .top-right {
+        position: absolute;
+        right: 10px;
+        top: 18px;
+    }
+    .content {
+        text-align: center;
+    }
+    .title {
+        font-size: 60px;
+    }
+    .links > a {
+        color: #636b6f;
+        padding: 0 25px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: .1rem;
+        text-decoration: none;
+        text-transform: uppercase;
+    }
+    .m-b-md {
+        margin-bottom: 30px;
+        color: #000000;
+    }
+</style>
+<script>
+export default {}
+</script>

resources/views/landing.blade.php

@@ -0,0 +1,5 @@
+@extends('layouts.app')
+
+@section('content')
+    <app></app>
+@endsection

resources/views/layouts/app.blade.php

@@ -21,71 +21,7 @@
 </head>
 <body>
     <div id="app">
-        <nav class="navbar navbar-expand navbar-dark bg-primary text-light shadow-sm">
-            <div class="container-fluid">
-                <a class="navbar-brand" href="{{ url('/') }}">
-                    {{ config('app.name', 'Laravel') }}
-                </a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <!-- Left Side Of Navbar -->
-                    <ul class="navbar-nav mr-auto text-center">
-                        <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-sign-in-alt"></i> <span class="d-none d-sm-block d-md-inline">Check-In</span></a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-sign-out-alt"></i> <span class="d-none d-sm-block d-md-inline">Check-Out</span></a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-tachometer-alt"></i> <span class="d-none d-sm-block d-md-inline">Dashboard</span></a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-chart-bar"></i> <span class="d-none d-sm-block d-md-inline">Reports</span></a>
-                        </li>
-                    </ul>
-
-                    <!-- Right Side Of Navbar -->
-                    <ul class="navbar-nav ml-auto">
-                        <!-- Authentication Links -->
-                        @guest
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
-                            </li>
-                            @if (Route::has('register'))
-                                <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
-                                </li>
-                            @endif
-                        @else
-                            <li class="nav-item dropdown">
-                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                                    {{ Auth::user()->username }} <span class="caret"></span>
-                                </a>
-
-                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                                    <a class="dropdown-item" href="{{ route('logout') }}"
-                                       onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
-                                        {{ __('Logout') }}
-                                    </a>
-
-                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                                        @csrf
-                                    </form>
-                                </div>
-                            </li>
-                        @endguest
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-        <main class="py-4">
-            @yield('content')
-        </main>
+        @yield('content')
     </div>
 </body>
 </html>

routes/web.php

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