[Vue] remove angularjs use from the DevicesDetection plugin (#19435)

* remove angularjs use from the DevicesDetection plugin

* built vue files

* Allow composer plugins for dev dependency codesniffer to fix travis builds.

* update device detection demo to be accurate

* correct img width height for device detection logos

* adds missing css rule

* fix displaying device type logos

Co-authored-by: Stefan Giehl <stefan@matomo.org>

9 files changed, 878 insertions, 168 deletions

diff --git a/plugins/DevicesDetection/Controller.php b/plugins/DevicesDetection/Controller.php
index dff2b25d67..254f2b3ab6 100644
--- a/plugins/DevicesDetection/Controller.php
+++ b/plugins/DevicesDetection/Controller.php
@@ -47,7 +47,7 @@ class Controller extends \Piwik\Plugin\Controller
         $view->os_family_logo      = getOsFamilyLogo($view->os_family);
         $view->os_version          = $uaParser->getOs('version');
         $view->device_type         = getDeviceTypeLabel($uaParser->getDeviceName());
-        $view->device_type_logo    = getDeviceTypeLogo($uaParser->getDeviceName());
+        $view->device_type_logo    = getDeviceTypeLogo($uaParser->getDevice());
         $view->device_model        = $uaParser->getModel();
         $view->device_brand        = getDeviceBrandLabel($uaParser->getBrand());
         $view->device_brand_logo   = getBrandLogo($view->device_brand);
@@ -112,7 +112,7 @@ class Controller extends \Piwik\Plugin\Controller
                 $deviceTypes = \DeviceDetector\Parser\Device\AbstractDeviceParser::getAvailableDeviceTypes();
 
                 foreach ($deviceTypes as $name => $id) {
-                    $list[$name] = getDeviceTypeLogo($name);
+                    $list[$name] = getDeviceTypeLogo($id);
                 }
                 break;
         }
diff --git a/plugins/DevicesDetection/DevicesDetection.php b/plugins/DevicesDetection/DevicesDetection.php
index 5c20cf46df..8bff9ede27 100644
--- a/plugins/DevicesDetection/DevicesDetection.php
+++ b/plugins/DevicesDetection/DevicesDetection.php
@@ -13,4 +13,38 @@ require_once PIWIK_INCLUDE_PATH . '/plugins/DevicesDetection/functions.php';
 
 class DevicesDetection extends \Piwik\Plugin
 {
+    public function registerEvents()
+    {
+        return [
+            'Translate.getClientSideTranslationKeys' => 'getClientSideTranslationKeys',
+            'AssetManager.getStylesheetFiles' => 'getStylesheetFiles',
+        ];
+    }
+
+    public function getClientSideTranslationKeys(&$translations)
+    {
+        $translations[] = 'DevicesDetection_UserAgent';
+        $translations[] = 'General_Refresh';
+        $translations[] = 'DevicesDetection_BotDetected';
+        $translations[] = 'DevicesDetection_ColumnOperatingSystem';
+        $translations[] = 'Mobile_ShowAll';
+        $translations[] = 'CorePluginsAdmin_Version';
+        $translations[] = 'DevicesDetection_OperatingSystemFamily';
+        $translations[] = 'DevicesDetection_ColumnBrowser';
+        $translations[] = 'DevicesDetection_BrowserFamily';
+        $translations[] = 'DevicesDetection_Device';
+        $translations[] = 'DevicesDetection_dataTableLabelTypes';
+        $translations[] = 'DevicesDetection_dataTableLabelBrands';
+        $translations[] = 'DevicesDetection_dataTableLabelModels';
+        $translations[] = 'General_Close';
+        $translations[] = 'DevicesDetection_DeviceDetection';
+        $translations[] = 'DevicesDetection_ClientHints';
+        $translations[] = 'DevicesDetection_ConsiderClientHints';
+        $translations[] = 'DevicesDetection_ClientHintsNotSupported';
+    }
+
+    public function getStylesheetFiles(&$files)
+    {
+        $files[] = 'plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.less';
+    }
 }
diff --git a/plugins/DevicesDetection/templates/detection.twig b/plugins/DevicesDetection/templates/detection.twig
index 28213e81f8..fbe384117f 100644
--- a/plugins/DevicesDetection/templates/detection.twig
+++ b/plugins/DevicesDetection/templates/detection.twig
@@ -4,171 +4,26 @@
 
 {% block content %}
 
-    <script type="text/javascript">
-
-        var clientHints = {};
-
-        $(document).ready(function() {
-            if (!navigator.userAgentData || typeof navigator.userAgentData.getHighEntropyValues !== 'function') {
-                $('#noclienthints').css({display: 'inline-block'});
-                $('[name=clienthints],.usech').hide();
-            } else {
-                // Initialize with low entropy values that are always available
-                clientHints = {
-                    brands: navigator.userAgentData.brands,
-                    platform: navigator.userAgentData.platform
-                };
-
-                // try to gather high entropy values
-                // currently this methods simply returns the requested values through a Promise
-                // In later versions it might require a user permission
-                navigator.userAgentData.getHighEntropyValues(
-                    ['brands', 'model', 'platform', 'platformVersion', 'uaFullVersion', 'fullVersionList']
-                ).then(function (ua) {
-                    if (ua.fullVersionList) {
-                        // if fullVersionList is available, brands and uaFullVersion isn't needed
-                        delete ua.brands;
-                        delete ua.uaFullVersion;
-                    }
-
-                    clientHints = ua;
-                });
-            }
-        });
-
-        function showList(type) {
-            var ajaxHandler = new ajaxHelper();
-            ajaxHandler.addParams({
-                module: 'DevicesDetection',
-                action: 'showList',
-                type: type
-            }, 'GET');
-            ajaxHandler.setFormat('html');
-            ajaxHandler.setCallback(function(response){
-                var $list = $('#deviceDetectionItemList');
-                $list.find('.itemList').html(response);
-                piwikHelper.modalConfirm($list, [], {fixedFooter: true});
-            });
-            ajaxHandler.send();
-        }
-
-        function toggleClientHints() {
-            $('[name=clienthints]').toggle();
-            if ($('[name=clienthints]:visible').length) {
-                $('[name=clienthints]').text().length || $('[name=clienthints]').text(JSON.stringify(clientHints));
-            } else {
-                $('[name=clienthints]').text('');
-            }
-        }
-
-    </script>
-
-    <style type="text/css">
-        textarea {
-            width: 700px;
-            display: block;
-        }
-
-        .detection {
-            padding-top:10px;
-        }
-        .detection td {
-            width: 50%;
-        }
-        .detection td img {
-            margin-right: 10px;
-        }
-    </style>
-
-    <div piwik-content-block content-title="{{ title|e('html_attr') }}">
-        <form action="{{ linkTo({}) }}" method="POST">
-
-            <h3>{{ 'DevicesDetection_UserAgent'|translate }}</h3>
-
-            <textarea name="ua">{{ userAgent }}</textarea>
-
-            <h3>{{ 'DevicesDetection_ClientHints'|translate }}</h3>
-
-            <span class="checkbox-container usech">
-                <label>
-                    <input type="checkbox" id="usech" {% if clientHints %}checked{% endif %} onchange="toggleClientHints()"/>
-                    <span>{{ 'DevicesDetection_ConsiderClientHints'|translate }}</span>
-                </label>
-            </span>
-
-            <textarea name="clienthints" style="margin-top: 2em; {% if not clientHints %}display: none{% endif %}">{% if clientHints %}{{ clientHints|json_encode }}{% endif %}</textarea>
-
-            <span id="noclienthints" class="alert alert-warning" style="display: none">{{ 'DevicesDetection_ClientHintsNotSupported'|translate }}</span>
-
-            <br /><br />
-            <input type="submit" value="{{ 'General_Refresh'|translate }}" class="btn" />
-        </form>
-
-        {% if bot_info %}
-
-        <h3>{{ 'DevicesDetection_BotDetected'|translate(bot_info.name) }}</h3>
-
-        {% else %}
-
-        <h3>{{ 'DevicesDetection_ColumnOperatingSystem'|translate|e('html_attr') }}</h3>
-        <table class="detection" piwik-content-table>
-            <tbody>
-            <tr>
-                <td>{{ 'General_Name'|translate }} <small>(<a href="javascript:showList('os');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
-                <td><img height="16px" width="16px" src="{{ os_logo }}" />{{ os_name }}</td>
-            </tr>
-            <tr>
-                <td>{{ 'CorePluginsAdmin_Version'|translate }}</td>
-                <td>{{ os_version }}</td>
-            </tr>
-            <tr>
-                <td>{{ 'DevicesDetection_OperatingSystemFamily'|translate }}  <small>(<a href="javascript:showList('osfamilies');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
-                <td><img height="16px" width="16px" src="{{ os_family_logo }}" />{{ os_family }}</td>
-            </tr>
-            </tbody>
-        </table>
-
-        <h3>{{ 'DevicesDetection_ColumnBrowser'|translate }}</h3>
-        <table class="detection" piwik-content-table>
-            <tbody>
-            <tr>
-                <td>{{ 'General_Name'|translate }} <small>(<a href="javascript:showList('browsers');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
-                <td><img height="16px" width="16px" src="{{ browser_logo }}" />{{ browser_name }}</td>
-            </tr>
-            <tr>
-                <td>{{ 'CorePluginsAdmin_Version'|translate }}</td>
-                <td>{{ browser_version }}</td>
-            </tr>
-            <tr>
-                <td>{{ 'DevicesDetection_BrowserFamily'|translate }} <small>(<a href="javascript:showList('browserfamilies');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
-                <td><img height="16px" width="16px" src="{{ browser_family_logo }}" />{{ browser_family }}</td>
-            </tr>
-            </tbody>
-        </table>
-
-        <h3>{{ 'DevicesDetection_Device'|translate }}</h3>
-        <table class="detection" piwik-content-table>
-            <tbody>
-            <tr>
-                <td>{{ 'DevicesDetection_dataTableLabelTypes'|translate }} <small>(<a href="javascript:showList('devicetypes');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
-                <td><img height="16px" width="16px" src="{{ device_type_logo }}" />{{ device_type }}</td>
-            </tr>
-            <tr>
-                <td>{{ 'DevicesDetection_dataTableLabelBrands'|translate }} <small>(<a href="javascript:showList('brands');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
-                <td><img height="16px" width="16px" src="{{ device_brand_logo }}" />{{ device_brand }}</td>
-            </tr>
-            <tr>
-                <td>{{ 'DevicesDetection_dataTableLabelModels'|translate }}</td>
-                <td>{{ device_model }}</td>
-            </tr></tbody>
-        </table>
-
-        {% endif %}
-    </div>
-
-    <div class="ui-confirm" id="deviceDetectionItemList">
-        <div class="itemList"> </div>
-        <input role="close" type="button" value="{{ 'General_Close'|translate }}"/>
-    </div>
+<div
+    vue-entry="DevicesDetection.DetectionPage"
+    user-agent="{{ userAgent|json_encode|e('html_attr') }}"
+    bot_info="{{ bot_info|default(null)|json_encode|e('html_attr') }}"
+    os_logo="{{ os_logo|default(null)|json_encode|e('html_attr') }}"
+    os_name="{{ os_name|default(null)|json_encode|e('html_attr') }}"
+    os_version="{{ os_version|default(null)|json_encode|e('html_attr') }}"
+    os_family_logo="{{ os_family_logo|default(null)|json_encode|e('html_attr') }}"
+    os_family="{{ os_family|default(null)|json_encode|e('html_attr') }}"
+    browser_logo="{{ browser_logo|default(null)|json_encode|e('html_attr') }}"
+    browser_name="{{ browser_name|default(null)|json_encode|e('html_attr') }}"
+    browser_version="{{ browser_version|default(null)|json_encode|e('html_attr') }}"
+    browser_family="{{ browser_family|default(null)|json_encode|e('html_attr') }}"
+    browser_family_logo="{{ browser_family_logo|default(null)|json_encode|e('html_attr') }}"
+    device_type_logo="{{ device_type_logo|default(null)|json_encode|e('html_attr') }}"
+    device_type="{{ device_type|default(null)|json_encode|e('html_attr') }}"
+    device_brand_logo="{{ device_brand_logo|default(null)|json_encode|e('html_attr') }}"
+    device_brand="{{ device_brand|default(null)|json_encode|e('html_attr') }}"
+    device_model="{{ device_model|default(null)|json_encode|e('html_attr') }}"
+    client-hints-checked="{{ (not not clientHints)|json_encode|e('html_attr') }}"
+></div>
 
 {% endblock %}
diff --git a/plugins/DevicesDetection/vue/dist/DevicesDetection.umd.js b/plugins/DevicesDetection/vue/dist/DevicesDetection.umd.js
new file mode 100644
index 0000000000..e45873270c
--- /dev/null
+++ b/plugins/DevicesDetection/vue/dist/DevicesDetection.umd.js
@@ -0,0 +1,481 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", ], factory);
+	else if(typeof exports === 'object')
+		exports["DevicesDetection"] = factory(require("CoreHome"), require("vue"));
+	else
+		root["DevicesDetection"] = factory(root["CoreHome"], root["Vue"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/DevicesDetection/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "8bbf":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "DetectionPage", function() { return /* reexport */ DetectionPage; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue?vue&type=template&id=53e0cbfc
+
+var _hoisted_1 = {
+  class: "detectionPage"
+};
+var _hoisted_2 = {
+  action: "",
+  method: "POST"
+};
+
+var _hoisted_3 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_4 = {
+  key: 0,
+  class: "checkbox-container usech"
+};
+
+var _hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_6 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_7 = ["value"];
+var _hoisted_8 = {
+  key: 0
+};
+var _hoisted_9 = {
+  key: 1
+};
+var _hoisted_10 = {
+  class: "detection"
+};
+
+var _hoisted_11 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" (");
+
+var _hoisted_12 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_13 = ["src"];
+
+var _hoisted_14 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" (");
+
+var _hoisted_15 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_16 = ["src"];
+var _hoisted_17 = {
+  class: "detection"
+};
+
+var _hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" (");
+
+var _hoisted_19 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_20 = ["src"];
+
+var _hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" (");
+
+var _hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_23 = ["src"];
+var _hoisted_24 = {
+  class: "detection"
+};
+
+var _hoisted_25 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" (");
+
+var _hoisted_26 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_27 = ["src"];
+
+var _hoisted_28 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" (");
+
+var _hoisted_29 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") ");
+
+var _hoisted_30 = ["src"];
+var _hoisted_31 = {
+  class: "ui-confirm",
+  id: "deviceDetectionItemList",
+  ref: "deviceDetectionItemList"
+};
+var _hoisted_32 = ["innerHTML"];
+var _hoisted_33 = ["value"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ContentBlock = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ContentBlock");
+
+  var _directive_content_table = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("content-table");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, {
+    "content-title": _ctx.translate('DevicesDetection_DeviceDetection')
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("form", _hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_UserAgent')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("textarea", {
+        name: "ua",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.userAgentText = $event;
+        })
+      }, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelText"], _ctx.userAgentText]]), _hoisted_3, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_ClientHints')), 1), _ctx.isClientHintsSupported ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("span", _hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("label", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+        type: "checkbox",
+        id: "usech",
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+          return _ctx.considerClientHints = $event;
+        }),
+        onChange: _cache[2] || (_cache[2] = function ($event) {
+          return _ctx.toggleClientHints();
+        })
+      }, null, 544), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelCheckbox"], _ctx.considerClientHints]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_ConsiderClientHints')), 1)])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), _ctx.isClientHintsSupported && _ctx.considerClientHints ? Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])((Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("textarea", {
+        key: 1,
+        name: "clienthints",
+        style: {
+          "margin-top": "2em"
+        },
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+          return _ctx.clientHintsText = $event;
+        })
+      }, null, 512)), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelText"], _ctx.clientHintsText]]) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+        id: "noclienthints",
+        class: "alert alert-warning"
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_ClientHintsNotSupported')), 513), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !_ctx.isClientHintsSupported]]), _hoisted_5, _hoisted_6, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+        type: "submit",
+        value: _ctx.translate('General_Refresh'),
+        class: "btn"
+      }, null, 8, _hoisted_7)]), _ctx.bot_info ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("h3", _hoisted_8, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_BotDetected', _ctx.bot_info.name)), 1)) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_9, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_ColumnOperatingSystem')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("table", _hoisted_10, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tbody", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Name')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("small", null, [_hoisted_11, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        href: "",
+        onClick: _cache[4] || (_cache[4] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return _ctx.showList('os');
+        }, ["prevent"]))
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Mobile_ShowAll')), 1), _hoisted_12])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+        height: 16,
+        width: 16,
+        src: _ctx.os_logo
+      }, null, 8, _hoisted_13), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.os_name), 1)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('CorePluginsAdmin_Version')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.os_version), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_OperatingSystemFamily')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("small", null, [_hoisted_14, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        href: "",
+        onClick: _cache[5] || (_cache[5] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return _ctx.showList('osfamilies');
+        }, ["prevent"]))
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Mobile_ShowAll')), 1), _hoisted_15])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+        height: 16,
+        width: 16,
+        src: _ctx.os_family_logo
+      }, null, 8, _hoisted_16), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.os_family), 1)])])])], 512), [[_directive_content_table]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_ColumnBrowser')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("table", _hoisted_17, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tbody", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Name')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("small", null, [_hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        href: "",
+        onClick: _cache[6] || (_cache[6] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return _ctx.showList('browsers');
+        }, ["prevent"]))
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Mobile_ShowAll')), 1), _hoisted_19])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+        height: 16,
+        width: 16,
+        src: _ctx.browser_logo
+      }, null, 8, _hoisted_20), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.browser_name), 1)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('CorePluginsAdmin_Version')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.browser_version), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_BrowserFamily')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("small", null, [_hoisted_21, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        href: "",
+        onClick: _cache[7] || (_cache[7] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return _ctx.showList('browserfamilies');
+        }, ["prevent"]))
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Mobile_ShowAll')), 1), _hoisted_22])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+        height: 16,
+        width: 16,
+        src: _ctx.browser_family_logo
+      }, null, 8, _hoisted_23), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.browser_family), 1)])])])], 512), [[_directive_content_table]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h3", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_Device')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("table", _hoisted_24, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tbody", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_dataTableLabelTypes')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("small", null, [_hoisted_25, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        href: "",
+        onClick: _cache[8] || (_cache[8] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return _ctx.showList('devicetypes');
+        }, ["prevent"]))
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Mobile_ShowAll')), 1), _hoisted_26])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+        height: 16,
+        width: 16,
+        src: _ctx.device_type_logo
+      }, null, 8, _hoisted_27), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.device_type), 1)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_dataTableLabelBrands')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("small", null, [_hoisted_28, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+        href: "",
+        onClick: _cache[9] || (_cache[9] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function ($event) {
+          return _ctx.showList('brands');
+        }, ["prevent"]))
+      }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Mobile_ShowAll')), 1), _hoisted_29])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+        height: 16,
+        width: 16,
+        src: _ctx.device_brand_logo
+      }, null, 8, _hoisted_30), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.device_brand), 1)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('DevicesDetection_dataTableLabelModels')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.device_model), 1)])])], 512), [[_directive_content_table]])]))];
+    }),
+    _: 1
+  }, 8, ["content-title"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_31, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", {
+    class: "itemList",
+    innerHTML: _ctx.$sanitize(_ctx.itemListHtml)
+  }, null, 8, _hoisted_32), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+    role: "close",
+    type: "button",
+    value: _ctx.translate('General_Close')
+  }, null, 8, _hoisted_33)], 512)]);
+}
+// CONCATENATED MODULE: ./plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue?vue&type=template&id=53e0cbfc
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue?vue&type=script&lang=ts
+
+
+
+function _isClientHintsSupported() {
+  var nav = navigator; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  return nav.userAgentData && typeof nav.userAgentData.getHighEntropyValues === 'function';
+}
+
+var clientHints = null;
+
+function getDefaultClientHints() {
+  var nav = navigator; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  if (!_isClientHintsSupported()) {
+    return Promise.resolve(null);
+  }
+
+  if (clientHints) {
+    return Promise.resolve(clientHints);
+  } // Initialize with low entropy values that are always available
+
+
+  clientHints = {
+    brands: nav.userAgentData.brands,
+    platform: nav.userAgentData.platform
+  }; // try to gather high entropy values
+  // currently this methods simply returns the requested values through a Promise
+  // In later versions it might require a user permission
+
+  return nav.userAgentData.getHighEntropyValues(['brands', 'model', 'platform', 'platformVersion', 'uaFullVersion', 'fullVersionList']).then(function (ua) {
+    clientHints = Object.assign({}, ua);
+
+    if (clientHints.fullVersionList) {
+      // if fullVersionList is available, brands and uaFullVersion isn't needed
+      delete clientHints.brands;
+      delete clientHints.uaFullVersion;
+    }
+
+    return clientHints;
+  });
+}
+
+/* harmony default export */ var DetectionPagevue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    userAgent: {
+      type: String,
+      required: true
+    },
+    bot_info: Object,
+    os_logo: String,
+    os_name: String,
+    os_version: String,
+    os_family_logo: String,
+    os_family: String,
+    browser_logo: String,
+    browser_name: String,
+    browser_version: String,
+    browser_family: String,
+    browser_family_logo: String,
+    device_type_logo: String,
+    device_type: String,
+    device_brand_logo: String,
+    device_brand: String,
+    device_model: String,
+    clientHintsChecked: Boolean
+  },
+  components: {
+    ContentBlock: external_CoreHome_["ContentBlock"]
+  },
+  directives: {
+    ContentTable: external_CoreHome_["ContentTable"]
+  },
+  created: function created() {
+    var _this = this;
+
+    getDefaultClientHints().then(function (hints) {
+      _this.defaultClientHints = hints;
+
+      _this.toggleClientHints();
+    });
+  },
+  data: function data() {
+    return {
+      itemListHtml: '',
+      considerClientHints: !!this.clientHintsChecked,
+      clientHintsText: '',
+      userAgentText: this.userAgent,
+      defaultClientHints: null
+    };
+  },
+  methods: {
+    showList: function showList(type) {
+      var _this2 = this;
+
+      external_CoreHome_["AjaxHelper"].fetch({
+        module: 'DevicesDetection',
+        action: 'showList',
+        type: type
+      }, {
+        format: 'html'
+      }).then(function (response) {
+        _this2.itemListHtml = response;
+        external_CoreHome_["Matomo"].helper.modalConfirm(_this2.$refs.deviceDetectionItemList, undefined, {
+          fixedFooter: true
+        });
+      });
+    },
+    toggleClientHints: function toggleClientHints() {
+      if (this.considerClientHints && this.defaultClientHints !== null) {
+        this.clientHintsText = this.clientHintsText || JSON.stringify(this.defaultClientHints);
+      } else {
+        this.clientHintsText = '';
+      }
+    }
+  },
+  computed: {
+    isClientHintsSupported: function isClientHintsSupported() {
+      return _isClientHintsSupported();
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue
+
+
+
+DetectionPagevue_type_script_lang_ts.render = render
+
+/* harmony default export */ var DetectionPage = (DetectionPagevue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/DevicesDetection/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+*/
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=DevicesDetection.umd.js.map
\ No newline at end of file
diff --git a/plugins/DevicesDetection/vue/dist/DevicesDetection.umd.min.js b/plugins/DevicesDetection/vue/dist/DevicesDetection.umd.min.js
new file mode 100644
index 0000000000..3a7332abd6
--- /dev/null
+++ b/plugins/DevicesDetection/vue/dist/DevicesDetection.umd.min.js
@@ -0,0 +1,8 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue")):"function"===typeof define&&define.amd?define(["CoreHome"],t):"object"===typeof exports?exports["DevicesDetection"]=t(require("CoreHome"),require("vue")):e["DevicesDetection"]=t(e["CoreHome"],e["Vue"])})("undefined"!==typeof self?self:this,(function(e,t){return function(e){var t={};function n(l){if(t[l])return t[l].exports;var r=t[l]={i:l,l:!1,exports:{}};return e[l].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,l){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(n.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(l,r,function(t){return e[t]}.bind(null,r));return l},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/DevicesDetection/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"DetectionPage",(function(){return z})),"undefined"!==typeof window){var l=window.document.currentScript,r=l&&l.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var c=n("8bbf"),o={class:"detectionPage"},i={action:"",method:"POST"},a=Object(c["createElementVNode"])("br",null,null,-1),s={key:0,class:"checkbox-container usech"},d=Object(c["createElementVNode"])("br",null,null,-1),b=Object(c["createElementVNode"])("br",null,null,-1),u=["value"],m={key:0},j={key:1},O={class:"detection"},p=Object(c["createTextVNode"])(" ("),f=Object(c["createTextVNode"])(") "),g=["src"],V=Object(c["createTextVNode"])(" ("),N=Object(c["createTextVNode"])(") "),v=["src"],h={class:"detection"},D=Object(c["createTextVNode"])(" ("),y=Object(c["createTextVNode"])(") "),E=["src"],_=Object(c["createTextVNode"])(" ("),S=Object(c["createTextVNode"])(") "),w=["src"],x={class:"detection"},C=Object(c["createTextVNode"])(" ("),T=Object(c["createTextVNode"])(") "),H=["src"],k=Object(c["createTextVNode"])(" ("),M=Object(c["createTextVNode"])(") "),L=["src"],A={class:"ui-confirm",id:"deviceDetectionItemList",ref:"deviceDetectionItemList"},B=["innerHTML"],P=["value"];function q(e,t,n,l,r,q){var F=Object(c["resolveComponent"])("ContentBlock"),G=Object(c["resolveDirective"])("content-table");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",o,[Object(c["createVNode"])(F,{"content-title":e.translate("DevicesDetection_DeviceDetection")},{default:Object(c["withCtx"])((function(){return[Object(c["createElementVNode"])("form",i,[Object(c["createElementVNode"])("h3",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_UserAgent")),1),Object(c["withDirectives"])(Object(c["createElementVNode"])("textarea",{name:"ua","onUpdate:modelValue":t[0]||(t[0]=function(t){return e.userAgentText=t})},null,512),[[c["vModelText"],e.userAgentText]]),a,Object(c["createElementVNode"])("h3",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_ClientHints")),1),e.isClientHintsSupported?(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",s,[Object(c["createElementVNode"])("label",null,[Object(c["withDirectives"])(Object(c["createElementVNode"])("input",{type:"checkbox",id:"usech","onUpdate:modelValue":t[1]||(t[1]=function(t){return e.considerClientHints=t}),onChange:t[2]||(t[2]=function(t){return e.toggleClientHints()})},null,544),[[c["vModelCheckbox"],e.considerClientHints]]),Object(c["createElementVNode"])("span",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_ConsiderClientHints")),1)])])):Object(c["createCommentVNode"])("",!0),e.isClientHintsSupported&&e.considerClientHints?Object(c["withDirectives"])((Object(c["openBlock"])(),Object(c["createElementBlock"])("textarea",{key:1,name:"clienthints",style:{"margin-top":"2em"},"onUpdate:modelValue":t[3]||(t[3]=function(t){return e.clientHintsText=t})},null,512)),[[c["vModelText"],e.clientHintsText]]):Object(c["createCommentVNode"])("",!0),Object(c["withDirectives"])(Object(c["createElementVNode"])("span",{id:"noclienthints",class:"alert alert-warning"},Object(c["toDisplayString"])(e.translate("DevicesDetection_ClientHintsNotSupported")),513),[[c["vShow"],!e.isClientHintsSupported]]),d,b,Object(c["createElementVNode"])("input",{type:"submit",value:e.translate("General_Refresh"),class:"btn"},null,8,u)]),e.bot_info?(Object(c["openBlock"])(),Object(c["createElementBlock"])("h3",m,Object(c["toDisplayString"])(e.translate("DevicesDetection_BotDetected",e.bot_info.name)),1)):(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",j,[Object(c["createElementVNode"])("h3",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_ColumnOperatingSystem")),1),Object(c["withDirectives"])(Object(c["createElementVNode"])("table",O,[Object(c["createElementVNode"])("tbody",null,[Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,[Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.translate("General_Name"))+" ",1),Object(c["createElementVNode"])("small",null,[p,Object(c["createElementVNode"])("a",{href:"",onClick:t[4]||(t[4]=Object(c["withModifiers"])((function(t){return e.showList("os")}),["prevent"]))},Object(c["toDisplayString"])(e.translate("Mobile_ShowAll")),1),f])]),Object(c["createElementVNode"])("td",null,[Object(c["createElementVNode"])("img",{height:16,width:16,src:e.os_logo},null,8,g),Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.os_name),1)])]),Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,Object(c["toDisplayString"])(e.translate("CorePluginsAdmin_Version")),1),Object(c["createElementVNode"])("td",null,Object(c["toDisplayString"])(e.os_version),1)]),Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,[Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.translate("DevicesDetection_OperatingSystemFamily"))+" ",1),Object(c["createElementVNode"])("small",null,[V,Object(c["createElementVNode"])("a",{href:"",onClick:t[5]||(t[5]=Object(c["withModifiers"])((function(t){return e.showList("osfamilies")}),["prevent"]))},Object(c["toDisplayString"])(e.translate("Mobile_ShowAll")),1),N])]),Object(c["createElementVNode"])("td",null,[Object(c["createElementVNode"])("img",{height:16,width:16,src:e.os_family_logo},null,8,v),Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.os_family),1)])])])],512),[[G]]),Object(c["createElementVNode"])("h3",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_ColumnBrowser")),1),Object(c["withDirectives"])(Object(c["createElementVNode"])("table",h,[Object(c["createElementVNode"])("tbody",null,[Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,[Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.translate("General_Name"))+" ",1),Object(c["createElementVNode"])("small",null,[D,Object(c["createElementVNode"])("a",{href:"",onClick:t[6]||(t[6]=Object(c["withModifiers"])((function(t){return e.showList("browsers")}),["prevent"]))},Object(c["toDisplayString"])(e.translate("Mobile_ShowAll")),1),y])]),Object(c["createElementVNode"])("td",null,[Object(c["createElementVNode"])("img",{height:16,width:16,src:e.browser_logo},null,8,E),Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.browser_name),1)])]),Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,Object(c["toDisplayString"])(e.translate("CorePluginsAdmin_Version")),1),Object(c["createElementVNode"])("td",null,Object(c["toDisplayString"])(e.browser_version),1)]),Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,[Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.translate("DevicesDetection_BrowserFamily"))+" ",1),Object(c["createElementVNode"])("small",null,[_,Object(c["createElementVNode"])("a",{href:"",onClick:t[7]||(t[7]=Object(c["withModifiers"])((function(t){return e.showList("browserfamilies")}),["prevent"]))},Object(c["toDisplayString"])(e.translate("Mobile_ShowAll")),1),S])]),Object(c["createElementVNode"])("td",null,[Object(c["createElementVNode"])("img",{height:16,width:16,src:e.browser_family_logo},null,8,w),Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.browser_family),1)])])])],512),[[G]]),Object(c["createElementVNode"])("h3",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_Device")),1),Object(c["withDirectives"])(Object(c["createElementVNode"])("table",x,[Object(c["createElementVNode"])("tbody",null,[Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,[Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.translate("DevicesDetection_dataTableLabelTypes"))+" ",1),Object(c["createElementVNode"])("small",null,[C,Object(c["createElementVNode"])("a",{href:"",onClick:t[8]||(t[8]=Object(c["withModifiers"])((function(t){return e.showList("devicetypes")}),["prevent"]))},Object(c["toDisplayString"])(e.translate("Mobile_ShowAll")),1),T])]),Object(c["createElementVNode"])("td",null,[Object(c["createElementVNode"])("img",{height:16,width:16,src:e.device_type_logo},null,8,H),Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.device_type),1)])]),Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,[Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.translate("DevicesDetection_dataTableLabelBrands"))+" ",1),Object(c["createElementVNode"])("small",null,[k,Object(c["createElementVNode"])("a",{href:"",onClick:t[9]||(t[9]=Object(c["withModifiers"])((function(t){return e.showList("brands")}),["prevent"]))},Object(c["toDisplayString"])(e.translate("Mobile_ShowAll")),1),M])]),Object(c["createElementVNode"])("td",null,[Object(c["createElementVNode"])("img",{height:16,width:16,src:e.device_brand_logo},null,8,L),Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.device_brand),1)])]),Object(c["createElementVNode"])("tr",null,[Object(c["createElementVNode"])("td",null,Object(c["toDisplayString"])(e.translate("DevicesDetection_dataTableLabelModels")),1),Object(c["createElementVNode"])("td",null,Object(c["toDisplayString"])(e.device_model),1)])])],512),[[G]])]))]})),_:1},8,["content-title"]),Object(c["createElementVNode"])("div",A,[Object(c["createElementVNode"])("div",{class:"itemList",innerHTML:e.$sanitize(e.itemListHtml)},null,8,B),Object(c["createElementVNode"])("input",{role:"close",type:"button",value:e.translate("General_Close")},null,8,P)],512)])}var F=n("19dc");function G(){var e=navigator;return e.userAgentData&&"function"===typeof e.userAgentData.getHighEntropyValues}var U=null;function I(){var e=navigator;return G()?U?Promise.resolve(U):(U={brands:e.userAgentData.brands,platform:e.userAgentData.platform},e.userAgentData.getHighEntropyValues(["brands","model","platform","platformVersion","uaFullVersion","fullVersionList"]).then((function(e){return U=Object.assign({},e),U.fullVersionList&&(delete U.brands,delete U.uaFullVersion),U}))):Promise.resolve(null)}var $=Object(c["defineComponent"])({props:{userAgent:{type:String,required:!0},bot_info:Object,os_logo:String,os_name:String,os_version:String,os_family_logo:String,os_family:String,browser_logo:String,browser_name:String,browser_version:String,browser_family:String,browser_family_logo:String,device_type_logo:String,device_type:String,device_brand_logo:String,device_brand:String,device_model:String,clientHintsChecked:Boolean},components:{ContentBlock:F["ContentBlock"]},directives:{ContentTable:F["ContentTable"]},created:function(){var e=this;I().then((function(t){e.defaultClientHints=t,e.toggleClientHints()}))},data:function(){return{itemListHtml:"",considerClientHints:!!this.clientHintsChecked,clientHintsText:"",userAgentText:this.userAgent,defaultClientHints:null}},methods:{showList:function(e){var t=this;F["AjaxHelper"].fetch({module:"DevicesDetection",action:"showList",type:e},{format:"html"}).then((function(e){t.itemListHtml=e,F["Matomo"].helper.modalConfirm(t.$refs.deviceDetectionItemList,void 0,{fixedFooter:!0})}))},toggleClientHints:function(){this.considerClientHints&&null!==this.defaultClientHints?this.clientHintsText=this.clientHintsText||JSON.stringify(this.defaultClientHints):this.clientHintsText=""}},computed:{isClientHintsSupported:function(){return G()}}});$.render=q;var z=$;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+*/}})}));
+//# sourceMappingURL=DevicesDetection.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/DevicesDetection/vue/dist/umd.metadata.json b/plugins/DevicesDetection/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..9ecfcc0456
--- /dev/null
+++ b/plugins/DevicesDetection/vue/dist/umd.metadata.json
@@ -0,0 +1,5 @@
+{
+  "dependsOn": [
+    "CoreHome"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.less b/plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.less
new file mode 100644
index 0000000000..0c92585ebe
--- /dev/null
+++ b/plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.less
@@ -0,0 +1,22 @@
+.detectionPage {
+  textarea {
+    width: 700px;
+    display: block;
+  }
+
+  .detection {
+    padding-top: 10px;
+  }
+
+  .detection td {
+    width: 50%;
+  }
+
+  .detection td img {
+    margin-right: 10px;
+  }
+  
+  #noclienthints {
+    display: inline-block;
+  }
+}
diff --git a/plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue b/plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue
new file mode 100644
index 0000000000..2347eea074
--- /dev/null
+++ b/plugins/DevicesDetection/vue/src/DetectionPage/DetectionPage.vue
@@ -0,0 +1,297 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div class="detectionPage">
+    <ContentBlock :content-title="translate('DevicesDetection_DeviceDetection')">
+      <form action="" method="POST">
+
+        <h3>{{ translate('DevicesDetection_UserAgent') }}</h3>
+
+        <textarea name="ua" v-model="userAgentText"></textarea>
+        <br />
+
+        <h3>{{ translate('DevicesDetection_ClientHints') }}</h3>
+
+        <span class="checkbox-container usech" v-if="isClientHintsSupported">
+            <label>
+                <input
+                  type="checkbox"
+                  id="usech"
+                  v-model="considerClientHints"
+                  @change="toggleClientHints()"
+                />
+                <span>{{ translate('DevicesDetection_ConsiderClientHints') }}</span>
+            </label>
+        </span>
+
+        <textarea
+          name="clienthints" style="margin-top: 2em;"
+          v-if="isClientHintsSupported && considerClientHints"
+          v-model="clientHintsText"
+        ></textarea>
+
+        <span id="noclienthints" class="alert alert-warning" v-show="!isClientHintsSupported">
+          {{ translate('DevicesDetection_ClientHintsNotSupported') }}
+        </span>
+
+        <br /><br />
+        <input type="submit" :value="translate('General_Refresh')" class="btn" />
+      </form>
+
+      <h3 v-if="bot_info">{{ translate('DevicesDetection_BotDetected', bot_info.name) }}</h3>
+
+      <div v-else>
+      <h3>{{ translate('DevicesDetection_ColumnOperatingSystem') }}</h3>
+        <table class="detection" v-content-table>
+          <tbody>
+          <tr>
+            <td>
+              {{ translate('General_Name') }}
+              <small>
+                (<a href="" @click.prevent="showList('os')">{{ translate('Mobile_ShowAll') }}</a>)
+              </small>
+            </td>
+            <td><img :height="16" :width="16" :src="os_logo" />{{ os_name }}</td>
+          </tr>
+          <tr>
+            <td>{{ translate('CorePluginsAdmin_Version') }}</td>
+            <td>{{ os_version }}</td>
+          </tr>
+          <tr>
+            <td>
+              {{ translate('DevicesDetection_OperatingSystemFamily') }}
+              <small>
+                (<a
+                  href=""
+                  @click.prevent="showList('osfamilies')"
+                >{{ translate('Mobile_ShowAll') }}</a>)
+              </small>
+            </td>
+            <td><img :height="16" :width="16" :src="os_family_logo" />{{ os_family }}</td>
+          </tr>
+          </tbody>
+        </table>
+
+        <h3>{{ translate('DevicesDetection_ColumnBrowser') }}</h3>
+        <table class="detection" v-content-table>
+          <tbody>
+          <tr>
+            <td>
+              {{ translate('General_Name') }}
+              <small>
+                (<a
+                  href=""
+                  @click.prevent="showList('browsers')"
+                >{{ translate('Mobile_ShowAll') }}</a>)
+              </small>
+            </td>
+            <td>
+              <img :height="16" :width="16" :src="browser_logo" />{{ browser_name }}
+            </td>
+          </tr>
+          <tr>
+            <td>{{ translate('CorePluginsAdmin_Version') }}</td>
+            <td>{{ browser_version }}</td>
+          </tr>
+          <tr>
+            <td>
+              {{ translate('DevicesDetection_BrowserFamily') }}
+              <small>
+                (<a
+                  href=""
+                  @click.prevent="showList('browserfamilies')"
+                >{{ translate('Mobile_ShowAll') }}</a>)
+              </small>
+            </td>
+            <td>
+              <img :height="16" :width="16" :src="browser_family_logo" />{{ browser_family }}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+
+        <h3>{{ translate('DevicesDetection_Device') }}</h3>
+        <table class="detection" v-content-table>
+          <tbody>
+          <tr>
+            <td>
+              {{ translate('DevicesDetection_dataTableLabelTypes') }}
+              <small>
+                (<a
+                  href=""
+                  @click.prevent="showList('devicetypes')"
+                >{{ translate('Mobile_ShowAll') }}</a>)
+              </small>
+            </td>
+            <td><img :height="16" :width="16" :src="device_type_logo" />{{ device_type }}</td>
+          </tr>
+          <tr>
+            <td>
+              {{ translate('DevicesDetection_dataTableLabelBrands') }}
+              <small>
+                (<a
+                  href=""
+                  @click.prevent="showList('brands')"
+                >{{ translate('Mobile_ShowAll') }}</a>)
+              </small>
+            </td>
+            <td><img :height="16" :width="16" :src="device_brand_logo" />{{ device_brand }}</td>
+          </tr>
+          <tr>
+            <td>{{ translate('DevicesDetection_dataTableLabelModels') }}</td>
+            <td>{{ device_model }}</td>
+          </tr></tbody>
+        </table>
+      </div>
+    </ContentBlock>
+
+    <div class="ui-confirm" id="deviceDetectionItemList" ref="deviceDetectionItemList">
+      <div class="itemList" v-html="$sanitize(itemListHtml)"></div>
+      <input role="close" type="button" :value="translate('General_Close')"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  Matomo,
+  ContentBlock,
+  ContentTable,
+  AjaxHelper,
+} from 'CoreHome';
+
+interface DetectionPageState {
+  itemListHtml: string;
+  considerClientHints: boolean;
+  clientHintsText: string;
+  userAgentText: string;
+  defaultClientHints: Record<string, string>|null;
+}
+
+function isClientHintsSupported() {
+  const nav = navigator as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  return nav.userAgentData && typeof nav.userAgentData.getHighEntropyValues === 'function';
+}
+
+let clientHints: Record<string, string>|null = null;
+
+function getDefaultClientHints(): Promise<Record<string, string>|null> {
+  const nav = navigator as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  if (!isClientHintsSupported()) {
+    return Promise.resolve(null);
+  }
+
+  if (clientHints) {
+    return Promise.resolve(clientHints!);
+  }
+
+  // Initialize with low entropy values that are always available
+  clientHints = {
+    brands: nav.userAgentData.brands,
+    platform: nav.userAgentData.platform,
+  };
+
+  // try to gather high entropy values
+  // currently this methods simply returns the requested values through a Promise
+  // In later versions it might require a user permission
+  return nav.userAgentData.getHighEntropyValues(
+    ['brands', 'model', 'platform', 'platformVersion', 'uaFullVersion', 'fullVersionList'],
+  ).then((ua: any) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+    clientHints = { ...ua };
+
+    if (clientHints!.fullVersionList) {
+      // if fullVersionList is available, brands and uaFullVersion isn't needed
+      delete clientHints!.brands;
+      delete clientHints!.uaFullVersion;
+    }
+
+    return clientHints!;
+  });
+}
+
+export default defineComponent({
+  props: {
+    userAgent: {
+      type: String,
+      required: true,
+    },
+    bot_info: Object,
+    os_logo: String,
+    os_name: String,
+    os_version: String,
+    os_family_logo: String,
+    os_family: String,
+    browser_logo: String,
+    browser_name: String,
+    browser_version: String,
+    browser_family: String,
+    browser_family_logo: String,
+    device_type_logo: String,
+    device_type: String,
+    device_brand_logo: String,
+    device_brand: String,
+    device_model: String,
+    clientHintsChecked: Boolean,
+  },
+  components: {
+    ContentBlock,
+  },
+  directives: {
+    ContentTable,
+  },
+  created() {
+    getDefaultClientHints().then((hints) => {
+      this.defaultClientHints = hints;
+      this.toggleClientHints();
+    });
+  },
+  data(): DetectionPageState {
+    return {
+      itemListHtml: '',
+      considerClientHints: !!this.clientHintsChecked,
+      clientHintsText: '',
+      userAgentText: this.userAgent,
+      defaultClientHints: null,
+    };
+  },
+  methods: {
+    showList(type: string) {
+      AjaxHelper.fetch<string>(
+        {
+          module: 'DevicesDetection',
+          action: 'showList',
+          type,
+        },
+        {
+          format: 'html',
+        },
+      ).then((response) => {
+        this.itemListHtml = response;
+        Matomo.helper.modalConfirm(
+          this.$refs.deviceDetectionItemList as HTMLElement,
+          undefined,
+          { fixedFooter: true },
+        );
+      });
+    },
+    toggleClientHints() {
+      if (this.considerClientHints && this.defaultClientHints !== null) {
+        this.clientHintsText = this.clientHintsText || JSON.stringify(this.defaultClientHints);
+      } else {
+        this.clientHintsText = '';
+      }
+    },
+  },
+  computed: {
+    isClientHintsSupported() {
+      return isClientHintsSupported();
+    },
+  },
+});
+</script>
diff --git a/plugins/DevicesDetection/vue/src/index.ts b/plugins/DevicesDetection/vue/src/index.ts
new file mode 100644
index 0000000000..93b495b279
--- /dev/null
+++ b/plugins/DevicesDetection/vue/src/index.ts
@@ -0,0 +1,8 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+*/
+
+export { default as DetectionPage } from './DetectionPage/DetectionPage.vue';