timelyportfolio · July 21, 2021 14:36 · Apr 18, 2017 · Apr 18, 2017 · Apr 18, 2017 · Apr 18, 2017
diff --git a/Readme.md b/Readme.md
@@ -42,3 +42,6 @@ server <- function(input,output){
 
 shinyApp(ui,server)
 ```
+
+### Screenshot
+![vue-shiny](https://cloud.githubusercontent.com/assets/837910/25143277/716ede6e-242f-11e7-9113-bd293072b09e.gif)
diff --git a/Readme.md b/Readme.md
@@ -10,7 +10,7 @@ I have assembled [`vueR`](https://github.com/timelyportfolio/vueR) package, like
 devtools::install_github("timelyportfolio/vueR")`
 ```
 
-### Code
+### Example
 
 ```r
 
@@ -23,6 +23,7 @@ ui <- tagList(
   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',
@@ -35,6 +36,7 @@ $(document).on('shiny:connected', function(a,b,c){
 )
 
 server <- function(input,output){
+  # repeat text typed in textinput with Shiny
   output$textrepeat <- renderText({paste0("from Shiny: ", input$textinput)})
 }
 

diff --git a/Readme.md b/Readme.md
@@ -1,4 +1,4 @@
-### Shiny = good, Vue = good | Shiny + Vue = good?
+### 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`](https://vuejs.org) react to changes in `Shiny` input values.  This example is intentionally very simple to hopefully self-explain.
 

diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,42 @@
+### 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`](https://vuejs.org) react to changes in `Shiny` input values.  This example is intentionally very simple to hopefully self-explain.
+
+### vueR
+
+I have assembled [`vueR`](https://github.com/timelyportfolio/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")`
+```
+
+### 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)
+```
diff --git a/code.R b/code.R
@@ -0,0 +1,25 @@
+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)
No results found