vue: 'Vue.js' 'htmlwidget'
In timelyportfolio/vueR: 'Vuejs' Helpers and 'Htmlwidget'

Description Usage Arguments Value Examples

View source: R/vue.R

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.

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

`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

vue htmlwidget

if(interactive()) {

  library(vueR)
  library(htmltools)

  # recreate Hello Vue! example
  browsable(
    tagList(
      tags$div(id="app", "{{message}}"),
      vue(
        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);
  }
        "
      )
    )
  )

}