Start on Vue 3 changes

This commit is contained in:
N-Pex 2025-05-06 09:27:53 +02:00
parent dcc4784bfd
commit c913a40e18
35 changed files with 3570 additions and 1913 deletions

View file

@ -1,4 +1,3 @@
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import i18n from './plugins/lang';
@ -10,40 +9,44 @@ import analytics from './services/analytics.service'
import audioPlayer from './services/audio.service';
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import VueResize from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';
import VueResize from 'vue3-resize';
import 'vue3-resize/dist/vue3-resize.css';
import VueClipboard from 'vue-clipboard2'
import VueSanitize from "vue-sanitize";
import Vue3Sanitize from "vue-3-sanitize";
import createVuetify from './plugins/vuetify';
import { Buffer } from 'buffer/'
import { createApp, h } from 'vue';
globalThis.Buffer = Buffer;
var defaultOptions = VueSanitize.defaults;
var defaultOptions = Vue3Sanitize.defaults;
defaultOptions.disallowedTagsMode = "recursiveEscape";
defaultOptions.allowedTags = [];
Vue.use(VueSanitize, defaultOptions);
Vue.config.productionTip = false
const app = createApp({
render: () => h(App)
});
app.use(Vue3Sanitize, defaultOptions);
Vue.use(VueResize);
Vue.use(matrix, { store: store, i18n: i18n });
app.config.productionTip = false
app.use(VueResize);
const configLoadedPromise = new Promise((resolve, ignoredreject) => {
// eslint-disable-next-line
Vue.use(config, globalThis.window.location.origin, (config) => {
app.use(config, globalThis.window.location.origin, (config) => {
resolve(config);
}); // Use this before cleaninsights below, it depends on config!
});
Vue.use(analytics);
Vue.use(VueClipboard);
Vue.use(audioPlayer);
app.use(analytics);
app.use(VueClipboard);
app.use(audioPlayer);
const vuetify = createVuetify(config);
// Add bubble functionality to custom events.
// From here: https://stackoverflow.com/questions/41993508/vuejs-bubbling-custom-events
Vue.use((Vue) => {
Vue.prototype.$bubble = function $bubble(eventName, ...args) {
app.use((instance) => {
instance.$bubble = function $bubble(eventName, ...args) {
// Emit the event on all parent components
let component = this;
let arg = args.at(0);
@ -62,7 +65,7 @@ Vue.use((Vue) => {
});
// Register a global custom directive called `v-blur` that prevents focus
Vue.directive('blur', {
app.directive('blur', {
inserted: function (el) {
el.onfocus = (ev) => ev.target.blur()
}
@ -75,7 +78,7 @@ Vue.directive('blur', {
*
* Like this: v-linkTap:500="[tapped,longTapped]"
*/
Vue.directive('longTap', {
app.directive('longTap', {
bind: function (el, binding, ignoredvnode) {
el.longTapTimeout = parseInt(binding.arg || "500");
el.longTapCallbacks = binding.value;
@ -168,27 +171,35 @@ Vue.directive('longTap', {
},
});
Vue.use(navigation, router);
app.use(store);
app.$store = store;
app.config.globalProperties.$store = store;
const vueInstance = new Vue({
vuetify,
store,
i18n,
router,
matrix,
config,
analytics,
audioPlayer,
render: h => h(App),
});
if (vueInstance.$config.accentColor) {
vueInstance.$vuetify.theme.themes.light.primary = vueInstance.$config.accentColor;
app.use(router);
router.app = app;
app.use(navigation, router);
app.use(vuetify);
app.use(i18n);
app.use(matrix, { store: store, i18n: i18n });
//app.use(matrix);
//app.use(config);
// app.use(analytics);
// app.use(audioPlayer);
// app.render = h => {
// console.error("RENDERRENDERRENDERRENDERRENDSNAENNRENRANERNARE");
// h(App);
// }
if (app.$config.accentColor) {
app.$vuetify.theme.themes.light.primary = app.$config.accentColor;
}
vueInstance.$audioPlayer.$root = vueInstance; // Make sure a $root is available here
app.$audioPlayer.$root = app; // Make sure a $root is available here
configLoadedPromise.then((config) => {
if (config.accentColor) {
vueInstance.$vuetify.theme.themes.light.primary = config.accentColor;
app.$vuetify.theme.themes.light.primary = config.accentColor;
}
vueInstance.$mount('#app');
app.mount('#app');
});