2 |
3 | [](https://www.tidyverse.org/lifecycle/#experimental)
4 |
5 | `vuer` is an R package that makes it easy to use Vue components and build Vue apps.
6 |
7 | > Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases.
8 |
9 |
10 | ## Installation
11 |
12 | You can install `vuer` from github using `remotes` or `devtools`.
13 |
14 | ```r
15 | remotes::install_github('ramnathv/vuer')
16 | ```
17 |
18 | ## Usage
19 |
20 | ### Example 1: Hello World
21 |
22 | We can use `vuer` to create purely client-side web-apps taking advantage of its simple API and two-way data bindings. In this simple example, we let a user enter their name and display a greeting message.
23 |
24 | ```r
25 | tags$div(style = 'height:100px;width:400px;',
26 | tags$label('Enter your name: '),
27 | tags$input(type = "text", "v-model" = "name"),
28 | tags$p(class = "lead", "Hello {{name}}")
29 | ) %>%
30 | appendDependencies(
31 | htmldeps::html_dependency_bootstrap('cosmo')
32 | ) %>%
33 | Vue(data = list(name = ""))
34 | ```
35 |
36 | 
37 |
38 | The power of `vuer` starts truly shining when we are able to let Vue communicate with Shiny. This opens up an unlimited range of possibilities that we will explore in detail. The next two examples explore how Vue and Shiny can communicate with each other.
39 |
40 | ### Example 2: Vue -> Shiny
41 |
42 | It is dead-simple to let Vue communicate with Shiny. All it takes is adding an underscore at the end of any data variable passed to `Vue`. This automatically sets up watcher functions to update shiny when the underlying value changes, thereby triggering any reactive paths that depend on it. This example is very similar to the first one in that we let a user enter their name and display a greeting message. The key difference is that the greeting message is from Shiny on the server side.
43 |
44 | ```r
45 | ui <- fluidPage(theme = shinythemes::shinytheme("cosmo"),
46 | tags$div(
47 | tags$label('Enter your name'),
48 | tags$input(type = "text", "v-model" = "name"),
49 | uiOutput("greeting")
50 | ) %>%
51 | Vue(
52 | data = list(name_ = "")
53 | )
54 | )
55 |
56 |
57 | server <- function(input, output, session){
58 | output$greeting <- renderUI({
59 | tags$p(paste("Hello", input$name))
60 | })
61 | }
62 |
63 | shinyApp(ui = ui, server = server)
64 | ```
65 |
66 |
67 | ### Example 3: Shiny -> Vue
68 |
69 | It is equally easy to let Shiny communicate with Vue. In this example we pass the coordinates of a plot brush to Vue and display it as JSON.
70 |
71 | ```r
72 | library(shiny)
73 | library(ggplot2)
74 | library(vuer)
75 | ui <- fluidPage(theme = shinythemes::shinytheme("cosmo"),
76 | titlePanel(title = 'Shiny -> Vue'),
77 | mainPanel(
78 | plotOutput('plot', brush = brushOpts('plot_brush'), height = '300'),
79 | tags$pre("v-if" = "plot_brush !== null",
80 | tags$code("{{plot_brush}}")
81 | ) %>%
82 | Vue(data = list(plot_brush = c()), elementId = "app")
83 | )
84 | )
85 |
86 | server <- function(input, output, session){
87 | output$plot <- renderPlot({
88 | ggplot(mtcars, aes(x = mpg, y = wt)) +
89 | geom_point()
90 | })
91 | observeEvent(input$plot_brush, {
92 | vueProxy("app") %>%
93 | vueUpdateData(plot_brush = input$plot_brush$coords_img)
94 | })
95 | }
96 | shinyApp(ui = ui, server = server)
97 | ```
98 |
99 | 
100 |
101 |
102 | ## Acknowledgements
103 |
104 | This package was inspired by Kenton Russell's [experiments](https://github.com/timelyportfolio/vueR) using Vue in R, as well as the efforts taken by the [react-R](https://github.com/react-R/reactR) team in integrating `React.js` with R.
105 |
--------------------------------------------------------------------------------
/_pkgdown.yml:
--------------------------------------------------------------------------------
1 | template:
2 | params:
3 | bootswatch: cosmo
4 |
5 | navbar:
6 | type: inverse
7 |
--------------------------------------------------------------------------------
/docs/authors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | vuer is an R package that makes it easy to use Vue components and build Vue apps.
74 |76 | 82 |Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases.
75 |
84 | Usage
85 |87 | Example 1: Hello World
88 |We can use vuer to create purely client-side web-apps taking advantage of its simple API and two-way data bindings. In this simple example, we let a user enter their name and display a greeting message.
tags$div(style = 'height:100px;width:400px;',
90 | tags$label('Enter your name: '),
91 | tags$input(type = "text", "v-model" = "name"),
92 | tags$p(class = "lead", "Hello {{name}}")
93 | ) %>%
94 | appendDependencies(
95 | htmldeps::html_dependency_bootstrap('cosmo')
96 | ) %>%
97 | Vue(data = list(name = ""))
The power of vuer starts truly shining when we are able to let Vue communicate with Shiny. This opens up an unlimited range of possibilities that we will explore in detail. The next two examples explore how Vue and Shiny can communicate with each other.
103 | Example 2: Vue -> Shiny
104 |It is dead-simple to let Vue communicate with Shiny. All it takes is adding an underscore at the end of any data variable passed to Vue. This automatically sets up watcher functions to update shiny when the underlying value changes, thereby triggering any reactive paths that depend on it. This example is very similar to the first one in that we let a user enter their name and display a greeting message. The key difference is that the greeting message is from Shiny on the server side.
ui <- fluidPage(theme = shinythemes::shinytheme("cosmo"),
106 | tags$div(
107 | tags$label('Enter your name'),
108 | tags$input(type = "text", "v-model" = "name"),
109 | uiOutput("greeting")
110 | ) %>%
111 | Vue(
112 | data = list(name_ = "")
113 | )
114 | )
115 |
116 |
117 | server <- function(input, output, session){
118 | output$greeting <- renderUI({
119 | tags$p(paste("Hello", input$name))
120 | })
121 | }
122 |
123 | shinyApp(ui = ui, server = server)127 | Example 3: Shiny -> Vue
128 |It is equally easy to let Shiny communicate with Vue. In this example we pass the coordinates of a plot brush to Vue and display it as JSON.
129 |library(shiny)
130 | library(ggplot2)
131 | library(vuer)
132 | ui <- fluidPage(theme = shinythemes::shinytheme("cosmo"),
133 | titlePanel(title = 'Shiny -> Vue'),
134 | mainPanel(
135 | plotOutput('plot', brush = brushOpts('plot_brush'), height = '300'),
136 | tags$pre("v-if" = "plot_brush !== null",
137 | tags$code("{{plot_brush}}")
138 | ) %>%
139 | Vue(data = list(plot_brush = c()), elementId = "app")
140 | )
141 | )
142 |
143 | server <- function(input, output, session){
144 | output$plot <- renderPlot({
145 | ggplot(mtcars, aes(x = mpg, y = wt)) +
146 | geom_point()
147 | })
148 | observeEvent(input$plot_brush, {
149 | vueProxy("app") %>%
150 | vueUpdateData(plot_brush = input$plot_brush$coords_img)
151 | })
152 | }
153 | shinyApp(ui = ui, server = server)
159 | Acknowledgements
160 |This package was inspired by Kenton Russell’s experiments using Vue in R, as well as the efforts taken by the react-R team in integrating React.js with R.
