diff --git a/app.vue b/app.vue index 68d61bf40..ddae9f249 100644 --- a/app.vue +++ b/app.vue @@ -1,11 +1,69 @@ \ No newline at end of file + this.themeChangeListener = (event) => { + const elementId = 'theme-link'; + const linkElement = document.getElementById(elementId); + const cloneLinkElement = linkElement.cloneNode(true); + const newThemeUrl = linkElement.getAttribute('href').replace(this.$appState.theme, event.theme); + + cloneLinkElement.setAttribute('id', elementId + '-clone'); + cloneLinkElement.setAttribute('href', newThemeUrl); + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', elementId); + }); + linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); + + this.$appState.theme = event.theme; + this.$appState.darkTheme = event.dark; + }; + + EventBus.on('theme-change', this.themeChangeListener); + EventBus.on('news-activate', this.newsActivate); + }, + beforeUnmount() { + EventBus.off('theme-change', this.themeChangeListener); + EventBus.off('news-activate', this.newsActivate); + } + } + \ No newline at end of file diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index 428a8e55c..dce3104ff 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -433,7 +433,6 @@ export default { event.preventDefault(); }, changeTheme(event, theme, dark) { - debugger EventBus.emit('theme-change', { theme: theme, dark: dark }); event.preventDefault(); }, diff --git a/layouts/default.vue b/layouts/default.vue index bb9e383ca..2a19dfd5a 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -37,7 +37,7 @@ export default { this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'}); } }, - watch: { +/* watch: { $route: { immediate: true, handler(to) { @@ -55,7 +55,7 @@ export default { this.$toast.removeAllGroups(); } } - }, + }, */ methods: { onMenuButtonClick() { if (this.sidebarActive) { diff --git a/nuxt.config.js b/nuxt.config.js index 5b961b6fc..8359f4d90 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -2,8 +2,10 @@ import { defineNuxtConfig } from 'nuxt' const path = require('path'); // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ + ssr: true, typescript: false, components: true, + css: [ '@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', @@ -11,6 +13,22 @@ export default defineNuxtConfig({ '/node_modules/prismjs/themes/prism-coy.css', '@/assets/styles/flags.css' ], + app: { + head: { + link: [ + { + id: 'theme-link', + rel: 'stylesheet', + href: 'themes/lara-light-blue/theme.css' + }, + { + id: 'home-table-link', + rel: 'stylesheet', + href: 'styles/landing/themes/lara-light-blue/theme.css' + } + ] + }, + }, vite: { resolve: { alias: { diff --git a/pages/index.vue b/pages/index.vue index ebc442643..936e03125 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -66,7 +66,6 @@ export default { this.replaceTableTheme(value); }, replaceTableTheme(newTheme) { - debugger const elementId = 'home-table-link'; const linkElement = document.getElementById(elementId); const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue index 9b37b574d..491749946 100644 --- a/pages/landing/HeroSection.vue +++ b/pages/landing/HeroSection.vue @@ -81,10 +81,10 @@
- + Get Started - +
npm i primevue