starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-25 16:55:59 +03:00

[GH-ISSUE #384] npm modules of postwoman's vue components #138

New issue

Closed

opened 2026-03-16 13:38:12 +03:00 by kerem · 7 comments

kerem commented

2026-03-16 13:38:12 +03:00

Owner

Originally created by @yubathom on GitHub (Nov 30, 2019).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/384

Is your feature request related to a problem? Please describe.
Yes. After deploying and testing an API it is a common task to create documentation websites. Postwoman is great for testing but it can't be used to create theese sites yet.

Describe the solution you'd like
Publish in NPM postwoman modules as vue components. So, in a documentation website you could use it like this:

<pw-rest
  :description="'A list of users'"
  :path="'api/users'"
  :url="'https://reqres.in/'"/>

I wrote an example for rest apis and name it pw-rest (just GETs are working):

use cases:

Many api documentation websites are using vuepress. In which theese modules could be easily imported and used in markdowns
With theese modules available some api documentation themes could be provided :)

Describe alternatives you've considered
Rely completly in a self based solution, like postman's docs.

Additional context
This enhancement is related to #326

Originally created by @yubathom on GitHub (Nov 30, 2019). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/384 **Is your feature request related to a problem? Please describe.** Yes. After deploying and testing an API it is a common task to create documentation websites. Postwoman is great for testing but it can't be used to create theese sites yet. **Describe the solution you'd like** Publish in **NPM** postwoman modules as vue components. So, in a documentation website you could use it like this: ```js <pw-rest :description="'A list of users'" :path="'api/users'" :url="'https://reqres.in/'"/> ``` I wrote an example for rest apis and name it `pw-rest` (just GETs are working): [![Edit pw-rest component draft](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pw-rest-component-draft-m6lop?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark) use cases: - Many api documentation websites are using [vuepress](vuepress.vuejs.org). In which theese modules could be easily imported and used in markdowns - With theese modules available some api documentation themes could be provided :) **Describe alternatives you've considered** Rely completly in a self based solution, like postman's docs. **Additional context** This enhancement is related to #326

kerem

2026-03-16 13:38:12 +03:00

closed this issue
added the
feature
label

kerem commented

2026-03-16 13:38:28 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 30, 2019):

This is awesome.

@liyasthomas commented on GitHub (Nov 30, 2019): This is awesome.

kerem commented

2026-03-16 13:38:34 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 30, 2019):

I gonna invest more time to this. Because this seems like a top priority. @yubathom can't we make the current implementation wrapped into a wrapper for npm module? With scoped styling and all.

@liyasthomas commented on GitHub (Nov 30, 2019): I gonna invest more time to this. Because this seems like a top priority. @yubathom can't we make the current implementation wrapped into a wrapper for npm module? With scoped styling and all.

kerem commented

2026-03-16 13:38:39 +03:00

Author

Owner

@yubathom commented on GitHub (Dec 1, 2019):

I am not sure.. I will give a try and investigate a solution 🔍 If you find a nuxt project sharing components at npm please share it to me :octocat:

@yubathom commented on GitHub (Dec 1, 2019): I am not sure.. I will give a try and investigate a solution :mag: If you find a nuxt project sharing components at npm please share it to me :octocat:

kerem commented

2026-03-16 13:38:44 +03:00

Author

Owner

@liyasthomas commented on GitHub (Dec 1, 2019):

I'm on it 🤝

@liyasthomas commented on GitHub (Dec 1, 2019): I'm on it 🤝

kerem commented

2026-03-16 13:38:49 +03:00

Author

Owner

@yubathom commented on GitHub (Jan 26, 2020):

Hey @liyasthomas, I made a setup with rollup to publish standalone components:
https://github.com/yubathom/postwoman/tree/feature/library

Take a look at lib/ folder

As a prove of concept it's exporting components/logo.vue.

Everything that is exported at library/lib/lib-components/index.js could be published and available at npm.

there is some new scripts:

lib-build -> build components at lib/dist
lib-dev -> starts localhost:8080 to develop and test the components before publishing

To publish it you should type npm publish after npm run lib-build

And then, in another project we could install theese

npm i postwoman --save

and in a vue component you could import and use it

import { Logo } from 'postwoman'

export default {
  components: { Logo }
}

<logo :color="'rgba(80, 250, 123, 1)'" />

Downsides

I could not find a way to achieve this setup without rollup and vue-cli
Because of theese there is a lot of new devDependencies (check package.json)
To make something usefull we will need to make some refactoring

So, before submitting the PR, I would like to discuss if this approach is ok..

@yubathom commented on GitHub (Jan 26, 2020): Hey @liyasthomas, I made a setup with rollup to publish standalone components: https://github.com/yubathom/postwoman/tree/feature/library Take a look at `lib/` folder As a prove of concept it's exporting `components/logo.vue`. Everything that is exported at [library/lib/lib-components/index.js](https://github.com/yubathom/postwoman/blob/feature/library/lib/lib-components/index.js) could be published and available at npm. there is some new scripts: - `lib-build` -> build components at `lib/dist` - `lib-dev` -> starts localhost:8080 to develop and test the components before publishing To publish it you should type `npm publish` after `npm run lib-build` And then, in another project we could install theese ```bash npm i postwoman --save ``` and in a vue component you could import and use it ```javascript import { Logo } from 'postwoman' export default { components: { Logo } } ``` ```xml <logo :color="'rgba(80, 250, 123, 1)'" /> ``` ## Downsides - I could not find a way to achieve this setup without rollup and vue-cli - Because of theese there is a lot of new devDependencies (check [package.json](https://github.com/yubathom/postwoman/blob/feature/library/package.json)) - To make something usefull we will need to make some refactoring So, before submitting the PR, I would like to discuss if this approach is ok..

kerem commented

2026-03-16 13:38:54 +03:00

Author

Owner

@liyasthomas commented on GitHub (Jan 26, 2020):

I think this approach is okay. But want to experiment with webpack for the same usecase.

@AndrewBastin @NBTX @jamesgeorge007
What you guys think?

@liyasthomas commented on GitHub (Jan 26, 2020): I think this approach is okay. But want to experiment with webpack for the same usecase. @AndrewBastin @NBTX @jamesgeorge007 What you guys think?

kerem commented

2026-03-16 13:38:59 +03:00

Author

Owner

@liyasthomas commented on GitHub (Apr 13, 2020):

Closing due to inactivity

@liyasthomas commented on GitHub (Apr 13, 2020): Closing due to inactivity

kerem referenced this issue

2026-03-17 00:08:18 +03:00

[PR #138] [MERGED] curl import added #2434

kerem referenced this issue

2026-03-17 00:09:57 +03:00