generate Auth scaffoldind and install npm packages

Author: allvee

app/Http/Controllers/HomeController.php

@@ -19,7 +19,7 @@ public function __construct()
     /**
      * Show the application dashboard.
      *
-     * @return \Illuminate\Http\Response
+     * @return \Illuminate\Contracts\Support\Renderable
      */
     public function index()
     {

composer.json

@@ -20,6 +20,7 @@
         "barryvdh/laravel-debugbar": "^3.2",
         "facade/ignition": "^1.4",
         "fzaninotto/faker": "^1.4",
+        "laravel/ui": "^1.1",
         "mockery/mockery": "^1.0",
         "nunomaduro/collision": "^3.0",
         "phpunit/phpunit": "^8.0"

composer.lock

@@ -14,17 +14,17 @@
         "@fortawesome/free-solid-svg-icons": "^5.11.2",
         "autosize": "^4.0.2",
         "axios": "^0.19",
-        "bootstrap": "^4.3.1",
+        "bootstrap": "^4.0.0",
         "cross-env": "^5.2.1",
-        "jquery": "^3.4.1",
+        "jquery": "^3.2",
         "laravel-mix": "^4.1.4",
         "lodash": "^4.17.15",
         "markdown-it": "^8.4.2",
         "markdown-it-prism": "^2.0.3",
-        "popper.js": "^1.15.0",
+        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
-        "sass": "^1.23.0",
-        "sass-loader": "^7.3.1",
+        "sass": "^1.20.1",
+        "sass-loader": "7.*",
         "vue": "^2.5.17",
         "vue-izitoast": "^1.2.1",
         "vue-template-compiler": "^2.6.10"

package.json

@@ -1,29 +1,32 @@
-
 /**
  * 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');
-require('./fontawesome');
 
 window.Vue = require('vue');
 
-import VueIziToast from 'vue-izitoast';
-import 'izitoast/dist/css/iziToast.min.css';
-import Authorization from './authorization/authorize';
+/**
+ * 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))
 
-Vue.use(VueIziToast);
-Vue.use(Authorization);
+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.
  */
-Vue.component('question-page', require('./pages/QuestionPage.vue').default);
 
 const app = new Vue({
-    el: '#app'
+    el: '#app',
 });

resources/js/app.js

@@ -1,4 +1,3 @@
-
 window._ = require('lodash');
 
 /**
@@ -24,27 +23,13 @@ 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'
+// import Echo from 'laravel-echo';
 
 // window.Pusher = require('pusher-js');
 

resources/js/bootstrap.js

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">Example Component</div>
+
+                    <div class="card-body">
+                        I'm an example component.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

resources/js/components/ExampleComponent.vue

@@ -1,11 +1,19 @@
-$color-white: #fff;
-
 // Body
-$body-bg: $color-white;
+$body-bg: #f8fafc;
 
 // Typography
-$font-family-sans-serif: "Raleway", sans-serif;
+$font-family-sans-serif: 'Nunito', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
-$color-green: rgb(95, 187, 126);
+// Colors
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;

resources/sass/_variables.scss

@@ -1,108 +1,8 @@
-
 // Fonts
-@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
+@import url('https://fonts.googleapis.com/css?family=Nunito');
 
 // Variables
-@import "variables";
+@import 'variables';
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
-
-body {
-  background: #f5f8fa;
-}
-
-.navbar-laravel {
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-}
-
-.counters {
-  margin-right: 30px;
-  font-size: 10px;
-  text-align: center;
-
-  strong {
-    display: block;
-    font-size: 2em;
-  }
-
-  .vote, .answer {
-    width: 60px;
-    height: 60px;    
-  }
-
-  .status {
-    &.unanswered {
-      border: none;
-    }
-
-    &.answered {
-      border: 1px solid $color-green;
-      color: $color-green;
-    }
-
-    &.answered-accepted {
-      background: $color-green;
-      color: $color-white;
-    }
-  }
-
-  .view {
-    margin-top: 10px;
-  }
-}
-
-form.form-delete {
-  display: inline;
-}
-
-.vote-controls {
-  min-width: 60px;
-  margin-right: 30px;
-  text-align: center;
-  color: $gray-700;
-
-  span, a {
-    display: block;
-  }
-
-  span {
-    &.votes-count {
-      font-size:25px;
-    }
-    &.favorites-count {
-      font-size:12px;
-    }
-  }
-
-  a {
-    cursor: pointer;
-    color: $gray-600;
-
-    &.off, &.off:hover {
-      color: $gray-500;
-    }    
-
-    &.favorite {
-      &.favorited, &.favorited:hover {
-        color: $warning;
-      }
-    }
-
-    &.vote-accepted {
-      color: $green;
-    }
-  }  
-}
-
-.post {
-  padding: 20px 0;
-  &:not(:last-child) {
-    border-bottom: 1px solid rgba($black, .1);
-  }
-}
-
-[v-cloak] {
-  display: none;
-}