update to vite

.gitignore

@@ -1,8 +1,7 @@
 /node_modules
 /public/hot
 /public/storage
-public/css/*
-public/js/*
+public/build/*
 public/fonts/vendor/*
 /storage/*.key
 /vendor

README.md

@@ -14,7 +14,7 @@ In the instructions where we use `docker exec`, we assume your container is name
 If you don't want to use Docker, you need:
 - An environment that can host PHP websites, such as Apache, Ngnix or similar.
 - MySQL database to store data.
-- Comply with [Laravel 10 Requirements](https://laravel.com/docs/10.x/deployment)
+- Comply with [Laravel 11 Requirements](https://laravel.com/docs/11.x/deployment)
 - Manually build the composer, npm and setting up cron jobs and clearing all caches on updates.
 
 ## Setup and install

resources/js/app.js

@@ -1,30 +1,21 @@
-require('./bootstrap');
-
-import Vue from 'vue';
+import * as bootstrap from 'bootstrap'
 import moment from 'moment';
-import VueMoment from 'vue-moment';
-
+import { createApp } from 'vue';
+import AuthorizedClients from './components/passport/AuthorizedClients.vue';
+import Clients from './components/passport/Clients.vue';
+import PersonalAccessTokens from './components/passport/PersonalAccessTokens.vue';
+import axios from 'axios';
+
+window.axios = axios;
+window.bootstrap = bootstrap;
 window.moment = moment;
-window.Vue = Vue;
-
-
-Vue.use(VueMoment, {moment});
+window.createApp = createApp;
 
-Vue.component(
-    'passport-clients',
-    require('./components/passport/Clients.vue').default
-);
 
-Vue.component(
-    'passport-authorized-clients',
-    require('./components/passport/AuthorizedClients.vue').default
-);
+const app = createApp({});
 
-Vue.component(
-    'passport-personal-access-tokens',
-    require('./components/passport/PersonalAccessTokens.vue').default
-);
+app.component('passport-authorized-clients', AuthorizedClients);
+app.component('passport-clients', Clients);
+app.component('passport-personal-access-tokens', PersonalAccessTokens);
 
-const app = new Vue({
-    el: '#app'
-});
+app.mount('#app');

resources/sass/app.scss

@@ -13,19 +13,25 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 
 html,body {
     height: 100%;
-    color: #011328;
 }
 
 h1{
 	font-size: 2.5rem;
+	color: #011328;
 }
 
 h2{
 	font-size: 1.5rem;
+	color: #011328;
+}
+
+i{
+	margin-left: 0.25rem;
 }
 
 p, .pp-bullet {
 	font-size: 0.9rem;
+	color: #011328;
 
 	a {
 		color: $primary !important;

resources/views/layouts/app.blade.php

@@ -9,12 +9,9 @@
 
     <title>{{ config('app.name', 'Handover') }}</title>
 
-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
-
     <!-- Styles -->
     <link rel="icon" href="{{ URL::asset('/favicon.ico') }}" type="image/x-icon"/>
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
 
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

vite.config.js

@@ -42,5 +42,8 @@ export default ({ mode }) => {
                 '@': '/resources/js',
             },
         },
+        server: {
+            host: '127.0.0.1',
+        }
     });
 }