[Vue] migrate transitions plugin to Vue (#19005)

* migrate transition exporter to Vue

* migrate transition switcher to Vue

* get ui tests to pass locally + test manually

* compile vue entry components for dashboard widgets

* fix export in dashboard

* fix warning caused by empty translation key

16 files changed, 1231 insertions, 327 deletions

diff --git a/plugins/Transitions/Transitions.php b/plugins/Transitions/Transitions.php
index aae4211596..5f5367988f 100644
--- a/plugins/Transitions/Transitions.php
+++ b/plugins/Transitions/Transitions.php
@@ -38,14 +38,12 @@ class Transitions extends \Piwik\Plugin
     public function getStylesheetFiles(&$stylesheets)
     {
         $stylesheets[] = 'plugins/Transitions/stylesheets/transitions.less';
-        $stylesheets[] = 'plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less';
+        $stylesheets[] = 'plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less';
     }
 
     public function getJsFiles(&$jsFiles)
     {
         $jsFiles[] = 'plugins/Transitions/javascripts/transitions.js';
-        $jsFiles[] = 'plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js';
-        $jsFiles[] = 'plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js';
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)
@@ -58,6 +56,13 @@ class Transitions extends \Piwik\Plugin
         $translationKeys[] = 'Transitions_Transitions';
         $translationKeys[] = 'CoreHome_ThereIsNoDataForThisReport';
         $translationKeys[] = 'General_Others';
+        $translationKeys[] = 'Actions_ActionType';
+        $translationKeys[] = 'Transitions_TopX';
+        $translationKeys[] = 'Transitions_AvailableInOtherReports';
+        $translationKeys[] = 'Actions_SubmenuPageTitles';
+        $translationKeys[] = 'Actions_SubmenuPagesEntry';
+        $translationKeys[] = 'Actions_SubmenuPagesExit';
+        $translationKeys[] = 'Transitions_AvailableInOtherReports2';
     }
 
     public function addJsGlobalVariables(&$out)
diff --git a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js b/plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js
deleted file mode 100644
index f26a448d13..0000000000
--- a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-(function () {
-
-    angular.module("piwikApp").directive('transitionExporter', transitionExporter);
-    transitionExporter.$inject = ['$document', 'piwik', '$compile', '$timeout', '$location', '$httpParamSerializerJQLike', '$rootScope'];
-
-    function transitionExporter($document, piwik, $compile, $timeout, $location, $httpParamSerializerJQLike, $rootScope) {
-
-        return {
-            restrict: 'A',
-            link: function(scope, element) {
-
-                scope.getExportLink = function() {
-
-                    var exportUrlParams = {
-                        module: 'API'
-                    };
-
-                    exportUrlParams.method = 'Transitions.getTransitionsForAction';
-                    exportUrlParams.actionType = $rootScope.transitionExportParams['actionType'];
-                    exportUrlParams.actionName = $rootScope.transitionExportParams['actionName'];
-
-                    exportUrlParams.idSite = piwik.idSite;
-                    exportUrlParams.period = piwik.period;
-                    exportUrlParams.date = piwik.currentDateString;
-                    exportUrlParams.format = scope.exportFormat;
-                    exportUrlParams.token_auth = piwik.token_auth;
-                    exportUrlParams.force_api_session = 1;
-
-                    var currentUrl = $location.absUrl();
-                    var urlParts = currentUrl.split('/');
-                    urlParts.pop();
-                    var url = urlParts.join('/');
-
-                    return url + '/index.php?' + $httpParamSerializerJQLike(exportUrlParams);
-                }
-
-                $rootScope.$on('Transitions.dataChanged', function (event, params) {
-                    $rootScope.transitionExportParams = params;
-                });
-
-                scope.onExportFormatChange = function (format) {
-                    scope.exportFormat = format;
-                }
-
-                element.on('click', function () {
-
-                    scope.exportFormat = 'JSON';
-                    scope.exportFormatOptions = [
-                        {key: 'JSON', value: 'JSON'},
-                        {key: 'XML', value: 'XML'}
-                    ];
-
-                    if (!$rootScope.transitionExportParams) {
-                        return;
-                    }
-
-                    scope.reportTitle = $rootScope.transitionExportParams['actionName'] + ' ' + _pk_translate('Transitions_Transitions');
-
-                    this.popover = Piwik_Popover.showLoading(_pk_translate('General_Export'), self.actionName, 200);
-
-                    var elem = $document.find('#transitionExport').eq(0);
-                    if (!elem.length) {
-                        elem = angular.element('<span id="transitionExport"></span>');
-                        elem.attr('ng-include', "'plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html?cb=' + encodeURIComponent(piwik.cacheBuster) + '\'");
-                    }
-
-                    $compile(elem)(scope, function (compiled){
-                        Piwik_Popover.setTitle(_pk_translate('General_Export') + ' ' + piwikHelper.htmlEntities(scope.reportTitle));
-                        Piwik_Popover.setContent(compiled);
-                    });
-
-                });
-            }
-        };
-    }
-})();
diff --git a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html b/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html
deleted file mode 100644
index 76f1b74f6f..0000000000
--- a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="transition-export-popover row">
-
-    <div class="col l6">
-        <div class="input-field">
-            <div piwik-field uicontrol="radio" name="exportFormat"
-                 data-title="{{ 'CoreHome_ExportFormat'|translate }}"
-                 ng-change="onExportFormatChange(exportFormat)"
-                 ng-model="exportFormat"
-                 full-width="true"
-                 value="JSON"
-                 options="exportFormatOptions">
-            </div>
-        </div>
-
-    </div>
-
-    <div class="col l12">
-        <a class="btn" ng-attr-href="{{ getExportLink() }}" target="_new" title="{{ 'CoreHome_ExportTooltip'|translate }}">{{ 'General_Export'|translate }}</a>
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js b/plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js
deleted file mode 100644
index 4195ba495a..0000000000
--- a/plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-(function () {
-    angular.module('piwikApp').controller('TransitionSwitcherController', TransitionSwitcherController);
-
-    TransitionSwitcherController.$inject = ['piwikApi', '$filter', '$rootScope'];
-
-    function TransitionSwitcherController(piwikApi, $filter, $rootScope) {
-        var translate = $filter('translate');
-
-        var self = this;
-        this.actionType = 'Actions.getPageUrls';
-        this.actionNameOptions = [];
-        this.actionTypeOptions = [
-            {key: 'Actions.getPageUrls', value: translate('Actions_PageUrls')},
-            {key: 'Actions.getPageTitles', value: translate('Actions_WidgetPageTitles')}
-        ];
-        this.isLoading = false;
-        this.transitions = null;
-        this.actionName = null;
-        this.isEnabled = true;
-        var noDataKey = '_____ignore_____';
-
-        this.detectActionName = function (reports)
-        {
-            var othersLabel = translate('General_Others');
-
-            var label, report;
-            for (var i = 0; i < reports.length; i++) {
-                if (!reports[i]) {
-                    continue;
-                }
-
-                report = reports[i];
-
-                if (report.label === othersLabel) {
-                    continue;
-                }
-
-                var key = null;
-                if (self.isUrlReport()) {
-                    key = report.url
-                } else {
-                    key = report.label;
-                }
-
-                if (key) {
-                    label = report.label + ' (' + translate('Transitions_NumPageviews', report.nb_hits) + ')';
-                    self.actionNameOptions.push({key: key, value: label, url: report.url});
-                    if (!self.actionName) {
-                        self.actionName = key
-                    }
-                }
-            }
-        }
-
-        this.isUrlReport = function()
-        {
-            return this.actionType === 'Actions.getPageUrls';
-        }
-
-        this.fetch = function (type) {
-            this.isLoading = true;
-            this.actionNameOptions = [];
-            this.actionName = null;
-
-            piwikApi.fetch({
-                method: type,
-                flat: 1, filter_limit: 100,
-                filter_sort_order: 'desc',
-                filter_sort_column: 'nb_hits',
-                showColumns: 'label,nb_hits,url'
-            }).then(function (report) {
-                self.isLoading = false;
-                self.actionNameOptions = [];
-                self.actionName = null;
-
-                if (report && report.length) {
-                    self.isEnabled = true;
-                    self.detectActionName(report);
-                    self.onActionNameChange(self.actionName);
-                }
-
-                if (null === self.actionName || self.actionNameOptions.length === 0) {
-                    self.isEnabled = false;
-                    self.actionName = noDataKey;
-                    self.actionNameOptions.push({key: noDataKey, value: translate('CoreHome_ThereIsNoDataForThisReport')});
-                }
-            }, function () {
-                self.isLoading = false;
-                self.isEnabled = false;
-            });
-        }
-
-        this.onActionTypeChange = function (actionName) {
-            this.fetch(actionName);
-        };
-
-        this.onActionNameChange = function (actionName) {
-            if (actionName === null || actionName === noDataKey) {
-                return;
-            }
-
-            var type = 'url';
-            if (!this.isUrlReport()) {
-                type = 'title';
-            }
-            if (!this.transitions) {
-                this.transitions = new Piwik_Transitions(type, actionName, null, '');
-            } else {
-                this.transitions.reset(type, actionName, '');
-            }
-            this.transitions.showPopover(true);
-        };
-
-        $rootScope.$on('Transitions.switchTransitionsUrl', function (event, params) {
-            if (params && params.url) {
-                if (self.isUrlReport()) {
-                    params.url = params.url.replace('https://', '').replace('http://', '');
-                }
-
-                var found = false, option, optionUrl;
-                for (var i = 0; i < self.actionNameOptions.length; i++) {
-                    option = self.actionNameOptions[i];
-                    optionUrl = option.url;
-                    if (optionUrl && self.isUrlReport()) {
-                        optionUrl = String(optionUrl).replace('https://', '').replace('http://', '');
-                    } else {
-                        optionUrl = null;
-                    }
-
-                    if (!found && (option.key === params.url || (params.url === optionUrl && optionUrl))) {
-                        found = true;
-                        self.actionName = option.key;
-                    }
-                }
-                if (!found) {
-                    // we only fetch top 100 in the report... so the entry the user clicked on, might not be in the top 100
-                    var options = angular.copy(self.actionNameOptions); // somehow needed to force angular to render it
-                    options.push({key: params.url, value: params.url});
-                    self.actionNameOptions = options;
-                    self.actionName = params.url;
-                }
-                self.onActionNameChange(self.actionName);
-            }
-        });
-
-        this.fetch(this.actionType);
-    }
-})();
\ No newline at end of file
diff --git a/plugins/Transitions/javascripts/transitions.js b/plugins/Transitions/javascripts/transitions.js
index caabaa0b69..f8d0bf8749 100644
--- a/plugins/Transitions/javascripts/transitions.js
+++ b/plugins/Transitions/javascripts/transitions.js
@@ -249,7 +249,7 @@ Piwik_Transitions.prototype.showPopover = function (showEmbeddedInReport) {
         if (!showEmbeddedInReport) {
             Piwik_Popover.setContent(Piwik_Transitions.popoverHtml);
         } else {
-            $('#transitions_inline_loading').hide();
+          $('#transitions_inline_loading').hide();
             $('#transitions_report .popoverContainer').html(Piwik_Transitions.popoverHtml);
             $('#transitions_report .popoverContainer').show();
         }
@@ -1620,7 +1620,7 @@ Piwik_Transitions_Ajax.prototype.callApi = function (method, params, callback) {
                         Piwik_Popover.showError(errorTitle, errorMessage, errorBack);
                     }
 
-                    $('#transitions_inline_loading').hide();
+                  $('#transitions_inline_loading').hide();
                 };
 
                 if (typeof Piwik_Transitions_Translations == 'undefined') {
diff --git a/plugins/Transitions/templates/transitions.twig b/plugins/Transitions/templates/transitions.twig
index 3cb0a6354e..beb54a04d0 100644
--- a/plugins/Transitions/templates/transitions.twig
+++ b/plugins/Transitions/templates/transitions.twig
@@ -3,66 +3,10 @@
                           help-url="https://matomo.org/docs/transitions/"
                           content-title="{{ 'Transitions_Transitions'|translate|e('html_attr') }}">{% endif %}
 
-<div id="transitions_report" {% if isWidget %}class="widgetBody"{% endif %} ng-controller="TransitionSwitcherController as transitionSwitcher">
-    <div class="row"> 
-        <div class="col s12 m3">
-            <div piwik-field uicontrol="select" name="actionType"
-                 ng-model="transitionSwitcher.actionType"
-                 ng-change="transitionSwitcher.onActionTypeChange(transitionSwitcher.actionType)"
-                 data-title="{{ 'Actions_ActionType'|translate|e('html_attr') }}"
-                 full-width="true"
-                 options='transitionSwitcher.actionTypeOptions'>
-            </div>
-        </div>
-        <div class="col s12 m9">
-            <div piwik-field uicontrol="select" name="actionName"
-                 ng-model="transitionSwitcher.actionName"
-                 ng-change="transitionSwitcher.onActionNameChange(transitionSwitcher.actionName)"
-                 data-title="{{ 'Transitions_TopX'|translate(100)|e('html_attr') }}"
-                 full-width="true"
-                 data-disabled="!transitionSwitcher.isEnabled"
-                 options='transitionSwitcher.actionNameOptions'>
-            </div>
-        </div>
-    </div>
-
-    <div piwik-activity-indicator loading="transitionSwitcher.isLoading"></div>
-
-    <div class="loadingPiwik" ng-show="!transitionSwitcher.isLoading" style="display:none" id="transitions_inline_loading">
-        <img src="plugins/Morpheus/images/loading-blue.gif" alt=""/> <span>{{ 'General_LoadingData'|translate }}</span>
-    </div>
-
-    <div class="popoverContainer" ng-show="!transitionSwitcher.isLoading && transitionSwitcher.isEnabled">
-
-    </div>
-
-    <div id="Transitions_Error_Container" ng-show="!transitionSwitcher.isLoading">
-
-    </div>
-
-    <div class="dataTableWrapper" ng-show="transitionSwitcher.isEnabled">
-        <div class="dataTableFeatures">
-            <div class="dataTableFooterNavigation">
-                <div class="dataTableControls">
-                    <div class="row">
-                        <a class="dataTableAction" href="javascript:;" transition-exporter>
-                            <span class="icon-export"></span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="alert alert-info">
-        {{ 'Transitions_AvailableInOtherReports'|translate }}
-        {{ 'Actions_PageUrls'|translate }}, {{ 'Actions_SubmenuPageTitles'|translate }},
-        {{ 'Actions_SubmenuPagesEntry'|translate }}
-        {{ 'General_And'|translate }}
-        {{ 'Actions_SubmenuPagesExit'|translate }}.
-        {{ 'Transitions_AvailableInOtherReports2'|translate('<span class="icon-transition"></span>')|raw }}
-    </div>
-</div>
+<div
+  vue-entry="Transitions.TransitionSwitcher"
+  is-widget="{{ (not not isWidget)|default(null)|json_encode|e('html_attr') }}"
+></div>
 
 {% if not isWidget %}</div>{% endif %}
 
diff --git a/plugins/Transitions/vue/dist/Transitions.umd.js b/plugins/Transitions/vue/dist/Transitions.umd.js
new file mode 100644
index 0000000000..1cfd8c03ef
--- /dev/null
+++ b/plugins/Transitions/vue/dist/Transitions.umd.js
@@ -0,0 +1,672 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", , "CorePluginsAdmin"], factory);
+	else if(typeof exports === 'object')
+		exports["Transitions"] = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else
+		root["Transitions"] = factory(root["CoreHome"], root["Vue"], root["CorePluginsAdmin"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__, __WEBPACK_EXTERNAL_MODULE_a5a2__) {
+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/Transitions/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__;
+
+/***/ }),
+
+/***/ "a5a2":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_a5a2__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "TransitionExporter", function() { return /* reexport */ TransitionExporter; });
+__webpack_require__.d(__webpack_exports__, "TransitionSwitcher", function() { return /* reexport */ TransitionSwitcher; });
+
+// 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 "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// 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/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=template&id=35161b10
+
+var _hoisted_1 = {
+  class: "transition-export-popover row"
+};
+var _hoisted_2 = {
+  class: "col l6"
+};
+var _hoisted_3 = {
+  class: "input-field"
+};
+var _hoisted_4 = {
+  class: "matomo-field"
+};
+var _hoisted_5 = {
+  class: "col l12"
+};
+var _hoisted_6 = ["href"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  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_["createElementVNode"])("div", _hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "radio",
+    name: "exportFormat",
+    title: _ctx.translate('CoreHome_ExportFormat'),
+    "model-value": _ctx.exportFormat,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.exportFormat = $event;
+    }),
+    "full-width": true,
+    options: _ctx.exportFormatOptions
+  }, null, 8, ["title", "model-value", "options"])])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_5, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    class: "btn",
+    href: _ctx.exportLink,
+    target: "_new",
+    title: "translate('CoreHome_ExportTooltip')"
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Export')), 9, _hoisted_6)])]);
+}
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=template&id=35161b10
+
+// EXTERNAL MODULE: external "CorePluginsAdmin"
+var external_CorePluginsAdmin_ = __webpack_require__("a5a2");
+
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+var actionType = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])('');
+var actionName = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])('');
+
+var onDataChanged = function onDataChanged(params) {
+  actionType.value = params.actionType;
+  actionName.value = params.actionName;
+};
+
+external_CoreHome_["Matomo"].on('Transitions.dataChanged', onDataChanged);
+
+// 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/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=script&lang=ts
+
+
+
+
+/* harmony default export */ var TransitionExporterPopovervue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    exportFormatOptions: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"]
+  },
+  data: function data() {
+    return {
+      exportFormat: 'JSON'
+    };
+  },
+  computed: {
+    exportLink: function exportLink() {
+      var exportUrlParams = {
+        module: 'API'
+      };
+      exportUrlParams.method = 'Transitions.getTransitionsForAction';
+      exportUrlParams.actionType = actionType.value;
+      exportUrlParams.actionName = actionName.value;
+      exportUrlParams.idSite = external_CoreHome_["Matomo"].idSite;
+      exportUrlParams.period = external_CoreHome_["Matomo"].period;
+      exportUrlParams.date = external_CoreHome_["Matomo"].currentDateString;
+      exportUrlParams.format = this.exportFormat;
+      exportUrlParams.token_auth = external_CoreHome_["Matomo"].token_auth;
+      exportUrlParams.force_api_session = 1;
+      var currentUrl = window.location.href;
+      var urlParts = currentUrl.split('/');
+      urlParts.pop();
+      var url = urlParts.join('/');
+      return "".concat(url, "/index.php?").concat(external_CoreHome_["MatomoUrl"].stringify(exportUrlParams));
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue
+
+
+
+TransitionExporterPopovervue_type_script_lang_ts.render = render
+
+/* harmony default export */ var TransitionExporterPopover = (TransitionExporterPopovervue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+
+var _window = window,
+    Piwik_Popover = _window.Piwik_Popover;
+/* harmony default export */ var TransitionExporter = ({
+  mounted: function mounted(element) {
+    element.addEventListener('click', function (e) {
+      e.preventDefault();
+      var props = {
+        exportFormat: 'JSON',
+        exportFormatOptions: [{
+          key: 'JSON',
+          value: 'JSON'
+        }, {
+          key: 'XML',
+          value: 'XML'
+        }]
+      };
+      var app = Object(external_CoreHome_["createVueApp"])({
+        template: "\n          <popover v-bind=\"bind\"/>",
+        data: function data() {
+          return {
+            bind: props
+          };
+        }
+      });
+      app.component('popover', TransitionExporterPopover);
+      var mountPoint = document.createElement('div');
+      app.mount(mountPoint);
+      Piwik_Popover.showLoading('');
+      Piwik_Popover.setTitle("".concat(actionName.value, " ").concat(Object(external_CoreHome_["translate"])('Transitions_Transitions')));
+      Piwik_Popover.setContent(mountPoint);
+      Piwik_Popover.onClose(function () {
+        app.unmount();
+      });
+    });
+  }
+});
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+function transitionExporter() {
+  return {
+    restrict: 'A',
+    link: function link(scope, element) {
+      TransitionExporter.mounted(element[0]);
+    }
+  };
+}
+
+window.angular.module('piwikApp').directive('transitionExporter', transitionExporter);
+// 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/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=template&id=322cd92a
+
+var TransitionSwitchervue_type_template_id_322cd92a_hoisted_1 = {
+  class: "row"
+};
+var TransitionSwitchervue_type_template_id_322cd92a_hoisted_2 = {
+  class: "col s12 m3"
+};
+var TransitionSwitchervue_type_template_id_322cd92a_hoisted_3 = {
+  name: "actionType"
+};
+var TransitionSwitchervue_type_template_id_322cd92a_hoisted_4 = {
+  class: "col s12 m9"
+};
+var TransitionSwitchervue_type_template_id_322cd92a_hoisted_5 = {
+  name: "actionName"
+};
+var TransitionSwitchervue_type_template_id_322cd92a_hoisted_6 = {
+  class: "loadingPiwik",
+  style: {
+    "display": "none"
+  },
+  id: "transitions_inline_loading"
+};
+
+var _hoisted_7 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+  src: "plugins/Morpheus/images/loading-blue.gif",
+  alt: ""
+}, null, -1);
+
+var _hoisted_8 = {
+  class: "popoverContainer"
+};
+var _hoisted_9 = {
+  id: "Transitions_Error_Container"
+};
+var _hoisted_10 = {
+  class: "dataTableWrapper"
+};
+var _hoisted_11 = {
+  class: "dataTableFeatures"
+};
+var _hoisted_12 = {
+  class: "dataTableFooterNavigation"
+};
+var _hoisted_13 = {
+  class: "dataTableControls"
+};
+var _hoisted_14 = {
+  class: "row"
+};
+var _hoisted_15 = {
+  class: "dataTableAction"
+};
+
+var _hoisted_16 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+  class: "icon-export"
+}, null, -1);
+
+var _hoisted_17 = [_hoisted_16];
+var _hoisted_18 = {
+  class: "alert alert-info"
+};
+var _hoisted_19 = ["innerHTML"];
+function TransitionSwitchervue_type_template_id_322cd92a_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  var _component_ActivityIndicator = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ActivityIndicator");
+
+  var _directive_transition_exporter = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("transition-exporter");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])({
+      widgetBody: _ctx.isWidget
+    }),
+    id: "transitions_report"
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_322cd92a_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_322cd92a_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_322cd92a_hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "select",
+    name: "actionType",
+    modelValue: _ctx.actionType,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.actionType = $event;
+    }),
+    title: _ctx.translate('Actions_ActionType'),
+    "full-width": true,
+    options: _ctx.actionTypeOptions
+  }, null, 8, ["modelValue", "title", "options"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_322cd92a_hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_322cd92a_hoisted_5, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "select",
+    name: "actionName",
+    modelValue: _ctx.actionName,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.actionName = $event;
+    }),
+    title: _ctx.translate('Transitions_TopX', 100),
+    "full-width": true,
+    disabled: !_ctx.isEnabled,
+    options: _ctx.actionNameOptions
+  }, null, 8, ["modelValue", "title", "disabled", "options"])])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    loading: _ctx.isLoading
+  }, null, 8, ["loading"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_322cd92a_hoisted_6, [_hoisted_7, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_LoadingData')), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_8, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !_ctx.isLoading && _ctx.isEnabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_9, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !_ctx.isLoading]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_10, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_11, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_12, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_13, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_14, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", _hoisted_15, _hoisted_17, 512), [[_directive_transition_exporter]])])])])])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.isEnabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_18, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Transitions_AvailableInOtherReports')) + " " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_PageUrls')) + ", " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_SubmenuPageTitles')) + ", " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_SubmenuPagesEntry')) + " " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_And')) + " " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_SubmenuPagesExit')) + ". ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    innerHTML: _ctx.availableInOtherReports2
+  }, null, 8, _hoisted_19)])], 2);
+}
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=template&id=322cd92a
+
+// 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/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=script&lang=ts
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+
+
+
+
+/* harmony default export */ var TransitionSwitchervue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    isWidget: Boolean
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    ActivityIndicator: external_CoreHome_["ActivityIndicator"]
+  },
+  directives: {
+    TransitionExporter: TransitionExporter
+  },
+  data: function data() {
+    return {
+      actionType: 'Actions.getPageUrls',
+      actionNameOptions: [],
+      actionTypeOptions: [{
+        key: 'Actions.getPageUrls',
+        value: Object(external_CoreHome_["translate"])('Actions_PageUrls')
+      }, {
+        key: 'Actions.getPageTitles',
+        value: Object(external_CoreHome_["translate"])('Actions_WidgetPageTitles')
+      }],
+      isLoading: false,
+      actionName: null,
+      isEnabled: true,
+      noDataKey: '_____ignore_____'
+    };
+  },
+  setup: function setup() {
+    var transitionsInstance = null;
+    var transitionsUrl = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])();
+
+    var onSwitchTransitionsUrl = function onSwitchTransitionsUrl(params) {
+      if (params !== null && params !== void 0 && params.url) {
+        transitionsUrl.value = params.url;
+      }
+    };
+
+    external_CoreHome_["Matomo"].on('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeUnmount"])(function () {
+      external_CoreHome_["Matomo"].off('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+    });
+
+    var createTransitionsInstance = function createTransitionsInstance(type, actionName) {
+      if (!transitionsInstance) {
+        transitionsInstance = new window.Piwik_Transitions(type, actionName, null, '');
+      } else {
+        transitionsInstance.reset(type, actionName, '');
+      }
+    };
+
+    var getTransitionsInstance = function getTransitionsInstance() {
+      return transitionsInstance;
+    };
+
+    return {
+      transitionsUrl: transitionsUrl,
+      createTransitionsInstance: createTransitionsInstance,
+      getTransitionsInstance: getTransitionsInstance
+    };
+  },
+  watch: {
+    transitionsUrl: function transitionsUrl(newValue) {
+      var _this = this;
+
+      var url = newValue;
+
+      if (this.isUrlReport) {
+        url = url.replace('https://', '').replace('http://', '');
+      }
+
+      var found = this.actionNameOptions.find(function (option) {
+        var optionUrl = option.url;
+
+        if (optionUrl && _this.isUrlReport) {
+          optionUrl = String(optionUrl).replace('https://', '').replace('http://', '');
+        } else {
+          optionUrl = undefined;
+        }
+
+        return option.key === url || url === optionUrl && optionUrl;
+      });
+
+      if (found) {
+        this.actionName = found.key;
+      } else {
+        // we only fetch top 100 in the report... so the entry the user clicked on, might not
+        // be in the top 100
+        this.actionNameOptions = [].concat(_toConsumableArray(this.actionNameOptions), [{
+          key: url,
+          value: url
+        }]);
+        this.actionName = url;
+      }
+    },
+    actionName: function actionName(newValue) {
+      if (newValue === null || newValue === this.noDataKey) {
+        return;
+      }
+
+      var type = this.isUrlReport ? 'url' : 'title';
+      this.createTransitionsInstance(type, newValue);
+      this.getTransitionsInstance().showPopover(true);
+    },
+    actionType: function actionType(newValue) {
+      this.fetch(newValue);
+    }
+  },
+  created: function created() {
+    this.fetch(this.actionType);
+  },
+  methods: {
+    detectActionName: function detectActionName(reports) {
+      var _this2 = this;
+
+      var othersLabel = Object(external_CoreHome_["translate"])('General_Others');
+      reports.forEach(function (report) {
+        if (!report) {
+          return;
+        }
+
+        if (report.label === othersLabel) {
+          return;
+        }
+
+        var key = _this2.isUrlReport ? report.url : report.label;
+
+        if (key) {
+          var pageviews = Object(external_CoreHome_["translate"])('Transitions_NumPageviews', report.nb_hits);
+          var label = "".concat(report.label, " (").concat(pageviews, ")");
+
+          _this2.actionNameOptions.push({
+            key: key,
+            value: label,
+            url: report.url
+          });
+
+          if (!_this2.actionName) {
+            _this2.actionName = key;
+          }
+        }
+      });
+    },
+    fetch: function fetch(type) {
+      var _this3 = this;
+
+      this.isLoading = true;
+      this.actionNameOptions = [];
+      this.actionName = null;
+      external_CoreHome_["AjaxHelper"].fetch({
+        method: type,
+        flat: 1,
+        filter_limit: 100,
+        filter_sort_order: 'desc',
+        filter_sort_column: 'nb_hits',
+        showColumns: 'label,nb_hits,url'
+      }).then(function (report) {
+        _this3.isLoading = false;
+        _this3.actionNameOptions = [];
+        _this3.actionName = null;
+
+        if (report !== null && report !== void 0 && report.length) {
+          _this3.isEnabled = true;
+
+          _this3.detectActionName(report);
+        }
+
+        if (_this3.actionName === null || _this3.actionNameOptions.length === 0) {
+          _this3.isEnabled = false;
+          _this3.actionName = _this3.noDataKey;
+
+          _this3.actionNameOptions.push({
+            key: _this3.noDataKey,
+            value: Object(external_CoreHome_["translate"])('CoreHome_ThereIsNoDataForThisReport')
+          });
+        }
+      }).catch(function () {
+        _this3.isLoading = false;
+        _this3.isEnabled = false;
+      });
+    }
+  },
+  computed: {
+    isUrlReport: function isUrlReport() {
+      return this.actionType === 'Actions.getPageUrls';
+    },
+    availableInOtherReports2: function availableInOtherReports2() {
+      return Object(external_CoreHome_["translate"])('Transitions_AvailableInOtherReports2', '<span class="icon-transition"></span>');
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue
+
+
+
+TransitionSwitchervue_type_script_lang_ts.render = TransitionSwitchervue_type_template_id_322cd92a_render
+
+/* harmony default export */ var TransitionSwitcher = (TransitionSwitchervue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/Transitions/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=Transitions.umd.js.map
\ No newline at end of file
diff --git a/plugins/Transitions/vue/dist/Transitions.umd.min.js b/plugins/Transitions/vue/dist/Transitions.umd.min.js
new file mode 100644
index 0000000000..dc3a89e266
--- /dev/null
+++ b/plugins/Transitions/vue/dist/Transitions.umd.min.js
@@ -0,0 +1,27 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["Transitions"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["Transitions"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},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/Transitions/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"TransitionExporter",(function(){return N})),n.d(t,"TransitionSwitcher",(function(){return Q})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=n("19dc"),r=n("8bbf"),c={class:"transition-export-popover row"},l={class:"col l6"},s={class:"input-field"},u={class:"matomo-field"},d={class:"col l12"},p=["href"];function m(e,t,n,o,i,a){var m=Object(r["resolveComponent"])("Field");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",c,[Object(r["createElementVNode"])("div",l,[Object(r["createElementVNode"])("div",s,[Object(r["createElementVNode"])("div",u,[Object(r["createVNode"])(m,{uicontrol:"radio",name:"exportFormat",title:e.translate("CoreHome_ExportFormat"),"model-value":e.exportFormat,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.exportFormat=t}),"full-width":!0,options:e.exportFormatOptions},null,8,["title","model-value","options"])])])]),Object(r["createElementVNode"])("div",d,[Object(r["createElementVNode"])("a",{class:"btn",href:e.exportLink,target:"_new",title:"translate('CoreHome_ExportTooltip')"},Object(r["toDisplayString"])(e.translate("General_Export")),9,p)])])}var f=n("a5a2"),b=Object(r["ref"])(""),v=Object(r["ref"])(""),O=function(e){b.value=e.actionType,v.value=e.actionName};
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */a["Matomo"].on("Transitions.dataChanged",O);var h=Object(r["defineComponent"])({props:{exportFormatOptions:{type:Object,required:!0}},components:{Field:f["Field"]},data:function(){return{exportFormat:"JSON"}},computed:{exportLink:function(){var e={module:"API",method:"Transitions.getTransitionsForAction"};e.actionType=b.value,e.actionName=v.value,e.idSite=a["Matomo"].idSite,e.period=a["Matomo"].period,e.date=a["Matomo"].currentDateString,e.format=this.exportFormat,e.token_auth=a["Matomo"].token_auth,e.force_api_session=1;var t=window.location.href,n=t.split("/");n.pop();var o=n.join("/");return"".concat(o,"/index.php?").concat(a["MatomoUrl"].stringify(e))}}});h.render=m;var j=h,y=window,g=y.Piwik_Popover,N={mounted:function(e){e.addEventListener("click",(function(e){e.preventDefault();var t={exportFormat:"JSON",exportFormatOptions:[{key:"JSON",value:"JSON"},{key:"XML",value:"XML"}]},n=Object(a["createVueApp"])({template:'\n          <popover v-bind="bind"/>',data:function(){return{bind:t}}});n.component("popover",j);var o=document.createElement("div");n.mount(o),g.showLoading(""),g.setTitle("".concat(v.value," ").concat(Object(a["translate"])("Transitions_Transitions"))),g.setContent(o),g.onClose((function(){n.unmount()}))}))}};
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+function T(){return{restrict:"A",link:function(e,t){N.mounted(t[0])}}}window.angular.module("piwikApp").directive("transitionExporter",T);var _={class:"row"},E={class:"col s12 m3"},w={name:"actionType"},A={class:"col s12 m9"},V={name:"actionName"},x={class:"loadingPiwik",style:{display:"none"},id:"transitions_inline_loading"},S=Object(r["createElementVNode"])("img",{src:"plugins/Morpheus/images/loading-blue.gif",alt:""},null,-1),P={class:"popoverContainer"},C={id:"Transitions_Error_Container"},k={class:"dataTableWrapper"},D={class:"dataTableFeatures"},F={class:"dataTableFooterNavigation"},U={class:"dataTableControls"},M={class:"row"},I={class:"dataTableAction"},L=Object(r["createElementVNode"])("span",{class:"icon-export"},null,-1),H=[L],R={class:"alert alert-info"},q=["innerHTML"];function B(e,t,n,o,i,a){var c=Object(r["resolveComponent"])("Field"),l=Object(r["resolveComponent"])("ActivityIndicator"),s=Object(r["resolveDirective"])("transition-exporter");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",{class:Object(r["normalizeClass"])({widgetBody:e.isWidget}),id:"transitions_report"},[Object(r["createElementVNode"])("div",_,[Object(r["createElementVNode"])("div",E,[Object(r["createElementVNode"])("div",w,[Object(r["createVNode"])(c,{uicontrol:"select",name:"actionType",modelValue:e.actionType,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.actionType=t}),title:e.translate("Actions_ActionType"),"full-width":!0,options:e.actionTypeOptions},null,8,["modelValue","title","options"])])]),Object(r["createElementVNode"])("div",A,[Object(r["createElementVNode"])("div",V,[Object(r["createVNode"])(c,{uicontrol:"select",name:"actionName",modelValue:e.actionName,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.actionName=t}),title:e.translate("Transitions_TopX",100),"full-width":!0,disabled:!e.isEnabled,options:e.actionNameOptions},null,8,["modelValue","title","disabled","options"])])])]),Object(r["createVNode"])(l,{loading:e.isLoading},null,8,["loading"]),Object(r["createElementVNode"])("div",x,[S,Object(r["createElementVNode"])("span",null,Object(r["toDisplayString"])(e.translate("General_LoadingData")),1)]),Object(r["withDirectives"])(Object(r["createElementVNode"])("div",P,null,512),[[r["vShow"],!e.isLoading&&e.isEnabled]]),Object(r["withDirectives"])(Object(r["createElementVNode"])("div",C,null,512),[[r["vShow"],!e.isLoading]]),Object(r["withDirectives"])(Object(r["createElementVNode"])("div",k,[Object(r["createElementVNode"])("div",D,[Object(r["createElementVNode"])("div",F,[Object(r["createElementVNode"])("div",U,[Object(r["createElementVNode"])("div",M,[Object(r["withDirectives"])(Object(r["createElementVNode"])("a",I,H,512),[[s]])])])])])],512),[[r["vShow"],e.isEnabled]]),Object(r["createElementVNode"])("div",R,[Object(r["createTextVNode"])(Object(r["toDisplayString"])(e.translate("Transitions_AvailableInOtherReports"))+" "+Object(r["toDisplayString"])(e.translate("Actions_PageUrls"))+", "+Object(r["toDisplayString"])(e.translate("Actions_SubmenuPageTitles"))+", "+Object(r["toDisplayString"])(e.translate("Actions_SubmenuPagesEntry"))+" "+Object(r["toDisplayString"])(e.translate("General_And"))+" "+Object(r["toDisplayString"])(e.translate("Actions_SubmenuPagesExit"))+". ",1),Object(r["createElementVNode"])("span",{innerHTML:e.availableInOtherReports2},null,8,q)])],2)}function G(e){return X(e)||W(e)||K(e)||J()}function J(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function K(e,t){if(e){if("string"===typeof e)return $(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?$(e,t):void 0}}function W(e){if("undefined"!==typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function X(e){if(Array.isArray(e))return $(e)}function $(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var z=Object(r["defineComponent"])({props:{isWidget:Boolean},components:{Field:f["Field"],ActivityIndicator:a["ActivityIndicator"]},directives:{TransitionExporter:N},data:function(){return{actionType:"Actions.getPageUrls",actionNameOptions:[],actionTypeOptions:[{key:"Actions.getPageUrls",value:Object(a["translate"])("Actions_PageUrls")},{key:"Actions.getPageTitles",value:Object(a["translate"])("Actions_WidgetPageTitles")}],isLoading:!1,actionName:null,isEnabled:!0,noDataKey:"_____ignore_____"}},setup:function(){var e=null,t=Object(r["ref"])(),n=function(e){null!==e&&void 0!==e&&e.url&&(t.value=e.url)};a["Matomo"].on("Transitions.switchTransitionsUrl",n),Object(r["onBeforeUnmount"])((function(){a["Matomo"].off("Transitions.switchTransitionsUrl",n)}));var o=function(t,n){e?e.reset(t,n,""):e=new window.Piwik_Transitions(t,n,null,"")},i=function(){return e};return{transitionsUrl:t,createTransitionsInstance:o,getTransitionsInstance:i}},watch:{transitionsUrl:function(e){var t=this,n=e;this.isUrlReport&&(n=n.replace("https://","").replace("http://",""));var o=this.actionNameOptions.find((function(e){var o=e.url;return o=o&&t.isUrlReport?String(o).replace("https://","").replace("http://",""):void 0,e.key===n||n===o&&o}));o?this.actionName=o.key:(this.actionNameOptions=[].concat(G(this.actionNameOptions),[{key:n,value:n}]),this.actionName=n)},actionName:function(e){if(null!==e&&e!==this.noDataKey){var t=this.isUrlReport?"url":"title";this.createTransitionsInstance(t,e),this.getTransitionsInstance().showPopover(!0)}},actionType:function(e){this.fetch(e)}},created:function(){this.fetch(this.actionType)},methods:{detectActionName:function(e){var t=this,n=Object(a["translate"])("General_Others");e.forEach((function(e){if(e&&e.label!==n){var o=t.isUrlReport?e.url:e.label;if(o){var i=Object(a["translate"])("Transitions_NumPageviews",e.nb_hits),r="".concat(e.label," (").concat(i,")");t.actionNameOptions.push({key:o,value:r,url:e.url}),t.actionName||(t.actionName=o)}}}))},fetch:function(e){var t=this;this.isLoading=!0,this.actionNameOptions=[],this.actionName=null,a["AjaxHelper"].fetch({method:e,flat:1,filter_limit:100,filter_sort_order:"desc",filter_sort_column:"nb_hits",showColumns:"label,nb_hits,url"}).then((function(e){t.isLoading=!1,t.actionNameOptions=[],t.actionName=null,null!==e&&void 0!==e&&e.length&&(t.isEnabled=!0,t.detectActionName(e)),null!==t.actionName&&0!==t.actionNameOptions.length||(t.isEnabled=!1,t.actionName=t.noDataKey,t.actionNameOptions.push({key:t.noDataKey,value:Object(a["translate"])("CoreHome_ThereIsNoDataForThisReport")}))})).catch((function(){t.isLoading=!1,t.isEnabled=!1}))}},computed:{isUrlReport:function(){return"Actions.getPageUrls"===this.actionType},availableInOtherReports2:function(){return Object(a["translate"])("Transitions_AvailableInOtherReports2",'<span class="icon-transition"></span>')}}});z.render=B;var Q=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=Transitions.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Transitions/vue/dist/umd.metadata.json b/plugins/Transitions/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..dce4477a3c
--- /dev/null
+++ b/plugins/Transitions/vue/dist/umd.metadata.json
@@ -0,0 +1,6 @@
+{
+  "dependsOn": [
+    "CoreHome",
+    "CorePluginsAdmin"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts
new file mode 100644
index 0000000000..82f1a78ca5
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts
@@ -0,0 +1,20 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { IDirective } from 'angular';
+import TransitionExporter from './TransitionExporter';
+
+function transitionExporter(): IDirective {
+  return {
+    restrict: 'A',
+    link(scope, element) {
+      TransitionExporter.mounted(element[0]);
+    },
+  };
+}
+
+window.angular.module('piwikApp').directive('transitionExporter', transitionExporter);
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
new file mode 100644
index 0000000000..b9b6a0b7bd
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
@@ -0,0 +1,50 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { createVueApp, translate } from 'CoreHome';
+import TransitionExporterPopover from './TransitionExporterPopover';
+import { actionName } from './transitionParams';
+
+const { Piwik_Popover } = window;
+
+export default {
+  mounted(element: HTMLElement): void {
+    element.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      const props = {
+        exportFormat: 'JSON',
+        exportFormatOptions: [
+          { key: 'JSON', value: 'JSON' },
+          { key: 'XML', value: 'XML' },
+        ],
+      };
+
+      const app = createVueApp({
+        template: `
+          <popover v-bind="bind"/>`,
+        data() {
+          return {
+            bind: props,
+          };
+        },
+      });
+      app.component('popover', TransitionExporterPopover);
+
+      const mountPoint = document.createElement('div');
+      app.mount(mountPoint);
+
+      Piwik_Popover.showLoading('');
+      Piwik_Popover.setTitle(`${actionName.value} ${translate('Transitions_Transitions')}`);
+      Piwik_Popover.setContent(mountPoint);
+
+      Piwik_Popover.onClose(() => {
+        app.unmount();
+      });
+    });
+  },
+};
diff --git a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less
index 54b15e412c..c793232928 100644
--- a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less
@@ -27,7 +27,7 @@
     clear: both;
     float: none;
 
-    [piwik-field] {
+    .matomo-field {
       width: 50%;
       float: left;
     }
@@ -46,7 +46,7 @@
   }
 
   .tooltip > a {
-      color: @color-blue-piwik;
-      text-decoration: underline;
+    color: @color-blue-piwik;
+    text-decoration: underline;
   }
 }
\ No newline at end of file
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue
new file mode 100644
index 0000000000..b900645d31
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue
@@ -0,0 +1,91 @@
+<!--
+  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="transition-export-popover row">
+    <div class="col l6">
+      <div class="input-field">
+        <div class="matomo-field">
+          <Field
+            uicontrol="radio"
+            name="exportFormat"
+            :title="translate('CoreHome_ExportFormat')"
+            :model-value="exportFormat"
+            @update:model-value="exportFormat = $event"
+            :full-width="true"
+            :options="exportFormatOptions"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col l12">
+      <a
+        class="btn"
+        :href="exportLink"
+        target="_new"
+        title="translate('CoreHome_ExportTooltip')"
+      >
+        {{ translate('General_Export') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Matomo, MatomoUrl } from 'CoreHome';
+import { Field } from 'CorePluginsAdmin';
+import { actionType, actionName } from './transitionParams';
+
+interface TransitionExportPopoverState {
+  exportFormat: string;
+}
+
+export default defineComponent({
+  props: {
+    exportFormatOptions: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    Field,
+  },
+  data(): TransitionExportPopoverState {
+    return {
+      exportFormat: 'JSON',
+    };
+  },
+  computed: {
+    exportLink() {
+      const exportUrlParams: QueryParameters = {
+        module: 'API',
+      };
+
+      exportUrlParams.method = 'Transitions.getTransitionsForAction';
+      exportUrlParams.actionType = actionType.value;
+      exportUrlParams.actionName = actionName.value;
+
+      exportUrlParams.idSite = Matomo.idSite;
+      exportUrlParams.period = Matomo.period;
+      exportUrlParams.date = Matomo.currentDateString;
+      exportUrlParams.format = this.exportFormat;
+      exportUrlParams.token_auth = Matomo.token_auth;
+      exportUrlParams.force_api_session = 1;
+
+      const currentUrl = window.location.href;
+
+      const urlParts = currentUrl.split('/');
+      urlParts.pop();
+
+      const url = urlParts.join('/');
+      return `${url}/index.php?${MatomoUrl.stringify(exportUrlParams)}`;
+    },
+  },
+});
+</script>
diff --git a/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts b/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts
new file mode 100644
index 0000000000..f49b698cf9
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts
@@ -0,0 +1,29 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { ref } from 'vue';
+import { Matomo } from 'CoreHome';
+
+interface DataChangedParams {
+  actionType: string;
+  actionName: string;
+}
+
+const actionType = ref('');
+const actionName = ref('');
+
+const onDataChanged = (params: DataChangedParams) => {
+  actionType.value = params.actionType;
+  actionName.value = params.actionName;
+};
+
+Matomo.on('Transitions.dataChanged', onDataChanged);
+
+export {
+  actionType,
+  actionName,
+};
diff --git a/plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue b/plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue
new file mode 100644
index 0000000000..fc4b236221
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue
@@ -0,0 +1,308 @@
+<!--
+  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="{ widgetBody: isWidget }"
+    id="transitions_report"
+  >
+    <div class="row">
+      <div class="col s12 m3">
+        <div name="actionType">
+          <Field
+            uicontrol="select"
+            name="actionType"
+            v-model="actionType"
+            :title="translate('Actions_ActionType')"
+            :full-width="true"
+            :options="actionTypeOptions"
+          >
+          </Field>
+        </div>
+      </div>
+      <div class="col s12 m9">
+        <div name="actionName">
+          <Field
+            uicontrol="select"
+            name="actionName"
+            v-model="actionName"
+            :title="translate('Transitions_TopX', 100)"
+            :full-width="true"
+            :disabled="!isEnabled"
+            :options="actionNameOptions"
+          >
+          </Field>
+        </div>
+      </div>
+    </div>
+    <ActivityIndicator :loading="isLoading" />
+    <div
+      class="loadingPiwik"
+      style="display:none;"
+      id="transitions_inline_loading"
+    >
+      <img src="plugins/Morpheus/images/loading-blue.gif" alt/>
+      <span>{{ translate('General_LoadingData') }}</span>
+    </div>
+    <div
+      class="popoverContainer"
+      v-show="!isLoading && isEnabled"
+    >
+    </div>
+    <div
+      id="Transitions_Error_Container"
+      v-show="!isLoading"
+    >
+    </div>
+    <div
+      class="dataTableWrapper"
+      v-show="isEnabled"
+    >
+      <div class="dataTableFeatures">
+        <div class="dataTableFooterNavigation">
+          <div class="dataTableControls">
+            <div class="row">
+              <a
+                class="dataTableAction"
+                v-transition-exporter
+              >
+                <span class="icon-export" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="alert alert-info">
+      {{ translate('Transitions_AvailableInOtherReports') }}
+      {{ translate('Actions_PageUrls') }}, {{ translate('Actions_SubmenuPageTitles') }},
+      {{ translate('Actions_SubmenuPagesEntry') }}
+      {{ translate('General_And') }}
+      {{ translate('Actions_SubmenuPagesExit') }}.
+      <span v-html="availableInOtherReports2"></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeUnmount, ref } from 'vue';
+import {
+  translate,
+  AjaxHelper,
+  Matomo,
+  ActivityIndicator,
+} from 'CoreHome';
+import { Field } from 'CorePluginsAdmin';
+import TransitionExporter from '../TransitionExporter/TransitionExporter';
+
+interface Option {
+  key: string;
+  value: unknown;
+  url?: string;
+}
+
+interface TransitionSwitcherState {
+  actionType: string;
+  actionNameOptions: Option[];
+  actionTypeOptions: Option[];
+  isLoading: boolean;
+  actionName: string|null;
+  isEnabled: boolean;
+  noDataKey: string;
+}
+
+interface ActionReportRow {
+  label: string;
+  nb_hits: string|number;
+  segment: string;
+  url: string;
+}
+
+export default defineComponent({
+  props: {
+    isWidget: Boolean,
+  },
+  components: {
+    Field,
+    ActivityIndicator,
+  },
+  directives: {
+    TransitionExporter,
+  },
+  data(): TransitionSwitcherState {
+    return {
+      actionType: 'Actions.getPageUrls',
+      actionNameOptions: [],
+      actionTypeOptions: [
+        {
+          key: 'Actions.getPageUrls',
+          value: translate('Actions_PageUrls'),
+        }, {
+          key: 'Actions.getPageTitles',
+          value: translate('Actions_WidgetPageTitles'),
+        },
+      ],
+      isLoading: false,
+      actionName: null,
+      isEnabled: true,
+      noDataKey: '_____ignore_____',
+    };
+  },
+  setup() {
+    let transitionsInstance: Transitions|null = null;
+    const transitionsUrl = ref<null|string>();
+
+    const onSwitchTransitionsUrl = (params: { url: string }) => {
+      if (params?.url) {
+        transitionsUrl.value = params.url;
+      }
+    };
+
+    Matomo.on('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+
+    onBeforeUnmount(() => {
+      Matomo.off('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+    });
+
+    const createTransitionsInstance = (type: string, actionName: string) => {
+      if (!transitionsInstance) {
+        transitionsInstance = new window.Piwik_Transitions(type, actionName, null, '');
+      } else {
+        transitionsInstance.reset(type, actionName, '');
+      }
+    };
+
+    const getTransitionsInstance = () => transitionsInstance;
+
+    return {
+      transitionsUrl,
+      createTransitionsInstance,
+      getTransitionsInstance,
+    };
+  },
+  watch: {
+    transitionsUrl(newValue) {
+      let url = newValue;
+      if (this.isUrlReport) {
+        url = url.replace('https://', '').replace('http://', '');
+      }
+
+      const found = this.actionNameOptions.find((option) => {
+        let optionUrl = option.url;
+
+        if (optionUrl && this.isUrlReport) {
+          optionUrl = String(optionUrl).replace('https://', '').replace('http://', '');
+        } else {
+          optionUrl = undefined;
+        }
+
+        return option.key === url || (url === optionUrl && optionUrl);
+      });
+
+      if (found) {
+        this.actionName = found.key;
+      } else {
+        // we only fetch top 100 in the report... so the entry the user clicked on, might not
+        // be in the top 100
+        this.actionNameOptions = [
+          ...this.actionNameOptions,
+          { key: url, value: url },
+        ];
+        this.actionName = url;
+      }
+    },
+    actionName(newValue) {
+      if (newValue === null || newValue === this.noDataKey) {
+        return;
+      }
+
+      const type = this.isUrlReport ? 'url' : 'title';
+
+      this.createTransitionsInstance(type, newValue);
+
+      this.getTransitionsInstance()!.showPopover(true);
+    },
+    actionType(newValue) {
+      this.fetch(newValue);
+    },
+  },
+  created() {
+    this.fetch(this.actionType);
+  },
+  methods: {
+    detectActionName(reports: ActionReportRow[]) {
+      const othersLabel = translate('General_Others');
+
+      reports.forEach((report) => {
+        if (!report) {
+          return;
+        }
+
+        if (report.label === othersLabel) {
+          return;
+        }
+
+        const key = this.isUrlReport ? report.url : report.label;
+        if (key) {
+          const pageviews = translate('Transitions_NumPageviews', report.nb_hits as string);
+          const label = `${report.label} (${pageviews})`;
+          this.actionNameOptions.push({
+            key,
+            value: label,
+            url: report.url,
+          });
+
+          if (!this.actionName) {
+            this.actionName = key;
+          }
+        }
+      });
+    },
+    fetch(type: string) {
+      this.isLoading = true;
+      this.actionNameOptions = [];
+      this.actionName = null;
+      AjaxHelper.fetch<ActionReportRow[]>({
+        method: type,
+        flat: 1,
+        filter_limit: 100,
+        filter_sort_order: 'desc',
+        filter_sort_column: 'nb_hits',
+        showColumns: 'label,nb_hits,url',
+      }).then((report) => {
+        this.isLoading = false;
+        this.actionNameOptions = [];
+        this.actionName = null;
+
+        if (report?.length) {
+          this.isEnabled = true;
+          this.detectActionName(report);
+        }
+
+        if (this.actionName === null || this.actionNameOptions.length === 0) {
+          this.isEnabled = false;
+          this.actionName = this.noDataKey;
+          this.actionNameOptions.push({
+            key: this.noDataKey,
+            value: translate('CoreHome_ThereIsNoDataForThisReport'),
+          });
+        }
+      }).catch(() => {
+        this.isLoading = false;
+        this.isEnabled = false;
+      });
+    },
+  },
+  computed: {
+    isUrlReport() {
+      return this.actionType === 'Actions.getPageUrls';
+    },
+    availableInOtherReports2() {
+      return translate('Transitions_AvailableInOtherReports2', '<span class="icon-transition"></span>');
+    },
+  },
+});
+</script>
diff --git a/plugins/Transitions/vue/src/index.ts b/plugins/Transitions/vue/src/index.ts
new file mode 100644
index 0000000000..dff1aa7557
--- /dev/null
+++ b/plugins/Transitions/vue/src/index.ts
@@ -0,0 +1,11 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import './TransitionExporter/TransitionExporter.adapter.ts';
+
+export { default as TransitionExporter } from './TransitionExporter/TransitionExporter';
+export { default as TransitionSwitcher } from './TransitionSwitcher/TransitionSwitcher.vue';