Start on Vue 3 changes
This commit is contained in:
parent
dcc4784bfd
commit
c913a40e18
35 changed files with 3570 additions and 1913 deletions
79
src/main.js
79
src/main.js
|
|
@ -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');
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue