R Shiny and Vue Simple Example

Readme.md

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

code.R

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)

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