Changes for ssr

app.vue

@@ -64,7 +64,7 @@ export default {
                 linkElement.remove();
                 cloneLinkElement.setAttribute('id', elementId);
             });
-            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+            linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
 
             this.$appState.theme = event.theme;
             this.$appState.darkTheme = event.dark;

pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <ClientOnly>
         <div :class="landingClass">
             <div class="landing-intro">
                 <AppNews v-if="$appState.newsActive" />
@@ -14,6 +15,7 @@
             <FeaturesSection />
             <FooterSection />
         </div>
+    </ClientOnly>
 </template>
 
 <script>

pages/setup/index.vue

@@ -6,6 +6,7 @@
                 <p>PrimeVue is a rich set of open source native components for Vue.</p>
             </div>
         </div>
+        <ClientOnly>
             <div class="content-section documentation">
                 <h3>Module Loader</h3>
                 <p>
@@ -174,8 +175,8 @@ primevue/resources/themes/rhea/theme.css
 
                 <h5>PrimeFlex</h5>
                 <p>
-                PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such utilities
+                    PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such
-                when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.
+                    utilities when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.
                 </p>
 
                 <h3>Nuxt Integration</h3>
@@ -280,10 +281,10 @@ app.use(PrimeVue, {ripple: true});
 
                 <h5>Outlined vs Filled Input Styles</h5>
                 <p>
-                Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the
+                    Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables
-                filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element,
+                    the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application
-                components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled'
+                    element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set
-                at PrimeVue configuration as well.
+                    inputStyle to 'filled' at PrimeVue configuration as well.
                 </p>
 
                 <pre v-code.script><code>
@@ -297,9 +298,9 @@ app.use(PrimeVue, {inputStyle: 'filled'});
 
                 <h5>ZIndex Layering</h5>
                 <p>
-                ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom
+                    ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a
-                layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the <i>zIndex</i> property to customize
+                    custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the <i>zIndex</i> property
-                the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
+                    to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
                 </p>
                 <pre v-code.script><code>
 import {createApp} from 'vue';
@@ -377,8 +378,8 @@ app.use(PrimeVue, {
 
                 <h5>Typescript</h5>
                 <p>
-                Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI is
+                    Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI
-                available as at github.
+                    is available as at github.
                 </p>
 
                 <h5>Quickstart with Vite</h5>
@@ -390,5 +391,6 @@ app.use(PrimeVue, {
                 <h5>Quickstart with Vue CLI</h5>
                 <p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
             </div>
+        </ClientOnly>
     </div>
 </template>