Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active July 21, 2021 14:36
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save timelyportfolio/e2cf088a4cfccfbb1bdbf19ffd07f679 to your computer and use it in GitHub Desktop.
R Shiny and Vue Simple Example

Shiny == good & Vue == good | Shiny + Vue == good?

Shiny Shiny.shinyapp.$inputValues acts like a store of state. I thought it would be fun to let vuejs react to changes in Shiny input values. This example is intentionally very simple to hopefully self-explain.

vueR

I have assembled vueR package, like d3r and reactR, to offer helpers for vuejs. For this example please install vueR, or just add tags$script(src = "https://unpkg.com/vue@2.2.6") to the tagList().

devtools::install_github("timelyportfolio/vueR")`

Example

library(shiny)
library(htmltools)

ui <- tagList(
  textInput("textinput", label="Enter Something"),
  div(id="app","from Vue: {{textinput}}"),
  textOutput("textrepeat"),
  tags$script(
"
// wait for shiny:connected so that Shiny.shinyapp.$inputValues will exist
$(document).on('shiny:connected', function(a,b,c){
  var vb = new Vue({
    el: '#app',
    data: Shiny.shinyapp.$inputValues
  });
});
"
  ),
  vueR:::html_dependency_vue()
)

server <- function(input,output){
  # repeat text typed in textinput with Shiny
  output$textrepeat <- renderText({paste0("from Shiny: ", input$textinput)})
}

shinyApp(ui,server)

Screenshot

vue-shiny

library(shiny)
library(htmltools)
ui <- tagList(
textInput("textinput", label="Enter Something"),
div(id="app","from Vue: {{textinput}}"),
textOutput("textrepeat"),
tags$script(
"
$(document).on('shiny:connected', function(a,b,c){
var vb = new Vue({
el: '#app',
data: Shiny.shinyapp.$inputValues
});
});
"
),
vueR:::html_dependency_vue()
)
server <- function(input,output){
output$textrepeat <- renderText({paste0("from Shiny: ", input$textinput)})
}
shinyApp(ui,server)
@timelyportfolio
Copy link
Author

vue-shiny

@MattSandy
Copy link

Thanks for this, I was wondering if anyone has tried using the two together.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment