From 52b5d65c499702bbe0114e45b3bdca46955d860e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 19 Dec 2022 14:57:07 +0300
Subject: [PATCH] meta tags added

---
 pages/accessibility/index.vue     |  5 ++
 pages/accordion/index.vue         |  5 ++
 pages/autocomplete/index.vue      |  5 ++
 pages/avatar/index.vue            |  5 ++
 pages/badge/index.vue             |  5 ++
 pages/blockui/index.vue           |  5 ++
 pages/breadcrumb/index.vue        |  5 ++
 pages/button/index.vue            |  5 ++
 pages/calendar/index.vue          |  5 ++
 pages/card/index.vue              |  5 ++
 pages/carousel/index.vue          |  5 ++
 pages/cascadeselect/index.vue     |  5 ++
 pages/chart/index.vue             |  4 ++
 pages/checkbox/index.vue          |  5 ++
 pages/chip/index.vue              |  5 ++
 pages/chips/index.vue             |  5 ++
 pages/colorpicker/index.vue       |  5 ++
 pages/colors/index.vue            |  5 ++
 pages/confirmdialog/index.vue     |  5 ++
 pages/confirmpopup/index.vue      |  5 ++
 pages/contextmenu/index.vue       |  5 ++
 pages/datatable/index.vue         |  5 ++
 pages/dataview/index.vue          |  5 ++
 pages/deferredcontent/index.vue   |  5 ++
 pages/dialog/index.vue            |  5 ++
 pages/divider/index.vue           |  5 ++
 pages/dock/index.vue              |  5 ++
 pages/dropdown/index.vue          |  5 ++
 pages/dynamicdialog/index.vue     |  5 ++
 pages/editor/index.vue            |  5 ++
 pages/fieldset/index.vue          |  5 ++
 pages/fileupload/index.vue        |  5 ++
 pages/filterservice/index.vue     |  5 ++
 pages/focustrap/index.vue         | 93 +++++++++++++++++--------------
 pages/galleria/index.vue          | 45 ++++++++-------
 pages/icons/index.vue             |  5 ++
 pages/image/index.vue             |  5 ++
 pages/inplace/index.vue           |  5 ++
 pages/inputgroup/index.vue        |  5 ++
 pages/inputmask/index.vue         |  5 ++
 pages/inputnumber/index.vue       |  5 ++
 pages/inputswitch/index.vue       |  5 ++
 pages/inputtext/index.vue         |  5 ++
 pages/knob/index.vue              |  5 ++
 pages/listbox/index.vue           |  5 ++
 pages/locale/index.vue            |  5 ++
 pages/megamenu/index.vue          |  5 ++
 pages/menu/index.vue              |  5 ++
 pages/menubar/index.vue           |  5 ++
 pages/menumodel/index.vue         |  5 ++
 pages/message/index.vue           |  5 ++
 pages/multiselect/index.vue       |  5 ++
 pages/orderlist/index.vue         |  5 ++
 pages/organizationchart/index.vue |  5 ++
 pages/overlaypanel/index.vue      |  7 ++-
 pages/paginator/index.vue         |  5 ++
 pages/panel/index.vue             |  5 ++
 pages/panelmenu/index.vue         |  5 ++
 pages/password/index.vue          |  5 ++
 pages/picklist/index.vue          |  5 ++
 pages/progressbar/index.vue       |  5 ++
 pages/progressspinner/index.vue   |  5 ++
 pages/radiobutton/index.vue       |  5 ++
 pages/rating/index.vue            |  5 ++
 pages/ripple/index.vue            |  5 ++
 pages/roadmap/index.vue           |  9 +++
 pages/scrollpanel/index.vue       |  5 ++
 pages/scrolltop/index.vue         |  5 ++
 pages/selectbutton/index.vue      |  5 ++
 pages/setup/index.vue             |  5 ++
 pages/sidebar/index.vue           |  5 ++
 pages/skeleton/index.vue          |  5 ++
 pages/slider/index.vue            |  5 ++
 pages/speeddial/index.vue         |  5 ++
 pages/splitbutton/index.vue       |  5 ++
 pages/splitter/index.vue          |  5 ++
 pages/steps/index.vue             |  5 ++
 pages/styleclass/index.vue        | 41 ++++++++------
 pages/tabmenu/index.vue           |  5 ++
 pages/tabview/index.vue           |  4 ++
 pages/tag/index.vue               |  5 ++
 pages/terminal/index.vue          |  5 ++
 pages/textarea/index.vue          |  5 ++
 pages/theming/index.vue           |  5 ++
 pages/tieredmenu/index.vue        |  5 ++
 pages/timeline/index.vue          |  5 ++
 pages/toast/index.vue             |  5 ++
 pages/togglebutton/index.vue      |  5 ++
 pages/toolbar/index.vue           |  5 ++
 pages/tooltip/index.vue           |  5 ++
 pages/tree/index.vue              |  5 ++
 pages/treeselect/index.vue        |  5 ++
 pages/treetable/index.vue         |  5 ++
 pages/tristatecheckbox/index.vue  |  5 ++
 pages/uikit/index.vue             |  5 ++
 pages/validation/index.vue        |  5 ++
 pages/virtualscroller/index.vue   |  5 ++
 97 files changed, 573 insertions(+), 80 deletions(-)

diff --git a/pages/accessibility/index.vue b/pages/accessibility/index.vue
index 5ce6dff66..32ae81358 100644
--- a/pages/accessibility/index.vue
+++ b/pages/accessibility/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Accessibility - PrimeVue</Title>
+            <Meta name="description" content="Accessible Vue UI Components." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Accessibility</h1>
diff --git a/pages/accordion/index.vue b/pages/accordion/index.vue
index 09dde37c2..a848305ea 100755
--- a/pages/accordion/index.vue
+++ b/pages/accordion/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Accordion Component</Title>
+            <Meta name="description" content="Accordion groups a collection of contents in tabs." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Accordion</h1>
diff --git a/pages/autocomplete/index.vue b/pages/autocomplete/index.vue
index 1e200f11e..83d29c0b6 100755
--- a/pages/autocomplete/index.vue
+++ b/pages/autocomplete/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue AutoComplete Component</Title>
+            <Meta name="description" content="AutoComplete is an input component that provides real-time suggestions when being typed." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>AutoComplete</h1>
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index 04767a313..f1bae9e5f 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Avatar Component</Title>
+            <Meta name="description" content="Avatar represents people using icons, labels and images." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Avatar</h1>
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index 3621eae70..a67883909 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Badge Component</Title>
+            <Meta name="description" content="Badge is a small status indicator for another element." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Badge</h1>
diff --git a/pages/blockui/index.vue b/pages/blockui/index.vue
index b1095e423..1077cf56d 100755
--- a/pages/blockui/index.vue
+++ b/pages/blockui/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue BlockUI Component</Title>
+            <Meta name="description" content="BlockUI can either block other components or the whole page." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>BlockUI</h1>
diff --git a/pages/breadcrumb/index.vue b/pages/breadcrumb/index.vue
index b577ebe48..ce63b9e7a 100755
--- a/pages/breadcrumb/index.vue
+++ b/pages/breadcrumb/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue BreadCrumb Component</Title>
+            <Meta name="description" content="Breadcrumb provides contextual information about page hierarchy." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Breadcrumb</h1>
diff --git a/pages/button/index.vue b/pages/button/index.vue
index 08651c9c0..ccb7630d8 100755
--- a/pages/button/index.vue
+++ b/pages/button/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Button Component</Title>
+            <Meta name="description" content="Button is an extension to standard input element with icons and theming." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Button</h1>
diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue
index 05c433eaa..3d0717707 100755
--- a/pages/calendar/index.vue
+++ b/pages/calendar/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Calendar Component</Title>
+            <Meta name="description" content="Calendar also known as DatePicker, is a form component to work with dates." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Calendar</h1>
diff --git a/pages/card/index.vue b/pages/card/index.vue
index bf3c14363..4fbc9ca09 100755
--- a/pages/card/index.vue
+++ b/pages/card/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Card Component</Title>
+            <Meta name="description" content="Card is a flexible container component." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Card</h1>
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index dfa3aeecf..43c5b30f5 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Carousel Component</Title>
+            <Meta name="description" content="Carousel is a content slider featuring various customization options." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Carousel</h1>
diff --git a/pages/cascadeselect/index.vue b/pages/cascadeselect/index.vue
index 57b95611b..e6bf78bba 100644
--- a/pages/cascadeselect/index.vue
+++ b/pages/cascadeselect/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue CascadeSelect Component</Title>
+            <Meta name="description" content="CascadeSelect is a form component to select a value from a nested structure of options." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>CascadeSelect</h1>
diff --git a/pages/chart/index.vue b/pages/chart/index.vue
index 4f2df838a..f92e15819 100755
--- a/pages/chart/index.vue
+++ b/pages/chart/index.vue
@@ -1,5 +1,9 @@
 <template>
     <div>
+        <Head>
+            <title>Vue Chart</title>
+        </Head>
+
         <ChartDoc />
     </div>
 </template>
diff --git a/pages/checkbox/index.vue b/pages/checkbox/index.vue
index 21c1af764..424114fe2 100755
--- a/pages/checkbox/index.vue
+++ b/pages/checkbox/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Checkbox Component</Title>
+            <Meta name="description" content="Checkbox is an extension to standard checkbox element with theming." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Checkbox</h1>
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index bab340323..a85b5414a 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Chip Component</Title>
+            <Meta name="description" content="Chip represents entities using icons, labels and images." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Chip</h1>
diff --git a/pages/chips/index.vue b/pages/chips/index.vue
index 867c86e89..f5477e596 100755
--- a/pages/chips/index.vue
+++ b/pages/chips/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Chips Component</Title>
+            <Meta name="description" content="Chips is used to enter multiple values on an input field." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Chips</h1>
diff --git a/pages/colorpicker/index.vue b/pages/colorpicker/index.vue
index f84f5741b..494925ea2 100755
--- a/pages/colorpicker/index.vue
+++ b/pages/colorpicker/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ColorPicker Component</Title>
+            <Meta name="description" content="ColorPicker is an input component to select a color." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ColorPicker</h1>
diff --git a/pages/colors/index.vue b/pages/colors/index.vue
index 00cc9d193..5bb666abb 100644
--- a/pages/colors/index.vue
+++ b/pages/colors/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Color System - PrimeVue</Title>
+            <Meta name="description" content="Each PrimeVue theme exports its own color palette." />
+        </Head>
+
         <div class="content-section documentation">
             <h1>Colors</h1>
             <p>Each PrimeVue theme exports its own color palette.</p>
diff --git a/pages/confirmdialog/index.vue b/pages/confirmdialog/index.vue
index f20dadf5d..cf4739533 100644
--- a/pages/confirmdialog/index.vue
+++ b/pages/confirmdialog/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Confirmation Dialog Component</Title>
+            <Meta name="description" content="ConfirmDialog uses a Dialog UI with confirmDialog method or ConfirmDialog tag" />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ConfirmDialog</h1>
diff --git a/pages/confirmpopup/index.vue b/pages/confirmpopup/index.vue
index b0826f6bf..725d15a31 100644
--- a/pages/confirmpopup/index.vue
+++ b/pages/confirmpopup/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Confirmation Popup Component</Title>
+            <Meta name="description" content="ConfirmPopup displays a confirmation overlay displayed relatively to its target." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ConfirmPopup</h1>
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index 9d5a69c6c..eab116a97 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ContextMenu Component</Title>
+            <Meta name="description" content="ContextMenu displays an overlay menu on right click of its target." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ContextMenu</h1>
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index d6c0bba3b..884ec4e15 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Table Component</Title>
+            <Meta name="description" content="DataTable displays data in tabular format" />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>DataTable</h1>
diff --git a/pages/dataview/index.vue b/pages/dataview/index.vue
index 278dd408b..cc329be77 100755
--- a/pages/dataview/index.vue
+++ b/pages/dataview/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue DataView Component</Title>
+            <Meta name="description" content="DataView displays data in grid or list layout with pagination and sorting features." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>DataView</h1>
diff --git a/pages/deferredcontent/index.vue b/pages/deferredcontent/index.vue
index 784febd47..8926fd9fc 100755
--- a/pages/deferredcontent/index.vue
+++ b/pages/deferredcontent/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Deferred Content Component</Title>
+            <Meta name="description" content="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>DeferredContent</h1>
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index 2478b5259..89c0f87ff 100755
--- a/pages/dialog/index.vue
+++ b/pages/dialog/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Dialog Component</Title>
+            <Meta name="description" content="Dialog is a container to display content in an overlay window." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Dialog</h1>
diff --git a/pages/divider/index.vue b/pages/divider/index.vue
index 4da704b16..e347d661e 100644
--- a/pages/divider/index.vue
+++ b/pages/divider/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Divider Component</Title>
+            <Meta name="description" content="Divider is used to separate contents." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Divider</h1>
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index 4b9aa3310..2cf6ab3d0 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Dock Component</Title>
+            <Meta name="description" content="Dock is a navigation component consisting of menuitems." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Dock</h1>
diff --git a/pages/dropdown/index.vue b/pages/dropdown/index.vue
index 5d80f339a..03cee98da 100755
--- a/pages/dropdown/index.vue
+++ b/pages/dropdown/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Select Component</Title>
+            <Meta name="description" content="Dropdown also known as Select, is used to choose an item from a collection of options." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Dropdown</h1>
diff --git a/pages/dynamicdialog/index.vue b/pages/dynamicdialog/index.vue
index 0c90b1743..82a930d66 100644
--- a/pages/dynamicdialog/index.vue
+++ b/pages/dynamicdialog/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Dynamic Dialog Component</Title>
+            <Meta name="description" content="Dynamic Dialog is a Dialog container to display content dynamicaly in an overlay window." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Dynamic Dialog</h1>
diff --git a/pages/editor/index.vue b/pages/editor/index.vue
index fe29c1379..c2f8c590f 100755
--- a/pages/editor/index.vue
+++ b/pages/editor/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Editor Component</Title>
+            <Meta name="description" content="Editor is rich text editor component based on Quill." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Editor</h1>
diff --git a/pages/fieldset/index.vue b/pages/fieldset/index.vue
index 47fc3debc..da7a0add0 100755
--- a/pages/fieldset/index.vue
+++ b/pages/fieldset/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Fieldset Component</Title>
+            <Meta name="description" content="Fieldset is a grouping component with a content toggle feature." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Fieldset</h1>
diff --git a/pages/fileupload/index.vue b/pages/fileupload/index.vue
index dadda17b3..1a81f2ded 100755
--- a/pages/fileupload/index.vue
+++ b/pages/fileupload/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Upload Component</Title>
+            <Meta name="description" content="FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>FileUpload</h1>
diff --git a/pages/filterservice/index.vue b/pages/filterservice/index.vue
index 89d9f2e1d..146bfd9dc 100644
--- a/pages/filterservice/index.vue
+++ b/pages/filterservice/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Filter Service</Title>
+            <Meta name="description" content="PrimeVue Filter Service is a helper utility to filter." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>FilterService</h1>
diff --git a/pages/focustrap/index.vue b/pages/focustrap/index.vue
index 5e5816808..17cc87c62 100644
--- a/pages/focustrap/index.vue
+++ b/pages/focustrap/index.vue
@@ -1,54 +1,61 @@
 <template>
-    <div class="content-section introduction">
-        <div class="feature-intro">
-            <h1>Focus Trap</h1>
-            <p>Focus Trap keeps focus within a certain DOM element while tabbing.</p>
-        </div>
-        <AppDemoActions />
-    </div>
+    <div>
+        <Head>
+            <Title>Vue FocsuTrap Directive</Title>
+            <Meta name="description" content="Focus Trap keeps focus within a certain DOM element while tabbing." />
+        </Head>
 
-    <div class="content-section implementation focustrap-demo">
-        <div class="flex justify-content-center p-fluid">
-            <div v-focustrap class="card">
-                <div class="field">
-                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </div>
-                <div class="field">
-                    <div class="p-input-icon-right">
-                        <i class="pi pi-envelope" />
-                        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Focus Trap</h1>
+                <p>Focus Trap keeps focus within a certain DOM element while tabbing.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation focustrap-demo">
+            <div class="flex justify-content-center p-fluid">
+                <div v-focustrap class="card">
+                    <div class="field">
+                        <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
                     </div>
-                </div>
-                <div class="field">
-                    <div class="p-float-label">
-                        <Password v-model="password">
-                            <template #header>
-                                <h6>Pick a password</h6>
-                            </template>
-                            <template #footer>
-                                <Divider />
-                                <p class="mt-2">Suggestions</p>
-                                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
-                                    <li>At least one lowercase</li>
-                                    <li>At least one uppercase</li>
-                                    <li>At least one numeric</li>
-                                    <li>Minimum 8 characters</li>
-                                </ul>
-                            </template>
-                        </Password>
-                        <label for="password">Password</label>
+                    <div class="field">
+                        <div class="p-input-icon-right">
+                            <i class="pi pi-envelope" />
+                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                        </div>
                     </div>
+                    <div class="field">
+                        <div class="p-float-label">
+                            <Password v-model="password">
+                                <template #header>
+                                    <h6>Pick a password</h6>
+                                </template>
+                                <template #footer>
+                                    <Divider />
+                                    <p class="mt-2">Suggestions</p>
+                                    <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                                        <li>At least one lowercase</li>
+                                        <li>At least one uppercase</li>
+                                        <li>At least one numeric</li>
+                                        <li>Minimum 8 characters</li>
+                                    </ul>
+                                </template>
+                            </Password>
+                            <label for="password">Password</label>
+                        </div>
+                    </div>
+                    <div class="field-checkbox">
+                        <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
+                        <label for="accept">I agree to the terms and conditions*</label>
+                    </div>
+                    <Button type="submit" label="Submit" class="mt-2" />
                 </div>
-                <div class="field-checkbox">
-                    <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
-                    <label for="accept">I agree to the terms and conditions*</label>
-                </div>
-                <Button type="submit" label="Submit" class="mt-2" />
             </div>
         </div>
-    </div>
 
-    <FocusTrapDoc />
+        <FocusTrapDoc />
+    </div>
 </template>
 
 <script>
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index 81b3bad74..7ece9a9bf 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -1,26 +1,33 @@
 <template>
-    <div class="galleria-demo">
-        <div class="content-section introduction">
-            <div class="feature-intro">
-                <h1>Galleria</h1>
-                <p>Galleria is an advanced content gallery component.</p>
-            </div>
-        </div>
+    <div>
+        <Head>
+            <Title>Vue Gallery Component</Title>
+            <Meta name="description" content="Galleria is a content gallery component." />
+        </Head>
 
-        <div class="content-section implementation">
-            <div class="card">
-                <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-                    <template #item="slotProps">
-                        <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-                    </template>
-                    <template #thumbnail="slotProps">
-                        <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-                    </template>
-                </Galleria>
+        <div class="galleria-demo">
+            <div class="content-section introduction">
+                <div class="feature-intro">
+                    <h1>Galleria</h1>
+                    <p>Galleria is an advanced content gallery component.</p>
+                </div>
             </div>
-        </div>
 
-        <GalleriaDoc />
+            <div class="content-section implementation">
+                <div class="card">
+                    <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                        <template #item="slotProps">
+                            <img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                        </template>
+                        <template #thumbnail="slotProps">
+                            <img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                        </template>
+                    </Galleria>
+                </div>
+            </div>
+
+            <GalleriaDoc />
+        </div>
     </div>
 </template>
 
diff --git a/pages/icons/index.vue b/pages/icons/index.vue
index 6936671b5..c0f4d7865 100755
--- a/pages/icons/index.vue
+++ b/pages/icons/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Icon Library - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue components internally use PrimeIcons library." />
+        </Head>
+
         <div class="content-section documentation">
             <h1>Icons</h1>
             <p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr">PrimeTek</a>.</p>
diff --git a/pages/image/index.vue b/pages/image/index.vue
index 929efae59..b69a2eded 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Image Component</Title>
+            <Meta name="description" content="Displays an image with preview and tranformation options." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Image</h1>
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index a58c551ac..40f9022e9 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Inplace Component</Title>
+            <Meta name="description" content="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Inplace</h1>
diff --git a/pages/inputgroup/index.vue b/pages/inputgroup/index.vue
index 4a565ed9b..cd46d26c4 100755
--- a/pages/inputgroup/index.vue
+++ b/pages/inputgroup/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue InputGroup Component</Title>
+            <Meta name="description" content="Text, icon, buttons and other content can be grouped next to an input." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>InputGroup</h1>
diff --git a/pages/inputmask/index.vue b/pages/inputmask/index.vue
index 3bea061e8..281d81bf6 100755
--- a/pages/inputmask/index.vue
+++ b/pages/inputmask/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Mask Component</Title>
+            <Meta name="description" content="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>InputMask</h1>
diff --git a/pages/inputnumber/index.vue b/pages/inputnumber/index.vue
index d8b74fad9..1447f1738 100755
--- a/pages/inputnumber/index.vue
+++ b/pages/inputnumber/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue InputNumber Component</Title>
+            <Meta name="description" content="InputNumber is an input component to provide numerical input." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>InputNumber</h1>
diff --git a/pages/inputswitch/index.vue b/pages/inputswitch/index.vue
index 59edb83a0..baf5c94c0 100755
--- a/pages/inputswitch/index.vue
+++ b/pages/inputswitch/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue InputSwitch Component</Title>
+            <Meta name="description" content="InputSwitch is used to select a boolean value." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>InputSwitch</h1>
diff --git a/pages/inputtext/index.vue b/pages/inputtext/index.vue
index 47aeaf688..5f3b03f3d 100755
--- a/pages/inputtext/index.vue
+++ b/pages/inputtext/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue InputText Component</Title>
+            <Meta name="description" content="InputText is an extension to standard input element with theming and keyfiltering." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>InputText</h1>
diff --git a/pages/knob/index.vue b/pages/knob/index.vue
index afb3aabab..1e3c3f768 100644
--- a/pages/knob/index.vue
+++ b/pages/knob/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Knob Component</Title>
+            <Meta name="description" content="Knob is a form component to define number inputs with a dial." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Knob</h1>
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index 765517bcf..3916618b1 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ListBox Component</Title>
+            <Meta name="description" content="ListBox is used to select one or more values from a list of items." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Listbox</h1>
diff --git a/pages/locale/index.vue b/pages/locale/index.vue
index 3412eb3d8..adcb48aa9 100644
--- a/pages/locale/index.vue
+++ b/pages/locale/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Locale - PrimeVue</Title>
+            <Meta name="description" content="The Locale API allows setting i18n and l7n options globally for the components." />
+        </Head>
+
         <div class="content-section documentation">
             <h1>Internationalization and Localization</h1>
             <p>The Locale API allows setting <b>i18n</b> and <b>l7n</b> options globally for the components.</p>
diff --git a/pages/megamenu/index.vue b/pages/megamenu/index.vue
index 8ed950a44..73c2a861d 100755
--- a/pages/megamenu/index.vue
+++ b/pages/megamenu/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue MegaMenu Component</Title>
+            <Meta name="description" content="MegaMenu is navigation component that displays submenus together." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>MegaMenu</h1>
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index 1e8c78943..7f80b541b 100755
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Menu Component</Title>
+            <Meta name="description" content="Menu is a navigation/command component that supports dynamic and static positioning." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Menu</h1>
diff --git a/pages/menubar/index.vue b/pages/menubar/index.vue
index 3a2c1e3f1..f084c5a1b 100755
--- a/pages/menubar/index.vue
+++ b/pages/menubar/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Navbar Component</Title>
+            <Meta name="description" content="Menubar is a horizontal menu component." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Menubar</h1>
diff --git a/pages/menumodel/index.vue b/pages/menumodel/index.vue
index 6217dc0ea..8f27f2aee 100755
--- a/pages/menumodel/index.vue
+++ b/pages/menumodel/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>MenuModel - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue menus components share a common api to specify the menuitems and submenus." />
+        </Head>
+
         <div class="content-section documentation">
             <h1>MenuModel</h1>
             <p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
diff --git a/pages/message/index.vue b/pages/message/index.vue
index 15849a00f..e510fc1eb 100755
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Messages Component</Title>
+            <Meta name="description" content="Messages is used to display inline messages with various severities." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Message</h1>
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index 7ffc859c5..c654815c7 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue MultiSelect Component</Title>
+            <Meta name="description" content="MultiSelect is used to select multiple items from a collection." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>MultiSelect</h1>
diff --git a/pages/orderlist/index.vue b/pages/orderlist/index.vue
index d50db61df..941b58d54 100755
--- a/pages/orderlist/index.vue
+++ b/pages/orderlist/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue OrderList Component</Title>
+            <Meta name="description" content="OrderList is used to sort a collection." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>OrderList</h1>
diff --git a/pages/organizationchart/index.vue b/pages/organizationchart/index.vue
index 250fde500..61cc1fd62 100755
--- a/pages/organizationchart/index.vue
+++ b/pages/organizationchart/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue OrganizationChart Component</Title>
+            <Meta name="description" content="OrganizationChart visualizes hierarchical organization data." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>OrganizationChart</h1>
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index ca47862ae..298776934 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/overlaypanel/index.vue
@@ -1,9 +1,14 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Popover Component</Title>
+            <Meta name="description" content="OverlayPanel also known as Popover, is a container component that can overlay other components on page." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>OverlayPanel</h1>
-                <p>OverlayPanel is a container component positioned as connected to its target.</p>
+                <p>OverlayPanel also known as Popover, is a container component that can overlay other components on page.</p>
             </div>
             <AppDemoActions />
         </div>
diff --git a/pages/paginator/index.vue b/pages/paginator/index.vue
index 85fd3b592..8498175bf 100755
--- a/pages/paginator/index.vue
+++ b/pages/paginator/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Paginator Component</Title>
+            <Meta name="description" content="Paginator is a generic widget to display content in paged format." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Paginator</h1>
diff --git a/pages/panel/index.vue b/pages/panel/index.vue
index ef4dedbb8..d7cc4a7e9 100755
--- a/pages/panel/index.vue
+++ b/pages/panel/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Panel Component</Title>
+            <Meta name="description" content="Panel is a grouping component providing with content toggle feature." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Panel</h1>
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index ac28ab7d1..17f8ab5f4 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue PanelMenu Component</Title>
+            <Meta name="description" content="PanelMenu is a hybrid of accordion-tree components." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>PanelMenu</h1>
diff --git a/pages/password/index.vue b/pages/password/index.vue
index 06ddcbf4e..faf18a832 100755
--- a/pages/password/index.vue
+++ b/pages/password/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Password Component</Title>
+            <Meta name="description" content="Password displays strength indicator for password fields." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Password</h1>
diff --git a/pages/picklist/index.vue b/pages/picklist/index.vue
index 0a221eca1..db67dcfea 100755
--- a/pages/picklist/index.vue
+++ b/pages/picklist/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue PickList Component</Title>
+            <Meta name="description" content="PickList is used to reorder items between different lists." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>PickList</h1>
diff --git a/pages/progressbar/index.vue b/pages/progressbar/index.vue
index 99ef03745..ce9675758 100755
--- a/pages/progressbar/index.vue
+++ b/pages/progressbar/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ProgressBar Component</Title>
+            <Meta name="description" content="ProgressBar is a process status indicator." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ProgressBar</h1>
diff --git a/pages/progressspinner/index.vue b/pages/progressspinner/index.vue
index 8db65a2a5..ea1797980 100755
--- a/pages/progressspinner/index.vue
+++ b/pages/progressspinner/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ProgressSpinner Component</Title>
+            <Meta name="description" content="ProgressSpinner is a process status indicator." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ProgressSpinner</h1>
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index 4f6530ed7..64e324198 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue RadioButton Component</Title>
+            <Meta name="description" content="RadioButton is an extension to standard radio button element with theming." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>RadioButton</h1>
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 266dea3c6..05936698c 100755
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Rating Component</Title>
+            <Meta name="description" content="Rating component is a star based selection input." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Rating</h1>
diff --git a/pages/ripple/index.vue b/pages/ripple/index.vue
index da391f7d2..1addee330 100644
--- a/pages/ripple/index.vue
+++ b/pages/ripple/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Ripple Directive</Title>
+            <Meta name="description" content="Ripple component adds ripple effect to the host element." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Ripple</h1>
diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
index d8c0be416..d0d7cb79a 100644
--- a/pages/roadmap/index.vue
+++ b/pages/roadmap/index.vue
@@ -1,5 +1,14 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Roadmap</Title>
+            <Meta
+                name="description"
+                content="These are planned to be implemented in parellel to the regular
+                    maintenance work of the PrimeVue library"
+            />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Roadmap</h1>
diff --git a/pages/scrollpanel/index.vue b/pages/scrollpanel/index.vue
index 4a811f1e2..9d418c70a 100644
--- a/pages/scrollpanel/index.vue
+++ b/pages/scrollpanel/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ScrollPanel Component</Title>
+            <Meta name="description" content="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ScrollPanel</h1>
diff --git a/pages/scrolltop/index.vue b/pages/scrolltop/index.vue
index d9429e71e..58ac0b516 100644
--- a/pages/scrolltop/index.vue
+++ b/pages/scrolltop/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ScrollTop Component</Title>
+            <Meta name="description" content="ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ScrollTop</h1>
diff --git a/pages/selectbutton/index.vue b/pages/selectbutton/index.vue
index 3fa518828..45a42a9fd 100755
--- a/pages/selectbutton/index.vue
+++ b/pages/selectbutton/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue SelectButton Component</Title>
+            <Meta name="description" content="SelectButton is used to choose single or multiple items from a list using buttons." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>SelectButton</h1>
diff --git a/pages/setup/index.vue b/pages/setup/index.vue
index 42b5f22ce..64a9f3517 100755
--- a/pages/setup/index.vue
+++ b/pages/setup/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Getting Started - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue is a rich set of open source native components for Vue." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Setup</h1>
diff --git a/pages/sidebar/index.vue b/pages/sidebar/index.vue
index 8a62a8704..b6750d957 100755
--- a/pages/sidebar/index.vue
+++ b/pages/sidebar/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Sidebar Component</Title>
+            <Meta name="description" content="Sidebar is a panel component displayed as an overlay." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Sidebar</h1>
diff --git a/pages/skeleton/index.vue b/pages/skeleton/index.vue
index c06eb6119..5b8bf7c18 100644
--- a/pages/skeleton/index.vue
+++ b/pages/skeleton/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Skeleton Component</Title>
+            <Meta name="description" content="Skeleton is a placeholder to display instead of the actual content." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Skeleton</h1>
diff --git a/pages/slider/index.vue b/pages/slider/index.vue
index a5afefa99..1394a3557 100755
--- a/pages/slider/index.vue
+++ b/pages/slider/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Slider Component</Title>
+            <Meta name="description" content="Slider is a component to provide input with a drag handle." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Slider</h1>
diff --git a/pages/speeddial/index.vue b/pages/speeddial/index.vue
index 351b36ffe..26490dc2b 100644
--- a/pages/speeddial/index.vue
+++ b/pages/speeddial/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Speed Dial Component</Title>
+            <Meta name="description" content="When pressed, a floating action button can display multiple primary actions that can be performed on a page." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Speed Dial</h1>
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index da343b832..24d891738 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue SplitButton Component</Title>
+            <Meta name="description" content="SplitButton groups a set of commands in an overlay with a default command." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>SplitButton</h1>
diff --git a/pages/splitter/index.vue b/pages/splitter/index.vue
index 2d5855e12..680a6511a 100644
--- a/pages/splitter/index.vue
+++ b/pages/splitter/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Splitter Component</Title>
+            <Meta name="description" content="Splitter is utilized to separate and resize panels." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Splitter</h1>
diff --git a/pages/steps/index.vue b/pages/steps/index.vue
index 45df20732..74d15162e 100755
--- a/pages/steps/index.vue
+++ b/pages/steps/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Stepper Component</Title>
+            <Meta name="description" content="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Steps</h1>
diff --git a/pages/styleclass/index.vue b/pages/styleclass/index.vue
index 79f5cdca9..12f8e8f23 100644
--- a/pages/styleclass/index.vue
+++ b/pages/styleclass/index.vue
@@ -1,28 +1,35 @@
 <template>
     <div>
-        <div class="content-section introduction">
-            <div class="feature-intro">
-                <h1>StyleClass</h1>
-                <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
+        <Head>
+            <Title>Vue StyleClass Directive</Title>
+            <Meta name="description" content="StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element." />
+        </Head>
+
+        <div>
+            <div class="content-section introduction">
+                <div class="feature-intro">
+                    <h1>StyleClass</h1>
+                    <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
+                </div>
+                <AppDemoActions />
             </div>
-            <AppDemoActions />
         </div>
-    </div>
 
-    <div class="content-section implementation">
-        <div class="card">
-            <h5>Toggle Class</h5>
-            <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
-            <InputText class="block mt-3" />
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Toggle Class</h5>
+                <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+                <InputText class="block mt-3" />
 
-            <h5>Animations</h5>
-            <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
-            <div class="box hidden">Content</div>
+                <h5>Animations</h5>
+                <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
+                <div class="box hidden">Content</div>
+            </div>
         </div>
-    </div>
 
-    <StyleClassDoc />
+        <StyleClassDoc />
+    </div>
 </template>
 
 <script>
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index 9b5c5eb8c..149448cd9 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue TabMenu Component</Title>
+            <Meta name="description" content="TabMenu is a navigation/command component that displays items as tab headers." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TabMenu</h1>
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
index 29f2037ac..18ce16a23 100755
--- a/pages/tabview/index.vue
+++ b/pages/tabview/index.vue
@@ -1,5 +1,9 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Tabs Component</Title>
+            <Meta name="description" content="TabView is a container component to group content with tabs." />
+        </Head>
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TabView</h1>
diff --git a/pages/tag/index.vue b/pages/tag/index.vue
index 42cebef08..555b79e5c 100644
--- a/pages/tag/index.vue
+++ b/pages/tag/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Tag Component</Title>
+            <Meta name="description" content="Tag component is used to categorize content." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tag</h1>
diff --git a/pages/terminal/index.vue b/pages/terminal/index.vue
index 0eee3df05..00cbda2d2 100755
--- a/pages/terminal/index.vue
+++ b/pages/terminal/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Terminal Component</Title>
+            <Meta name="description" content="Terminal is a text based user interface." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Terminal</h1>
diff --git a/pages/textarea/index.vue b/pages/textarea/index.vue
index 3413450c6..bd238eb88 100755
--- a/pages/textarea/index.vue
+++ b/pages/textarea/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Textarea Component</Title>
+            <Meta name="description" content="Textarea adds styling, key filtering and autoResize functionality to standard textarea element." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Textarea</h1>
diff --git a/pages/theming/index.vue b/pages/theming/index.vue
index fba32800c..705c35481 100755
--- a/pages/theming/index.vue
+++ b/pages/theming/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Theming - PrimeVue</Title>
+            <Meta name="description" content="Choose from a variety of themes or develop your own theme easily." />
+        </Head>
+
         <div class="content-section documentation">
             <h1>Theming</h1>
             <p>Choose from a variety of themes or develop your own theme easily.</p>
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index a417a8448..19d6816a8 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue TieredMenu Component</Title>
+            <Meta name="description" content="TieredMenu displays submenus in nested overlays." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TieredMenu</h1>
diff --git a/pages/timeline/index.vue b/pages/timeline/index.vue
index 541bfa9c8..f2639fe91 100644
--- a/pages/timeline/index.vue
+++ b/pages/timeline/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Timeline Component</Title>
+            <Meta name="description" content="Timeline visualizes a series of chained events." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Timeline</h1>
diff --git a/pages/toast/index.vue b/pages/toast/index.vue
index 6204c42da..8de9469aa 100755
--- a/pages/toast/index.vue
+++ b/pages/toast/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Toast Component</Title>
+            <Meta name="description" content="Toast is used to display messages in an overlay." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Toast</h1>
diff --git a/pages/togglebutton/index.vue b/pages/togglebutton/index.vue
index a02b71dbf..ab8ed4685 100755
--- a/pages/togglebutton/index.vue
+++ b/pages/togglebutton/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue ToggleButton Component</Title>
+            <Meta name="description" content="ToggleButton is used to select a boolean value using a button." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>ToggleButton</h1>
diff --git a/pages/toolbar/index.vue b/pages/toolbar/index.vue
index 0d946869d..dd0291937 100755
--- a/pages/toolbar/index.vue
+++ b/pages/toolbar/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Toolbar Component</Title>
+            <Meta name="description" content="Toolbar is a grouping component for buttons and other content." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Toolbar</h1>
diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue
index 03d426ed6..e44ee0099 100755
--- a/pages/tooltip/index.vue
+++ b/pages/tooltip/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Tooltip Directive</Title>
+            <Meta name="description" content="Tooltip functionality is integrated within various PrimeVue components." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tooltip</h1>
diff --git a/pages/tree/index.vue b/pages/tree/index.vue
index e4b70dc5c..614d3dab5 100755
--- a/pages/tree/index.vue
+++ b/pages/tree/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue Tree Component</Title>
+            <Meta name="description" content="Tree is used to display hierarchical data." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree</h1>
diff --git a/pages/treeselect/index.vue b/pages/treeselect/index.vue
index 667571b62..be2c50ee4 100644
--- a/pages/treeselect/index.vue
+++ b/pages/treeselect/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue TreeSelect Component</Title>
+            <Meta name="description" content="TreeSelect is a form component to choose from hierarchical data." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeSelect</h1>
diff --git a/pages/treetable/index.vue b/pages/treetable/index.vue
index ab6b0edbb..5f08ad60d 100755
--- a/pages/treetable/index.vue
+++ b/pages/treetable/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue TreeTable Component</Title>
+            <Meta name="description" content="TreeTable is used to display hierarchical data in tabular format." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable</h1>
diff --git a/pages/tristatecheckbox/index.vue b/pages/tristatecheckbox/index.vue
index b5a9abf1b..167430ba5 100755
--- a/pages/tristatecheckbox/index.vue
+++ b/pages/tristatecheckbox/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue TriStateCheckbox Component</Title>
+            <Meta name="description" content="TriStateCheckbox is used to select either true, false or null as the value." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TriStateCheckbox</h1>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index 0ec244a36..9fdc715d9 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>UI Kit - PrimeVue</Title>
+            <Meta name="description" content="Design files for PrimeVue Components." />
+        </Head>
+
         <div class="content-section">
             <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
                 <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
diff --git a/pages/validation/index.vue b/pages/validation/index.vue
index 30a0e0def..34daa3489 100644
--- a/pages/validation/index.vue
+++ b/pages/validation/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Form Integration - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue components can be easily used/integrated with Vuelidate" />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Vuelidate</h1>
diff --git a/pages/virtualscroller/index.vue b/pages/virtualscroller/index.vue
index 603c6897f..0797f9b1c 100644
--- a/pages/virtualscroller/index.vue
+++ b/pages/virtualscroller/index.vue
@@ -1,5 +1,10 @@
 <template>
     <div>
+        <Head>
+            <Title>Vue VirtualScroller Component</Title>
+            <Meta name="description" content="VirtualScroller is a performant approach to handle huge data efficiently." />
+        </Head>
+
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>VirtualScroller</h1>