remove mix; add vite

Signed-off-by: envoyr <hello@envoyr.com>

.gitignore

@@ -22,8 +22,5 @@ fonts/
 templates/*
 !templates/index.html
 !templates/Froxlor/
-templates/Froxlor/assets/mix-manifest.json
+templates/Froxlor/build/
-templates/Froxlor/assets/css/
-templates/Froxlor/assets/js/
-templates/Froxlor/assets/webfonts/
 !templates/misc/

lib/Froxlor/UI/Panel/FroxlorTwig.php

@@ -92,6 +92,10 @@ class FroxlorTwig extends AbstractExtension
 			new TwigFunction('mix', [
 				$this,
 				'getMix'
+			]),
+			new TwigFunction('vite', [
+				$this,
+				'getVite'
 			])
 		];
 	}
@@ -167,4 +171,9 @@ class FroxlorTwig extends AbstractExtension
 	{
 		return mix($mix);
 	}
+
+	public function getVite($basehref = '', $vite = [], $defaults = [])
+	{
+		return vite($basehref, $vite ?? $defaults);
+	}
 }

lib/functions.php

@@ -74,6 +74,7 @@ function old(string $identifier, string $default = null, string $session = null)
  * This file contains the hashed filenames of the assets.
  * It must be always placed in the theme assets folder.
  *
+ * @deprecated since 2.1.x no longer in use
  * @param $filename
  * @return mixed|string
  */
@@ -91,3 +92,45 @@ function mix($filename)
 	}
 	return $filename;
 }
+
+/**
+ * Loading the vite manifest file from given theme.
+ * This file contains the hashed filenames of the assets.
+ * It must be always placed in the theme assets folder.
+ *
+ * @param string|null $basehref
+ * @param array $filenames
+ * @return string
+ * @throws Exception
+ */
+function vite($basehref, array $filenames): string
+{
+	// Get the hashed filenames from the manifest file
+	$links = [];
+	foreach ($filenames as $filename) {
+		if (preg_match("/templates\/([^\/]+)(.*)/", $filename, $matches)) {
+			$assetDirectory = '/templates/' . $matches[1] . '/build/';
+			$viteManifest = dirname(__DIR__) . $assetDirectory . '/manifest.json';
+			$manifest = json_decode(file_get_contents($viteManifest), true);
+			$links[] = $basehref . ltrim($assetDirectory, '/') . $manifest[$filename]['file'];
+		} else {
+			$links = $filenames;
+		}
+	}
+
+	// Update the links to the correct html tags
+	foreach ($links as $key => $link) {
+		switch (pathinfo($link, PATHINFO_EXTENSION)) {
+			case 'css':
+				$links[$key] = '<link rel="stylesheet" href="'. $link . '">';
+				break;
+			case 'js':
+				$links[$key] = '<script src="' . $link . '" type="module"></script>';
+				break;
+			default:
+				throw new Exception('Unknown file extension for file '. $link .' from manifest.json');
+		}
+	}
+
+	return implode("\n", $links);
+}

lib/init.php

@@ -281,29 +281,21 @@ if (AREA == 'admin' || AREA == 'customer') {
 }
 UI::twig()->addGlobal('nav_entries', $navigation);
 
-$js = "";
+$theme_assets = [];
-$css = "";
+foreach (['css', 'js'] as $asset) {
-if (is_array($_themeoptions) && array_key_exists('js', $_themeoptions['variants'][$themevariant])) {
+	if (is_array($_themeoptions) && array_key_exists($asset, $_themeoptions['variants'][$themevariant])) {
-	if (is_array($_themeoptions['variants'][$themevariant]['js'])) {
+		if (is_array($_themeoptions['variants'][$themevariant][$asset])) {
-		foreach ($_themeoptions['variants'][$themevariant]['js'] as $jsfile) {
+			foreach ($_themeoptions['variants'][$themevariant][$asset] as $assetfile) {
-			if (file_exists('templates/' . $theme . '/assets/js/' . $jsfile)) {
+				if (file_exists('templates/' . $theme . '/' . $assetfile)) {
-				$js .= '<script type="text/javascript" src="' . mix('templates/' . $theme . '/assets/js/' . $jsfile) . '"></script>' . "\n";
+					$theme_assets[] .= 'templates/' . $theme . '/' . $assetfile;
-			}
+				}
-		}
-	}
-	if (is_array($_themeoptions['variants'][$themevariant]['css'])) {
-		foreach ($_themeoptions['variants'][$themevariant]['css'] as $cssfile) {
-			if (file_exists('templates/' . $theme . '/assets/css/' . $cssfile)) {
-				$css .= '<link href="' . mix('templates/' . $theme . '/assets/css/' . $cssfile) . '" rel="stylesheet" type="text/css" />' . "\n";
 			}
 		}
 	}
 }
 
-UI::twig()->addGlobal('theme_js', $js);
+UI::twig()->addGlobal('theme_assets', $theme_assets);
-UI::twig()->addGlobal('theme_css', $css);
+unset($theme_assets);
-unset($js);
-unset($css);
 
 $action = Request::any('action');
 $page = Request::any('page', 'overview');

lng/ca.lng.php

@@ -2324,7 +2324,7 @@ Atentament, el vostre administrador'
 		]
 	],
 	'install' => [
-		'slogal' => 'Panell de gestió del servidor froxlor',
+		'slogan' => 'Panell de gestió del servidor froxlor',
 		'preflight' => 'Comprovació del sistema',
 		'critical_error' => 'Error crític',
 		'suggestions' => 'No requerit però recomanat',

lng/en.lng.php

@@ -2357,7 +2357,7 @@ Yours sincerely, your administrator',
 		],
 	],
 	'install' => [
-		'slogal' => 'froxlor Server Management Panel',
+		'slogan' => 'froxlor Server Management Panel',
 		'preflight' => 'System check',
 		'critical_error' => 'Critical error',
 		'suggestions' => 'Not required but recommended',

lng/es.lng.php

@@ -2304,7 +2304,7 @@ Atentamente, su administrador'
 		]
 	],
 	'install' => [
-		'slogal' => 'Panel de gestión del servidor froxlor',
+		'slogan' => 'Panel de gestión del servidor froxlor',
 		'preflight' => 'Comprobación del sistema',
 		'critical_error' => 'Error crítico',
 		'suggestions' => 'No requerido pero recomendado',

package.json

@@ -1,20 +1,25 @@
 {
-	"name": "froxlor",
 	"private": true,
 	"scripts": {
-		"dev": "mix watch",
+		"dev": "vite",
-		"build": "mix --production"
+		"build": "vite build"
 	},
 	"devDependencies": {
-		"@fortawesome/fontawesome-free": "^6.2.0",
+		"@fortawesome/fontawesome-free": "^6.4.2",
-		"@popperjs/core": "^2.11.6",
+		"@popperjs/core": "^2.11.8",
-		"bootstrap": "^5.2.1",
+		"@vitejs/plugin-vue": "^4.0.0",
-		"chart.js": "^3.9.1",
+		"axios": "^1.1.2",
+		"bootstrap": "^5.3.2",
+		"chart.js": "^4.4.0",
 		"jquery": "^3.6.1",
-		"jquery-validation": "^1.19.5",
+		"jquery-validation": "^1.20.0",
-		"laravel-mix": "^6.0.42",
+		"laravel-vite-plugin": "^0.8.0",
+		"lodash": "^4.17.19",
+		"postcss": "^8.1.14",
 		"resolve-url-loader": "^5.0.0",
-		"sass": "^1.49.7",
+		"sass": "^1.69.3",
-		"sass-loader": "^12.5.0"
+		"vite": "^4.0.0",
+		"vite-require": "^0.2.3",
+		"vue": "^3.2.37"
 	}
 }

templates/Froxlor/assets/js/app.js

@@ -0,0 +1,33 @@
+import '@fortawesome/fontawesome-free';
+
+import jQuery from 'jquery';
+window.$ = jQuery;
+
+import 'jquery-validation';
+import 'bootstrap';
+import 'chart.js/auto';
+
+// Axios
+import axios from 'axios';
+window.axios = axios;
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+// Vue
+import { createApp } from 'vue';
+const app = createApp({});
+
+// import ExampleComponent from './components/ExampleComponent.vue';
+// app.component('example-component', ExampleComponent);
+//
+// or
+//
+// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
+//     app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
+// });
+
+app.mount('#app');
+
+// Load jquery components
+Object.entries(import.meta.glob('./jquery/*.js', { eager: true })).forEach(([path, definition]) => {
+	definition.default();
+});

templates/Froxlor/assets/js/jquery/apikeys.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 
 	var timer, delay = 500;
 	$('div[data-action="apikeys"] #allowed_from').on('keyup change', function () {
@@ -57,4 +57,4 @@ $(function () {
 		}, delay);
 	});
 
-});
+}

templates/Froxlor/assets/js/jquery/configfiles.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 	/*
 	 * config files - select all recommended
 	 */
@@ -49,4 +49,4 @@ $(function () {
 		});
 
 	});
-});
+}

templates/Froxlor/assets/js/jquery/customer.js

@@ -1,4 +1,4 @@
-$(function() {
+export default function() {
 
 	// Make inputs with enabled unlimited checked disabled
 	$("input[name$='_ul']").each(function () {
@@ -73,4 +73,4 @@ $(function() {
 			});
 		}
 	});
-});
+}

templates/Froxlor/assets/js/jquery/dnseditor.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 
 	// Display helptext to content box according to dns-record type selected
 	$("select[name='dns_type']").on('change', function () {
@@ -16,4 +16,4 @@ $(function () {
 			}
 		});
 	});
-});
+}

templates/Froxlor/assets/js/jquery/domains.js

@@ -1,5 +1,7 @@
-$(function () {
+export default function() {
-
+	/*
+	 * domains
+	 */
 	// disable unusable php-configuration by customer settings
 	$('#customerid').on('change', function () {
 		var cid = $(this).val();
@@ -104,4 +106,4 @@ $(function () {
 			$('#section_bssl>.formfields>.row').not(":first").addClass("d-none");
 		}
 	})
-});
+}

templates/Froxlor/assets/js/jquery/global.js

@@ -1,5 +1,7 @@
-$(function () {
+export default function() {
-
+	/*
+	 * global
+	 */
 	$('#historyback').on('click', function (e) {
 		e.preventDefault();
 		history.back(1);
@@ -9,4 +11,4 @@ $(function () {
 		e.preventDefault();
 		navigator.clipboard.writeText($('#ccSysInfo').text().trim());
 	})
-});
+}

templates/Froxlor/assets/js/jquery/install.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 	/*
 	 * switch between basic and advanced install mode
 	 */
@@ -59,4 +59,4 @@ $(function () {
 		cTimer = setInterval(checkConfigState, 1000);
 	}
 
-});
+}

templates/Froxlor/assets/js/jquery/ipsandports.js

@@ -1,6 +1,7 @@
-$(function() {
+export default function() {
-
+	/*
-	// check for internal ip and output a notice if private-range ip is given
+	 * ipsandports - check for internal ip and output a notice if private-range ip is given
+	 */
 	$('#ip').on('change', function () {
 		var ipval = $(this).val();
 		if (ipval.length > 0) {
@@ -26,4 +27,4 @@ $(function() {
 		}
 	});
 
-});
+}

templates/Froxlor/assets/js/jquery/newsfeed.js

@@ -1,4 +1,4 @@
-$(function() {
+export default function() {
 	/*
 	 * newsfeed
 	 */
@@ -21,4 +21,4 @@ $(function() {
 			}
 		});
 	}
-});
+}

templates/Froxlor/assets/js/jquery/search.js

@@ -1,4 +1,7 @@
-$(function() {
+export default function() {
+	/*
+	 * search
+	 */
 	let search = $('#search')
 
 	search.on('submit', function (e) {
@@ -53,4 +56,4 @@ $(function() {
 			}
 		});
 	});
-});
+}

templates/Froxlor/assets/js/jquery/tablecolumns.js

@@ -1,4 +1,4 @@
-$(function () {
+export default function() {
 	/*
 	 * table columns - manage columns modal
 	 */
@@ -41,4 +41,4 @@ $(function () {
 	$('.manageColumnsModal form button[data-action="unselect-all"]').on('click', function () {
 		$(this).parents('form:first').find('input:checkbox').prop('checked', false);
 	});
-});
+}

templates/Froxlor/assets/js/jquery/traffic.js

@@ -1,9 +1,10 @@
-$(function () {
+export default function() {
-
+	/*
-	// Display helptext to content box according to dns-record type selected
+	 * traffic - display helptext to content box according to dns-record type selected
+	 */
 	$("select[name='range']").on('change', function () {
 		var selVal = $(this).val();
 		var baseRef = $(this).data('baseref');
 		window.location.href = baseRef + '?range=' + selVal;
 	});
-});
+}

templates/Froxlor/assets/js/jquery/updatecheck.js

@@ -1,4 +1,4 @@
-$(function() {
+export default function() {
 	/*
 	 * updatecheck
 	 */
@@ -18,4 +18,4 @@ $(function() {
 			}
 		});
 	}
-});
+}

templates/Froxlor/assets/js/jquery/validation.js

@@ -1,4 +1,7 @@
-$(document).ready(function () {
+export default function() {
+	/*
+	 * validation
+	 */
 	$('#customer_add,#customer_edit').each(function () {
 		$(this).validate({
 			rules: {
@@ -34,4 +37,4 @@ $(document).ready(function () {
 			}
 		});
 	});
-});
+}

templates/Froxlor/assets/scss/_variables-dark.scss

@@ -0,0 +1,65 @@
+// Color
+//$primary: $froxlor-700;
+//$secondary: $gray-500;
+//$info: $froxlor-800;
+
+// Body
+//$body-bg: $gray-900;
+//$body-color: $gray-100;
+
+// Borders
+//$border-color: $gray-900;
+//$border-color-translucent: $gray-900;
+
+// Link
+//$link-color: $froxlor-500;
+//$nav-link-color: $body-color;
+
+// List groups
+//$list-group-bg: $gray-800;
+//$list-group-color: $body-color;
+//$list-group-hover-bg: $gray-700;
+//$list-group-action-color: $body-color;
+
+// Navbar
+//$navbar-bg: $gray-800;
+//$navbar-bg-mobile: $navbar-bg;
+//$navbar-light-color: $gray-200;
+//$navbar-light-hover-color: $gray-500;
+//$navbar-light-active-color: $gray-500;
+
+// Sidebar
+//$sidebar-width: 256px;
+
+// Card
+//$card-bg: $gray-800;
+//$card-border-color: $gray-600;
+
+// Heading
+//$heading-bg: $gray-800;
+//$heading-color: $body-color;
+//$heading-border-color: rgba(0,0,0,0.15);
+
+// Dropdown
+//$dropdown-bg: $gray-800;
+//$dropdown-color: $gray-100;
+//$dropdown-link-color: $gray-100;
+//$dropdown-link-hover-bg: $gray-900;
+
+// Modal
+//$modal-content-bg: $gray-800;
+
+// Form control
+//$input-bg: $gray-900;
+//$input-border-color: $black;
+//$input-group-addon-bg: $gray-800;
+
+// Progress bar
+//$progress-bg: $gray-900;
+
+// Search
+//$search-bg: $gray-800;
+
+// Popover
+//$popover-bg: $gray-800;
+//$popover-body-color: $gray-100;

templates/Froxlor/assets/scss/_variables.scss

@@ -73,6 +73,7 @@ $navbar-bg-mobile: $gray-900;
 $sidebar-width: 256px;
 
 // Card
+$card-bg: $white;
 $card-cap-bg: none;
 $card-cap-padding-y: $spacer;
 $card-border-width: 0;

templates/Froxlor/assets/scss/app.scss

@@ -1,8 +1,9 @@
 @charset "UTF-8";
 
 // Bootstrap
-@import "variables/main";
+@import "variables";
-@import "~bootstrap/scss/bootstrap";
+@import "variables-dark";
+@import "bootstrap/scss/bootstrap";
 
 // Theme
 @import "components/generic";

templates/Froxlor/assets/scss/components/_card.scss

@@ -22,3 +22,9 @@
 		}
 	}
 }
+
+@include color-mode(dark) {
+	.card, .list-group-item {
+		background: $dark-bg;
+	}
+}

templates/Froxlor/assets/scss/components/_generic.scss

@@ -1,6 +1,6 @@
 // Fontawesome
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/css/all";
+@import "@fortawesome/fontawesome-free/css/all";
 
 // Generic
 .header-logo {

templates/Froxlor/assets/scss/components/_heading.scss

@@ -8,6 +8,8 @@
 	color: $heading-color;
 }
 
-.heading span {
+@include color-mode(dark) {
-
+	.heading {
+		background: $dark-bg;
+	}
 }

templates/Froxlor/base.html.twig

@@ -9,24 +9,15 @@
 	<link rel="icon" type="image/x-icon" href="{{ basehref|default('') }}templates/Froxlor/assets/img/icon.png">
 	{% if csrf_token %}<meta name="csrf-token" content="{{ csrf_token }}" />{% endif %}
 
-	<!-- CSS -->
+	<!-- Assets  -->
-	{% if theme_css is empty %}
+	{{ vite(basehref, theme_assets, [
-		<link href="{{ basehref|default('') }}{{ mix('templates/Froxlor/assets/css/main.css') }}" rel="stylesheet" type="text/css" />
+		'templates/Froxlor/assets/scss/app.scss',
-	{% else %}
+		'templates/Froxlor/assets/js/app.js',
-		{{ theme_css|raw }}
+	])|raw }}
-	{% endif %}
-	{% block custom_css %}{% endblock %}
 
-	<!-- Scripts -->
-	{% if theme_js is empty %}
-		<script type="text/javascript" src="{{ basehref|default('') }}{{ mix('templates/Froxlor/assets/js/main.js') }}"></script>
-	{% else %}
-		{{ theme_js|raw }}
-	{% endif %}
-	{% block custom_js %}{% endblock %}
 	<title>Froxlor{% if page_title %} | {{ page_title }}{% endif %}</title>
 </head>
-<body class="min-vh-100 d-flex flex-column">
+<body id="app" class="min-vh-100 d-flex flex-column">
 	{% block navigation %}{% endblock %}
 
 	{% block body %}

templates/Froxlor/config.json

@@ -1,11 +1,12 @@
 {
 	"global": {
 		"css": [
-			"custom.css"
+			"assets/css/custom.css",
+			"assets/scss/app.scss"
 		],
 		"js": [
-			"main.js",
+			"assets/js/app.js",
-			"apikey.js"
+			"assets/js/apikey.js"
 		],
 		"img": {
 			"ui": "logo_white.png",

templates/Froxlor/misc/phprequirementfailed.html.twig

@@ -11,7 +11,7 @@
     <link href="{{ basehref }}templates/Froxlor/assets/css/main.css" rel="stylesheet">
 
     <!-- Scripts -->
-    <script src="{{ basehref }}templates/Froxlor/assets/js/main.js"></script>
+    <script src="{{ basehref }}templates/Froxlor/assets/js/app.js"></script>
 
     <title>Froxlor - Error</title>
 </head>

templates/Froxlor/misc/vendormissinghint.html.twig

@@ -11,7 +11,7 @@
     <link href="{{ basehref }}templates/Froxlor/assets/css/main.css" rel="stylesheet">
 
     <!-- Scripts -->
-    <script src="{{ basehref }}templates/Froxlor/assets/js/main.js"></script>
+    <script src="{{ basehref }}templates/Froxlor/assets/js/app.js"></script>
 
     <title>Froxlor - Error</title>
 </head>

templates/Froxlor/src/js/main.js

@@ -1,44 +0,0 @@
-// import libs
-import 'bootstrap';
-import '@fortawesome/fontawesome-free';
-import Chart from 'chart.js/auto';
-
-// set jquery & bootstrap & chart
-global.$ = require('jquery');
-global.validation = require('jquery-validation');
-global.bootstrap = require('bootstrap');
-window.Chart = Chart;
-
-$(function () {
-	window.$theme = 'Froxlor';
-
-	$.ajaxSetup({
-		headers: {
-			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
-		}
-	});
-
-	const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-	const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-		return new bootstrap.Tooltip(tooltipTriggerEl)
-	})
-
-	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
-	const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
-});
-
-// Load components
-require('./components/apikeys')
-require('./components/configfiles')
-require('./components/customer')
-require('./components/dnseditor')
-require('./components/domains')
-require('./components/global')
-require('./components/install')
-require('./components/ipsandports')
-require('./components/newsfeed')
-require('./components/search')
-require('./components/tablecolumns')
-require('./components/traffic')
-require('./components/updatecheck')
-require('./components/validation')

templates/Froxlor/src/scss/dark.scss

@@ -1,35 +0,0 @@
-@charset "UTF-8";
-
-// Bootstrap
-@import "variables/dark";
-@import "~bootstrap/scss/bootstrap";
-
-// Theme
-@import "components/generic";
-@import "components/alert";
-@import "components/card";
-@import "components/dropdown";
-@import "components/footer";
-@import "components/form";
-@import "components/heading";
-@import "components/navbar";
-@import "components/sidebar";
-@import "components/search";
-
-.navbar-light {
-	.navbar-toggler {
-		border-color: transparent;
-	}
-	.navbar-toggler-icon {
-		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-	}
-}
-
-tr.bg-info td,
-tr.bg-warning td {
-	color: $dark-bg !important;
-}
-
-.badge.bg-secondary {
-	color: $gray-700;
-}

templates/Froxlor/src/scss/variables/_dark.scss

@@ -1,66 +0,0 @@
-@import "main";
-
-// Color
-$primary: $froxlor-700;
-$secondary: $gray-500;
-$info: $froxlor-800;
-
-// Body
-$body-bg: $gray-900;
-$body-color: $gray-100;
-
-// Borders
-$border-color: $gray-900;
-$border-color-translucent: $gray-900;
-
-// Link
-$link-color: $froxlor-500;
-$nav-link-color: $body-color;
-
-// List groups
-$list-group-bg: $gray-800;
-$list-group-color: $body-color;
-$list-group-hover-bg: $gray-700;
-$list-group-action-color: $body-color;
-
-// Navbar
-$navbar-bg: $gray-800;
-$navbar-bg-mobile: $navbar-bg;
-$navbar-light-color: $gray-200;
-$navbar-light-hover-color: $gray-500;
-$navbar-light-active-color: $gray-500;
-
-// Sidebar
-
-// Card
-$card-bg: $gray-800;
-$card-border-color: $gray-600;
-
-// Heading
-$heading-bg: $gray-800;
-$heading-color: $body-color;
-$heading-border-color: rgba(0,0,0,0.15);
-
-// Dropdown
-$dropdown-bg: $gray-800;
-$dropdown-color: $gray-100;
-$dropdown-link-color: $gray-100;
-$dropdown-link-hover-bg: $gray-900;
-
-// Modal
-$modal-content-bg: $gray-800;
-
-// Form control
-$input-bg: $gray-900;
-$input-border-color: $black;
-$input-group-addon-bg: $gray-800;
-
-// Progress bar
-$progress-bg: $gray-900;
-
-// Search
-$search-bg: $gray-800;
-
-// Popover
-$popover-bg: $gray-800;
-$popover-body-color: $gray-100;

vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue';
+import { viteRequire } from 'vite-require'
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			external: ['extras/install'],
+		},
+		chunkSizeWarningLimit: 1000,
+	},
+	plugins: [
+		laravel({
+			input: [
+				'templates/Froxlor/assets/scss/app.scss',
+				'templates/Froxlor/assets/js/app.js',
+			],
+			hotFile: 'templates/Froxlor/hot',
+			buildDirectory: '../templates/Froxlor/build',
+			refresh: true,
+		}),
+		vue({
+			template: {
+				transformAssetUrls: {
+					base: null,
+					includeAbsolute: false,
+				},
+			},
+		}),
+	],
+	resolve: {
+		alias: {
+			vue: 'vue/dist/vue.esm-bundler.js',
+		},
+	},
+});

webpack.mix.js

@@ -1,14 +0,0 @@
-// webpack.mix.js
-
-let mix = require('laravel-mix');
-
-mix
-	.setPublicPath('templates/Froxlor/assets')
-	.options({
-		processCssUrls: false
-	})
-	.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'templates/Froxlor/assets/webfonts')
-	.js('templates/Froxlor/src/js/main.js', 'js')
-	.sass('templates/Froxlor/src/scss/main.scss', 'css')
-	.sass('templates/Froxlor/src/scss/dark.scss', 'css')
-	.version();