vue: 'Vue.js' 'htmlwidget'

View source: R/vue.R

vueR Documentation

'Vue.js' 'htmlwidget'

Description

Use 'Vue.js' with the convenience and flexibility of 'htmlwidgets'. vue is a little different from other 'htmlwidgets' though since it requires specification of the HTML tags/elements separately.

Usage

vue(
  app = list(),
  width = NULL,
  height = NULL,
  elementId = NULL,
  minified = TRUE
)

Arguments

app

list with el and data and other pieces of a 'Vue.js' app

width, height

any valid CSS size unit, but in reality this will not currently have any impact

elementId

character id of the htmlwidget container element

minified

logical to indicate minified (minified=TRUE) or non-minified (minified=FALSE) Vue.js

Value

vue htmlwidget

See Also

Other htmlwidget: vue3()

Examples

if(interactive()) {

  library(vueR)
  library(htmltools)

  # recreate Hello Vue! example
  browsable(
    tagList(
      tags$div(id="app", "{{message}}"),
      vue3(
        list(
          el = "#app",
          data = list(
            message = "Hello Vue!"
          )
        )
      )
    )
  )

  # app2 from Vue.js introduction
  browsable(
    tagList(
      tags$div(id="app-2",
        tags$span(
          "v-bind:title" = "message",
          "Hover your mouse over me for a few seconds to see my dynamically bound title!"
        )
      ),
      vue(
        list(
          el = "#app-2",
          data = list(
            message =  htmlwidgets::JS(
              "'You loaded this page on ' + new Date()"
            )
          )
        )
      )
    )
  )

  # app3 from Vue.js introduction
  #  with a setInterval to toggle seen true and false
  browsable(
    tagList(
      tags$div(id="app-3",
        tags$p("v-if"="seen", "Now you see me")
      ),
      htmlwidgets::onRender(
        vue(
          list(
            el = '#app-3',
            data = list(
              seen = TRUE
            )
          )
        ),
        "
  function(el,x){
    var that = this;
    setInterval(function(){that.instance.seen=!that.instance.seen},1000);
  }
        "
      )
    )
  )

}

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