{"id":13859246,"url":"https://github.com/siegerts/plumber-vue","last_synced_at":"2025-07-08T12:33:18.352Z","repository":{"id":37920280,"uuid":"215058494","full_name":"siegerts/plumber-vue","owner":"siegerts","description":"Project structure showing the use of an R-based Plumber API with a Vue frontend, using Vue CLI.","archived":false,"fork":false,"pushed_at":"2022-12-11T09:22:03.000Z","size":2042,"stargazers_count":10,"open_issues_count":18,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-04T14:20:33.116Z","etag":null,"topics":["plumber-api","r","rest-api","rstats","rstudio","rstudio-connect","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siegerts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-14T13:58:28.000Z","updated_at":"2024-07-19T06:30:34.000Z","dependencies_parsed_at":"2023-01-26T20:01:17.971Z","dependency_job_id":null,"html_url":"https://github.com/siegerts/plumber-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siegerts/plumber-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siegerts%2Fplumber-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siegerts%2Fplumber-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siegerts%2Fplumber-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siegerts%2Fplumber-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siegerts","download_url":"https://codeload.github.com/siegerts/plumber-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siegerts%2Fplumber-vue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264270233,"owners_count":23582415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plumber-api","r","rest-api","rstats","rstudio","rstudio-connect","vuejs"],"created_at":"2024-08-05T03:02:39.195Z","updated_at":"2025-07-08T12:33:18.322Z","avatar_url":"https://github.com/siegerts.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# plumber-vue\n\nProject structure showing the use of an R-based [Plumber API](https://github.com/rstudio/plumber) with a [Vue](https://vuejs.org/) frontend, using Vue CLI.\n\n## Project Structure\n\nCreates a single-page application that operates on the same origin. For that reason, it isn't necessary to enable CORS on the specific routes if accessed from within the application.\n\nThis allows a development split between the analytical logic, served by the API, and the presentation logic and development workflow.\n\n### Directory Structure\n\n```\n .\n ├── files/ # output js built here, served as Plumber static assets\n ├── js/\n │   ├─ src/\n │   ├─ components/\n │   ├─ .env.local\n │   └─ main.js\n │\n ├─ entrypoint.R\n └─ plumber.R\n```\n\nThe static Vue assets can then be built into the `@assets` directory served by Plumber.\n\n```r\n# plumber.R\n\n#* @assets ./files/static /\nlist()\n```\n\nUsing the below structure in the `vue.config.js`:\n\n```js\n// vue.config.js\nmodule.exports = {\n  publicPath:\n    process.env.NODE_ENV == \"production\" ? process.env.CONNECT_URL : \"/\",\n  outputDir: \"../files/static\",\n  devServer: {\n    proxy: process.env.PROXY_URL\n  }\n};\n```\n\nThe `env` variables are defined in a [`.env`](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables) file in the `/js` root.\n\n```ini\nCONNECT_URL=\u003cfor deployment on RStudio Connect\u003e\nPROXY_URL=http://localhost:\u003cport of plumber app\u003e\n```\n\n## Frontend Application\n\nThe Vue application uses [axios](https://github.com/axios/axios) to make requests back to the API routes.\n\n```js\n// main.js\nconst HTTP = axios.create({\n  baseURL: process.env.NODE_ENV == \"production\" ? process.env.CONNECT_URL : \"\"\n});\n\nVue.prototype.$axios = HTTP;\n```\n\nEvery request using `this.$axios` within the VUe app will now use the `HTTP` custom instance.\n\n## Development\n\nAfter cloning the repo:\n\n```bash\nyarn install # or npm install\n```\n\n### Start the frontend application\n\nMake sure that the Plumber application is also running at this time since the API, even in development mode is making requests against the API endpoints.\n\n```bash\nyarn serve\n```\n\n### Build the frontend assets into the Plumber project\n\n```bash\nyarn build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiegerts%2Fplumber-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiegerts%2Fplumber-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiegerts%2Fplumber-vue/lists"}