diff --git a/apps/showcase/components/template/TemplateContainer.vue b/apps/showcase/components/template/TemplateContainer.vue index a6cc7fa8e6..a29c5d85f6 100644 --- a/apps/showcase/components/template/TemplateContainer.vue +++ b/apps/showcase/components/template/TemplateContainer.vue @@ -21,12 +21,10 @@ export default { }, computed: { components() { - return this.templateData.components.map((component) => { - return { - ...component, - name: markRaw(component.name) - }; - }); + return this.templateData?.components?.map(({ name, ...rest }) => ({ + ...rest, + name + })); } } }; diff --git a/apps/showcase/components/template/TemplateHero.vue b/apps/showcase/components/template/TemplateHero.vue index 845c89297d..02d121cd27 100644 --- a/apps/showcase/components/template/TemplateHero.vue +++ b/apps/showcase/components/template/TemplateHero.vue @@ -55,7 +55,7 @@ export default { props: { templateHeroData: { type: null, - templateHeroData: null + default: null } } }; diff --git a/apps/showcase/pages/templates/apollo/index.vue b/apps/showcase/pages/templates/apollo/index.vue index 208bedaaa2..954e1845e9 100644 --- a/apps/showcase/pages/templates/apollo/index.vue +++ b/apps/showcase/pages/templates/apollo/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import ApolloLogo from '@/components/template/logo/ApolloLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { apolloData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: ApolloLogo, + logo: markRaw(ApolloLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard2.png', @@ -38,7 +39,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://apollo.primevue.org/documentation/', @@ -62,7 +63,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -132,7 +133,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { @@ -155,7 +156,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite and Nuxt', @@ -164,7 +165,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -205,7 +206,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/atlantis/index.vue b/apps/showcase/pages/templates/atlantis/index.vue index 2b9e463c46..5df6c36b02 100644 --- a/apps/showcase/pages/templates/atlantis/index.vue +++ b/apps/showcase/pages/templates/atlantis/index.vue @@ -13,16 +13,18 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import AtlantisLogo from '@/components/template/logo/AtlantisLogo.vue'; +import { markRaw } from 'vue'; + export default { data() { return { atlantisData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: AtlantisLogo, + logo: markRaw(AtlantisLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard2.png', @@ -37,7 +39,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://atlantis.primevue.org/documentation', @@ -61,7 +63,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -125,7 +127,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite', @@ -134,7 +136,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -174,7 +176,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/avalon/index.vue b/apps/showcase/pages/templates/avalon/index.vue index d540e0cb76..ac0105302a 100644 --- a/apps/showcase/pages/templates/avalon/index.vue +++ b/apps/showcase/pages/templates/avalon/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import AvalonLogo from '@/components/template/logo/AvalonLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { avalonData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: AvalonLogo, + logo: markRaw(AvalonLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png', rectangle: false, dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png', @@ -39,7 +40,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://avalon.primevue.org/documentation', @@ -63,7 +64,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -133,7 +134,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue App with No Configuration', @@ -142,7 +143,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { @@ -165,7 +166,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -205,7 +206,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/diamond/index.vue b/apps/showcase/pages/templates/diamond/index.vue index dbf8cfff6f..65fae14bba 100644 --- a/apps/showcase/pages/templates/diamond/index.vue +++ b/apps/showcase/pages/templates/diamond/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import DiamondLogo from '@/components/template/logo/DiamondLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { diamondData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: DiamondLogo, + logo: markRaw(DiamondLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-remastered-hero-dashboard-1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-remastered-hero-dashboard-2.png', @@ -38,7 +39,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://diamond.primevue.org/documentation/', @@ -62,7 +63,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -132,7 +133,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue App with No Configuration', @@ -141,7 +142,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -181,7 +182,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/freya/index.vue b/apps/showcase/pages/templates/freya/index.vue index ab7d668d1d..a217c0642f 100644 --- a/apps/showcase/pages/templates/freya/index.vue +++ b/apps/showcase/pages/templates/freya/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import FreyaLogo from '@/components/template/logo/FreyaLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { freyaData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: FreyaLogo, + logo: markRaw(FreyaLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard2.png', @@ -38,7 +39,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://freya.primevue.org/documentation', @@ -62,7 +63,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -126,7 +127,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite', @@ -135,7 +136,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -175,7 +176,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/poseidon/index.vue b/apps/showcase/pages/templates/poseidon/index.vue index 54e34343d6..f746b56bbc 100644 --- a/apps/showcase/pages/templates/poseidon/index.vue +++ b/apps/showcase/pages/templates/poseidon/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import PoseidonLogo from '@/components/template/logo/PoseidonLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { poseidonData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: PoseidonLogo, + logo: markRaw(PoseidonLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/hero-background.png', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard2.png', @@ -38,7 +39,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://poseidon.primevue.org/documentation/', @@ -62,7 +63,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -106,7 +107,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite', @@ -115,7 +116,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -145,7 +146,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/sakai/index.vue b/apps/showcase/pages/templates/sakai/index.vue index ea2f6c3006..fefed22d50 100644 --- a/apps/showcase/pages/templates/sakai/index.vue +++ b/apps/showcase/pages/templates/sakai/index.vue @@ -12,6 +12,7 @@ import TemplateFeatures from '@/components/template/TemplateFeatures.vue'; import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue'; import TemplateHero from '@/components/template/TemplateHero.vue'; import SakaiLogo from '@/components/template/logo/SakaiLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -19,10 +20,10 @@ export default { sakaiData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: SakaiLogo, + logo: markRaw(SakaiLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-dashboard1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-dashboard2.png', @@ -40,7 +41,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { @@ -58,7 +59,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -91,7 +92,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite and Nuxt', @@ -100,7 +101,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -130,7 +131,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/ultima/index.vue b/apps/showcase/pages/templates/ultima/index.vue index 2ba1452bcb..8c4661184c 100644 --- a/apps/showcase/pages/templates/ultima/index.vue +++ b/apps/showcase/pages/templates/ultima/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import UltimaLogo from '@/components/template/logo/UltimaLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { ultimaData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: UltimaLogo, + logo: markRaw(UltimaLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png', description: 'A highly customizable premium application template featuring 4 menu modes, 13 themes, light and dark modes. Based on material design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.', @@ -39,7 +40,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://ultima.primevue.org/documentation/', @@ -63,7 +64,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -127,7 +128,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite', @@ -136,7 +137,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -176,7 +177,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ { diff --git a/apps/showcase/pages/templates/verona/index.vue b/apps/showcase/pages/templates/verona/index.vue index e5e4b9d6d6..71aab51ae4 100644 --- a/apps/showcase/pages/templates/verona/index.vue +++ b/apps/showcase/pages/templates/verona/index.vue @@ -13,6 +13,7 @@ import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAni import TemplateHero from '@/components/template/TemplateHero.vue'; import TemplateLicense from '@/components/template/TemplateLicense.vue'; import VeronaLogo from '@/components/template/logo/VeronaLogo.vue'; +import { markRaw } from 'vue'; export default { data() { @@ -20,10 +21,10 @@ export default { veronaData: { components: [ { - name: TemplateHero, + name: markRaw(TemplateHero), props: { templateHeroData: { - logo: VeronaLogo, + logo: markRaw(VeronaLogo), pattern: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png', description: 'Prepare to be amazed by the remastered Verona for PrimeVue featuring a new gorgeous dark mode for the entire layout, 2 menu modes, reusable css widgets, utilities, modern icons and many more.', dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard1.png', @@ -38,7 +39,7 @@ export default { } }, { - name: TemplateLicense, + name: markRaw(TemplateLicense), props: { license: { documentLink: 'https://verona.primevue.org/documentation', @@ -62,7 +63,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { title: 'Features', featuresData: [ @@ -117,7 +118,7 @@ export default { } }, { - name: TemplateConfiguration, + name: markRaw(TemplateConfiguration), props: { configurationData: { title: 'Vue based on Vite', @@ -126,7 +127,7 @@ export default { } }, { - name: TemplateFeaturesAnimation, + name: markRaw(TemplateFeaturesAnimation), props: { featuresData: [ { @@ -165,7 +166,7 @@ export default { } }, { - name: TemplateFeatures, + name: markRaw(TemplateFeatures), props: { featuresData: [ {