{"id":13734605,"url":"https://github.com/ramnathv/vuer","last_synced_at":"2026-01-12T08:04:40.014Z","repository":{"id":66206115,"uuid":"173347820","full_name":"ramnathv/vuer","owner":"ramnathv","description":"Harness the Power of Vue.js in R","archived":false,"fork":false,"pushed_at":"2019-09-19T20:35:38.000Z","size":95,"stargazers_count":41,"open_issues_count":0,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-14T14:55:39.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ramnathv.github.io/vuer","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ramnathv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-01T18:12:51.000Z","updated_at":"2021-11-05T02:42:37.000Z","dependencies_parsed_at":"2024-01-06T14:04:19.640Z","dependency_job_id":null,"html_url":"https://github.com/ramnathv/vuer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramnathv%2Fvuer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramnathv%2Fvuer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramnathv%2Fvuer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ramnathv%2Fvuer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ramnathv","download_url":"https://codeload.github.com/ramnathv/vuer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253046002,"owners_count":21845824,"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":[],"created_at":"2024-08-03T03:00:57.963Z","updated_at":"2026-01-12T08:04:40.008Z","avatar_url":"https://github.com/ramnathv.png","language":"R","funding_links":[],"categories":["UI Components","R"],"sub_categories":["Vue.js"],"readme":"# vuer \u003cimg src=\"https://i.imgur.com/HHzsuI9.png\" align='right' width='120px'/\u003e\n\n[![lifecycle](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://www.tidyverse.org/lifecycle/#experimental)\n\n`vuer` is an R package that makes it easy to use Vue components and build Vue apps.\n\n\u003e Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases.\n\n\n## Installation\n\nYou can install `vuer` from github using `remotes` or `devtools`.\n\n```r\nremotes::install_github('ramnathv/vuer')\n```\n\n## Usage\n\n### Example 1: Hello World\n\nWe can use `vuer` to create purely client-side web-apps taking advantage of its simple API and two-way data bindings. In this simple example, we let a user enter their name and display a greeting message. \n\n```r\ntags$div(style = 'height:100px;width:400px;',\n  tags$label('Enter your name: '),\n  tags$input(type = \"text\", \"v-model\" = \"name\"),\n  tags$p(class = \"lead\", \"Hello {{name}}\")\n) %\u003e% \n  appendDependencies(\n    htmldeps::html_dependency_bootstrap('cosmo')\n  ) %\u003e%\n  Vue(data = list(name = \"\"))\n```\n\n![hello-world](https://media.giphy.com/media/QmKxl4fJZtAEHkepJM/giphy.gif)\n\nThe power of `vuer` starts truly shining when we are able to let Vue communicate with Shiny. This opens up an unlimited range of possibilities that we will explore in detail. The next two examples explore how Vue and Shiny can communicate with each other.\n\n### Example 2: Vue -\u003e Shiny\n\nIt is dead-simple to let Vue communicate with Shiny. All it takes is adding an underscore at the end of any data variable passed to `Vue`. This automatically sets up watcher functions to update shiny when the underlying value changes, thereby triggering any reactive paths that depend on it. This example is very similar to the first one in that we let a user enter their name and display a greeting message. The key difference is that the greeting message is from Shiny on the server side.\n\n```r\nui \u003c- fluidPage(theme = shinythemes::shinytheme(\"cosmo\"),\n  tags$div(\n    tags$label('Enter your name'),\n    tags$input(type = \"text\", \"v-model\" = \"name\"),\n    uiOutput(\"greeting\")\n  ) %\u003e% \n  Vue(\n    data = list(name_ = \"\")\n  )\n)\n\n\nserver \u003c- function(input, output, session){\n  output$greeting \u003c- renderUI({\n    tags$p(paste(\"Hello\", input$name))\n  })\n}\n\nshinyApp(ui = ui, server = server)\n```\n\n\n### Example 3: Shiny -\u003e Vue\n\nIt is equally easy to let Shiny communicate with Vue. In this example we pass the coordinates of a plot brush to Vue and display it as JSON.\n\n```r\nlibrary(shiny)\nlibrary(ggplot2)\nlibrary(vuer)\nui \u003c- fluidPage(theme = shinythemes::shinytheme(\"cosmo\"),\n  titlePanel(title = 'Shiny -\u003e Vue'),\n  mainPanel(\n    plotOutput('plot', brush = brushOpts('plot_brush'), height = '300'),\n    tags$pre(\"v-if\" = \"plot_brush !== null\", \n      tags$code(\"{{plot_brush}}\")\n    ) %\u003e% \n      Vue(data = list(plot_brush = c()), elementId = \"app\")\n  )\n)\n\nserver \u003c- function(input, output, session){\n  output$plot \u003c- renderPlot({\n    ggplot(mtcars, aes(x = mpg, y = wt)) +\n      geom_point()\n  })\n  observeEvent(input$plot_brush, {\n    vueProxy(\"app\") %\u003e% \n      vueUpdateData(plot_brush = input$plot_brush$coords_img)\n  })\n}\nshinyApp(ui = ui, server = server)\n```\n\n![shiny-vue](https://media.giphy.com/media/c6XuxhQrLTUid7m76o/giphy.gif)\n\n\n## Acknowledgements\n\nThis package was inspired by Kenton Russell's [experiments](https://github.com/timelyportfolio/vueR) using Vue in R, as well as the efforts taken by the [react-R](https://github.com/react-R/reactR) team in integrating `React.js` with R. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framnathv%2Fvuer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framnathv%2Fvuer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framnathv%2Fvuer/lists"}