vuejs + Shiny

More Advanced Example

vuejs is beautiful and works extremely well with R, since vuejs does not require and all-in contract to use it. I have played quite a bit with R htmltools and vuejs, but until today, I have not explored Shiny with vuejs. This earlier gist R Shiny and Vue Simple Example offers a very simple illustration of how Shiny and vuejs can be best friends. Now, let’s build from that example and get a TreeView of a Shiny plot brush.

Code

library(shiny)
library(vueR) #devtools::install_github("timelyportfolio/vueR")

ui <- tagList(
  tags$head(tags$script(src = "https://unpkg.com/vue-json-tree-view@2.0.6")),
  plotOutput("plot1", brush = brushOpts(id="plot_brush")),
  div(
    id = "app",
    tag("tree-view", list(":data"="plot_brush"))
  ),
  html_dependency_vue(),
  tags$script(
"
Vue.use(TreeView);

$(document).on('shiny:connected', function() {
  Shiny.shinyapp.$inputValues.plot_brush = {};
  var app = new Vue({
    el: '#app',
    data: Shiny.shinyapp.$inputValues
  });
})
"
  )
)

server <- function(input,output,session){
  session <<- session

  output$plot1 <- renderPlot({plot(1:10)})
}

shinyApp(ui,server)

Screenshot