[PR #3503] [MERGED] feat: platform definition added for additional settings components #4412

New issue

Closed

opened 2026-03-17 01:57:07 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:57:07 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3503
Author: @anwarulislam
Created: 11/7/2023
Status: ✅ Merged
Merged: 11/29/2023
Merged by: @AndrewBastin

Base: release/2023.12.0 ← Head: feat/additional-settings-defination

📝 Commits (5)

28ec1a0 feat: platform defination added for additional settings
4239938 chore: tests components added for reviewer
4987874 chore: update profile sections definition
97285d3 chore: update settings sections definition
9645b63 chore: change profile sections order

📊 Changes

4 files changed (+31 additions, -2 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+1 -0)
📝 packages/hoppscotch-common/src/pages/profile.vue (+11 -2)
📝 packages/hoppscotch-common/src/pages/settings.vue (+9 -0)
📝 packages/hoppscotch-common/src/platform/ui.ts (+10 -0)

📄 Description

Closes HFE-239

Description

This PR adds platform definition for additional settings sections. So that different platforms can add additional settings by passing vue components inside an array.

To render additional components/sections in the profile page.

Create a Vue component

<template>
  <h1>Simple Vue Component</h1>
</template>

<script setup lang="ts"></script>

Import the component into main.ts file
And add the component into your ui?: UIPlatformDef options. eg:

createHoppApp("#app", {
  ui: {
    additionalProfileSections: [Test1],
  },
)

Not Completed
Completed

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3503 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 11/7/2023 **Status:** ✅ Merged **Merged:** 11/29/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.12.0` ← **Head:** `feat/additional-settings-defination` --- ### 📝 Commits (5) - [`28ec1a0`](https://github.com/hoppscotch/hoppscotch/commit/28ec1a0e0d087aba1143406be172ab0c772c0d9c) feat: platform defination added for additional settings - [`4239938`](https://github.com/hoppscotch/hoppscotch/commit/4239938e25c89041f144490e491b6b89661e636c) chore: tests components added for reviewer - [`4987874`](https://github.com/hoppscotch/hoppscotch/commit/4987874ddf03ad83a60ef9cfa37f70d2af38478a) chore: update profile sections definition - [`97285d3`](https://github.com/hoppscotch/hoppscotch/commit/97285d37b779cec0e8e7560530a2c6f928196454) chore: update settings sections definition - [`9645b63`](https://github.com/hoppscotch/hoppscotch/commit/9645b63fa558eb5aefec410565752838520c851d) chore: change profile sections order ### 📊 Changes **4 files changed** (+31 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+1 -0) 📝 `packages/hoppscotch-common/src/pages/profile.vue` (+11 -2) 📝 `packages/hoppscotch-common/src/pages/settings.vue` (+9 -0) 📝 `packages/hoppscotch-common/src/platform/ui.ts` (+10 -0) </details> ### 📄 Description  Closes HFE-239 ### Description This PR adds platform definition for additional settings sections. So that different platforms can add additional settings by passing vue components inside an array. To render additional components/sections in the profile page. 1. Create a Vue component ``` <template> <h1>Simple Vue Component</h1> </template> <script setup lang="ts"></script> ``` 2. Import the component into `main.ts` file 3. And add the component into your `ui?: UIPlatformDef` options. eg: ``` createHoppApp("#app", { ui: { additionalProfileSections: [Test1], }, ) ``` - [ ] Not Completed - [x] Completed ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>