vue-shiny: Shiny bindings for vue

In timelyportfolio/vueR: 'Vuejs' Helpers and 'Htmlwidget'

Shiny bindings for vue

Description

Output and render functions for using vue within Shiny applications and interactive Rmd documents.

Output and render functions for using 'vue 3' within Shiny applications and interactive Rmd documents.

Usage

vueOutput(outputId, width = "100%", height = "400px")

renderVue(expr, env = parent.frame(), quoted = FALSE)

vue3Output(outputId, width = "100%", height = "400px")

renderVue3(expr, env = parent.frame(), quoted = FALSE)

Arguments

outputId	output variable to read from
width, height	Must be a valid CSS unit (like '100%', '400px', 'auto') or a number, which will be coerced to a string and have 'px' appended.
expr	An expression that generates a vue
env	The environment in which to evaluate expr.
quoted	Is expr a quoted expression (with quote())? This is useful if you want to save an expression in a variable.

Examples

if(interactive()) {

  library(shiny)
  library(vueR)

  ui <- tagList(
    tags$div(id="app-3",
      tags$p("v-if"="seen", "Now you see me")
    ),
    vue3Output('vue1')
  )

  server <- function(input, output, session) {
    output$vue1 <- renderVue3({
      vue3(
        list(
          el = '#app-3',
          data = list(seen = TRUE),
          mounted = htmlwidgets::JS("
            function() {
              var that = this;
              setInterval(function(){that.seen=!that.seen},1000);
            }
          "),
          watch = list(
            seen = htmlwidgets::JS("function() {Shiny.setInputValue('seen',this.seen)}")
          )
        )
      )
    })

    # show that Shiny input value is being updated
    observeEvent(input$seen, {print(input$seen)})
  }

  shinyApp(ui, server)

}

timelyportfolio/vueR documentation built on Oct. 10, 2023, 8:13 p.m.