Upgrade to Bootstrap 5 and Mix 6

Author: superdevops233

.github/workflows/tests.yml

@@ -63,7 +63,7 @@ jobs:
         run: npm install --no-audit --no-progress --silent
 
       - name: Build client
-        run: npm run production
+        run: npm run build
 
       - name: Upgrade Chrome driver
         run: php artisan dusk:chrome-driver `/opt/google/chrome/chrome --version | cut -d " " -f3 | cut -d "." -f1`

README.md

@@ -18,7 +18,7 @@
 - Login, register, email verification and password reset
 - Authentication with JWT
 - Socialite integration
-- Bootstrap 4 + Font Awesome 5
+- Bootstrap 5 + Font Awesome 5
 
 ## Installation
 
@@ -33,17 +33,13 @@
 #### Development
 
 ```bash
-# Build and watch
-npm run watch
-
-# Serve with hot reloading (not working)
-npm run hot
+npm run dev
 ```
 
 #### Production
 
 ```bash
-npm run production
+npm run build
 ```
 
 ## Socialite

package-lock.json

@@ -1,54 +1,49 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "npm run development -- --watch",
-    "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "lint": "eslint --fix --ext .js,.vue resources/js"
+    "dev": "mix watch --hot",
+    "watch": "mix watch",
+    "build": "mix --production",
+    "eslint": "eslint --fix --ext .js,.vue resources/js"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-brands-svg-icons": "^5.15.1",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/vue-fontawesome": "^2.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@popperjs/core": "^2.9.3",
     "axios": "^0.21.1",
-    "bootstrap": "^4.5.3",
-    "jquery": "^3.5.1",
+    "bootstrap": "^5.1.0",
     "js-cookie": "^2.2.1",
-    "popper.js": "^1.16.1",
-    "sweetalert2": "^10.9.0",
-    "vform": "^1.0.1",
-    "vue": "^2.6.12",
-    "vue-i18n": "^8.22.1",
+    "sweetalert2": "^11.1.2",
+    "vform": "^2.1.1",
+    "vue": "^2.6.14",
+    "vue-i18n": "^8.25.0",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.4.8",
-    "vuex": "^3.5.1",
+    "vue-router": "^3.5.2",
+    "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/eslint-parser": "^7.12.1",
+    "@babel/core": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.12.1",
-    "cross-env": "^7.0.2",
-    "eslint": "^7.12.1",
-    "eslint-config-standard": "^16.0.1",
-    "eslint-plugin-import": "^2.22.1",
+    "@babel/preset-env": "^7.15.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.2",
-    "eslint-plugin-vue": "^7.1.0",
-    "laravel-mix": "^5.0.7",
-    "laravel-mix-versionhash": "^1.1.7",
-    "resolve-url-loader": "^3.1.2",
-    "sass": "^1.28.0",
-    "sass-loader": "^10.0.4",
-    "vue-template-compiler": "^2.6.12",
-    "webpack-bundle-analyzer": "^3.9.0"
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.16.0",
+    "laravel-mix": "^6.0.27",
+    "laravel-mix-versionhash": "^2.0.1",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.37.5",
+    "sass-loader": "^12.1.0",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.14",
+    "webpack-bundle-analyzer": "^4.4.2"
   }
 }

package.json

@@ -1,14 +1,14 @@
 <template>
-  <div class="custom-control custom-checkbox d-flex">
+  <div class="form-check">
     <input
       :id="id || name"
       :name="name"
       :checked="internalValue"
       type="checkbox"
-      class="custom-control-input"
+      class="form-check-input"
       @click="handleClick"
     >
-    <label :for="id || name" class="custom-control-label my-auto">
+    <label :for="id || name" class="form-check-label">
       <slot />
     </label>
   </div>

resources/js/components/Checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <li v-if="Object.keys(locales).length > 1" class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" role="button"
-       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
     >
       {{ locales[locale] }}
     </a>

resources/js/components/LocaleDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <button v-if="githubAuth" class="btn btn-dark ml-auto" type="button" @click="login">
+  <button v-if="githubAuth" class="btn btn-dark ms-auto" type="button" @click="login">
     {{ $t('login_with') }}
     <fa :icon="['fab', 'github']" />
   </button>

resources/js/components/LoginWithGithub.vue

@@ -5,35 +5,35 @@
         {{ appName }}
       </router-link>
 
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
         <span class="navbar-toggler-icon" />
       </button>
 
-      <div id="navbarToggler" class="collapse navbar-collapse">
+      <div id="navbar" class="collapse navbar-collapse">
         <ul class="navbar-nav">
           <locale-dropdown />
           <!-- <li class="nav-item">
             <a class="nav-link" href="#">Link</a>
           </li> -->
         </ul>
 
-        <ul class="navbar-nav ml-auto">
+        <ul class="navbar-nav ms-auto">
           <!-- Authenticated -->
           <li v-if="user" class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
-               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+               href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
             >
-              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
+              <img :src="user.photo_url" class="rounded-circle profile-photo me-1">
               {{ user.name }}
             </a>
             <div class="dropdown-menu">
-              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
+              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item ps-3">
                 <fa icon="cog" fixed-width />
                 {{ $t('settings') }}
               </router-link>
 
               <div class="dropdown-divider" />
-              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
+              <a href="#" class="dropdown-item ps-3" @click.prevent="logout">
                 <fa icon="sign-out-alt" fixed-width />
                 {{ $t('logout') }}
               </a>
@@ -93,4 +93,8 @@ export default {
   height: 2rem;
   margin: -.375rem 0;
 }
+
+.container {
+  max-width: 1100px;
+}
 </style>

resources/js/components/Navbar.vue

@@ -1,9 +1,9 @@
 import Vue from 'vue'
-import Card from './Card'
-import Child from './Child'
-import Button from './Button'
-import Checkbox from './Checkbox'
-import { HasError, AlertError, AlertSuccess } from 'vform'
+import Card from './Card.vue'
+import Child from './Child.vue'
+import Button from './Button.vue'
+import Checkbox from './Checkbox.vue'
+import { HasError, AlertError, AlertSuccess } from 'vform/components/bootstrap5'
 
 // Components that are registered globaly.
 [

resources/js/components/index.js

@@ -2,7 +2,7 @@
   <div class="main-layout">
     <navbar />
 
-    <div class="container mt-4">
+    <div class="container-lg mt-4">
       <child />
     </div>
   </div>