diff --git a/pages/steps.vue b/pages/steps.vue
new file mode 100755
index 000000000..be87dcc68
--- /dev/null
+++ b/pages/steps.vue
@@ -0,0 +1,88 @@
+<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>
+                <p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <Steps :model="items" aria-label="Form Steps" />
+            </div>
+
+            <NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
+                <keep-alive>
+                    <component :is="Component" />
+                </keep-alive>
+            </NuxtPage>
+        </div>
+
+        <StepsDoc />
+    </div>
+</template>
+
+<script>
+import StepsDoc from './steps/StepsDoc';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Personal',
+                    to: '/steps'
+                },
+                {
+                    label: 'Seat',
+                    to: '/steps/seat'
+                },
+                {
+                    label: 'Payment',
+                    to: '/steps/payment'
+                },
+                {
+                    label: 'Confirmation',
+                    to: '/steps/confirmation'
+                }
+            ],
+            formObject: {}
+        };
+    },
+    methods: {
+        nextPage(event) {
+            for (let field in event.formData) {
+                this.formObject[field] = event.formData[field];
+            }
+
+            this.$router.push(this.items[event.pageIndex + 1].to);
+        },
+        prevPage(event) {
+            this.$router.push(this.items[event.pageIndex - 1].to);
+        },
+        complete() {
+            this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
+        }
+    },
+    components: {
+        StepsDoc: StepsDoc
+    }
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep(b) {
+    display: block;
+}
+
+::v-deep(.p-card-body) {
+    padding: 2rem;
+}
+</style>
diff --git a/pages/steps/Personal.vue b/pages/steps/Personal.vue
deleted file mode 100755
index bc8d2bdc8..000000000
--- a/pages/steps/Personal.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <div class="stepsdemo-content">
-        <Card>
-            <template v-slot:title> Personal Information </template>
-            <template v-slot:subtitle> Enter your personal information </template>
-            <template v-slot:content>
-                <div class="p-fluid">
-                    <div class="field">
-                        <label for="firstname">Firstname</label>
-                        <InputText id="firstname" v-model="firstname" :class="{ 'p-invalid': validationErrors.firstname && submitted }" />
-                        <small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
-                    </div>
-                    <div class="field">
-                        <label for="lastname">Lastname</label>
-                        <InputText id="lastname" v-model="lastname" :class="{ 'p-invalid': validationErrors.lastname && submitted }" />
-                        <small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
-                    </div>
-                    <div class="field">
-                        <label for="age">Age</label>
-                        <InputNumber id="age" v-model="age" />
-                    </div>
-                </div>
-            </template>
-            <template v-slot:footer>
-                <div class="grid grid-nogutter justify-content-between">
-                    <i></i>
-                    <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
-                </div>
-            </template>
-        </Card>
-    </div>
-</template>
-
-<script>
-export default {
-    emits: ['next-page'],
-    data() {
-        return {
-            firstname: '',
-            lastname: '',
-            age: null,
-            submitted: false,
-            validationErrors: {}
-        };
-    },
-    methods: {
-        nextPage() {
-            this.submitted = true;
-
-            if (this.validateForm()) {
-                this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
-            }
-        },
-        validateForm() {
-            if (!this.firstname.trim()) this.validationErrors['firstname'] = true;
-            else delete this.validationErrors['firstname'];
-
-            if (!this.lastname.trim()) this.validationErrors['lastname'] = true;
-            else delete this.validationErrors['lastname'];
-
-            return !Object.keys(this.validationErrors).length;
-        }
-    }
-};
-</script>
diff --git a/pages/steps/index.vue b/pages/steps/index.vue
index 74d15162e..bc8d2bdc8 100755
--- a/pages/steps/index.vue
+++ b/pages/steps/index.vue
@@ -1,88 +1,65 @@
 <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>
-                <p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
-            </div>
-            <AppDemoActions />
-        </div>
-
-        <div class="content-section implementation">
-            <div class="card">
-                <Steps :model="items" aria-label="Form Steps" />
-            </div>
-
-            <router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
-                <keep-alive>
-                    <component :is="Component" />
-                </keep-alive>
-            </router-view>
-        </div>
-
-        <StepsDoc />
+    <div class="stepsdemo-content">
+        <Card>
+            <template v-slot:title> Personal Information </template>
+            <template v-slot:subtitle> Enter your personal information </template>
+            <template v-slot:content>
+                <div class="p-fluid">
+                    <div class="field">
+                        <label for="firstname">Firstname</label>
+                        <InputText id="firstname" v-model="firstname" :class="{ 'p-invalid': validationErrors.firstname && submitted }" />
+                        <small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
+                    </div>
+                    <div class="field">
+                        <label for="lastname">Lastname</label>
+                        <InputText id="lastname" v-model="lastname" :class="{ 'p-invalid': validationErrors.lastname && submitted }" />
+                        <small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
+                    </div>
+                    <div class="field">
+                        <label for="age">Age</label>
+                        <InputNumber id="age" v-model="age" />
+                    </div>
+                </div>
+            </template>
+            <template v-slot:footer>
+                <div class="grid grid-nogutter justify-content-between">
+                    <i></i>
+                    <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
+                </div>
+            </template>
+        </Card>
     </div>
 </template>
 
 <script>
-import StepsDoc from './StepsDoc';
-
 export default {
+    emits: ['next-page'],
     data() {
         return {
-            items: [
-                {
-                    label: 'Personal',
-                    to: '/steps'
-                },
-                {
-                    label: 'Seat',
-                    to: '/steps/seat'
-                },
-                {
-                    label: 'Payment',
-                    to: '/steps/payment'
-                },
-                {
-                    label: 'Confirmation',
-                    to: '/steps/confirmation'
-                }
-            ],
-            formObject: {}
+            firstname: '',
+            lastname: '',
+            age: null,
+            submitted: false,
+            validationErrors: {}
         };
     },
     methods: {
-        nextPage(event) {
-            for (let field in event.formData) {
-                this.formObject[field] = event.formData[field];
-            }
+        nextPage() {
+            this.submitted = true;
 
-            this.$router.push(this.items[event.pageIndex + 1].to);
+            if (this.validateForm()) {
+                this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
+            }
         },
-        prevPage(event) {
-            this.$router.push(this.items[event.pageIndex - 1].to);
-        },
-        complete() {
-            this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
+        validateForm() {
+            if (!this.firstname.trim()) this.validationErrors['firstname'] = true;
+            else delete this.validationErrors['firstname'];
+
+            if (!this.lastname.trim()) this.validationErrors['lastname'] = true;
+            else delete this.validationErrors['lastname'];
+
+            return !Object.keys(this.validationErrors).length;
         }
-    },
-    components: {
-        StepsDoc: StepsDoc
     }
 };
 </script>
-
-<style scoped lang="scss">
-::v-deep(b) {
-    display: block;
-}
-
-::v-deep(.p-card-body) {
-    padding: 2rem;
-}
-</style>
diff --git a/pages/tabmenu.vue b/pages/tabmenu.vue
new file mode 100755
index 000000000..a66d60bba
--- /dev/null
+++ b/pages/tabmenu.vue
@@ -0,0 +1,72 @@
+<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>
+                <p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Default</h5>
+                <TabMenu :model="items" />
+                <NuxtPage />
+            </div>
+
+            <div class="card">
+                <h5>Programmatic</h5>
+                <div class="py-2">
+                    <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                    <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                    <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+                </div>
+
+                <TabMenu v-model:activeIndex="active" :model="items2" />
+            </div>
+        </div>
+
+        <TabMenuDoc />
+    </div>
+</template>
+
+<script>
+import TabMenuDoc from './tabmenu/TabMenuDoc';
+
+export default {
+    data() {
+        return {
+            active: 3,
+            items: [
+                { label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
+                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
+                { label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
+                { label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
+                { label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
+            ],
+            items2: [
+                { label: 'Home', icon: 'pi pi-fw pi-home' },
+                { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
+                { label: 'Edit', icon: 'pi pi-fw pi-pencil' },
+                { label: 'Documentation', icon: 'pi pi-fw pi-file' },
+                { label: 'Settings', icon: 'pi pi-fw pi-cog' }
+            ]
+        };
+    },
+    components: {
+        TabMenuDoc: TabMenuDoc
+    }
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep(.tabmenudemo-content) {
+    padding: 2rem 1rem;
+}
+</style>
diff --git a/pages/tabmenu/Home.vue b/pages/tabmenu/Home.vue
deleted file mode 100755
index e73f7970c..000000000
--- a/pages/tabmenu/Home.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="tabmenudemo-content">
-        <h5>Home Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index 149448cd9..e73f7970c 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -1,72 +1,9 @@
 <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>
-                <p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
-            </div>
-            <AppDemoActions />
-        </div>
-
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Default</h5>
-                <TabMenu :model="items" />
-                <router-view />
-            </div>
-
-            <div class="card">
-                <h5>Programmatic</h5>
-                <div class="py-2">
-                    <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-                    <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
-                    <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
-                </div>
-
-                <TabMenu v-model:activeIndex="active" :model="items2" />
-            </div>
-        </div>
-
-        <TabMenuDoc />
+    <div class="tabmenudemo-content">
+        <h5>Home Component Content</h5>
     </div>
 </template>
 
 <script>
-import TabMenuDoc from './TabMenuDoc';
-
-export default {
-    data() {
-        return {
-            active: 3,
-            items: [
-                { label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
-                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
-                { label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
-                { label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
-                { label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
-            ],
-            items2: [
-                { label: 'Home', icon: 'pi pi-fw pi-home' },
-                { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
-                { label: 'Edit', icon: 'pi pi-fw pi-pencil' },
-                { label: 'Documentation', icon: 'pi pi-fw pi-file' },
-                { label: 'Settings', icon: 'pi pi-fw pi-cog' }
-            ]
-        };
-    },
-    components: {
-        TabMenuDoc: TabMenuDoc
-    }
-};
+export default {};
 </script>
-
-<style scoped lang="scss">
-::v-deep(.tabmenudemo-content) {
-    padding: 2rem 1rem;
-}
-</style>
