What makes a great Shiny app? Anything that helps your users explore and find answers from data. And it helps when your apps is beautiful and fast. It is now easier than ever for Shiny developers to create these beautiful, dynamic, quick-reacting, multipage shiny apps. In this episode of the Shiny Developer Serie -- the first of two parts -- Eric Nantz hosts Herman Sontrop and Kenton Russell as they introduce the tools behind their Movie Vue R Shiny application. They submitted this application to the 2021 Shiny Contest and have shared the code and documentation with the Shiny developer community. Part 1 is a high-level tour of what is inside the Movie Vue R Shiny application and how the Vue javascript framework is used to offer R and Shiny components really nice user interface elements.
Resources mentioned in the episode

Movie Vue R Shiny App: friss.shinyapps.io/shiny-vue-r
Contest Submission Post on RStudio Community
App GitHub repository: github.com/FrissAnalytics/shiny-vue-r
Discussion slides available at this link
Vue.js - Progressive JavaScript framework: vuejs.org
Vuetify - Material design framework for Vue: vuetifyjs.com
HTML templates article: shiny.rstudio.com/articles/templates.html
Material design icons: materialdesignicons.com
http-vue-loader - load .vue files from your HTML/JS: github.com/FranckFreiburger/http-vue-loader
Vuex getting started guide: vuex.vuejs.org/guide
Vue Router - The official router for Vue.js: router.vuejs.org
UI component for Globe Data Visualization using ThreeJS/WebGL: globe.gl
Lodash - A modern JavaScript utility library delivering modularity, performance & extras: lodash.com
d3.js - Data-Driven Documents: d3js,org
Mitt - Tiny 200b functional event emitter / pubsub: github.com/developit/mitt
Overlay Scrollbars - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling: kingsora.github.io/OverlayScrollbars
Kent's listviewer HTML widget for viewing lists: cran.r-project.org/package=listviewer
plumber - Turn your R code into a web API: www.rplumber.io

Episode Timestamps
00:00:00 Episode Introduction

00:01:00 Introduction to Herman Sontrop

00:06:10 Introduction to Kenton Russell

00:10:00 High-level walkthrough of Movie Vue R

00:19:25 Diving into the code that drives Movie Vue R

00:22:35 Overview and motivation behind Vue

00:38:30 Vue instance example

00:40:00 Vue reactivty examples

00:46:10 Vue.js components are like Shiny modules

00:49:50 Single file components

00:54:16 Breaking down a Vue component into useful parts; props, data, methods, computed, and watch

00:57:20 Vuetify, tap into many pre-built components, styles, and more

01:10:00 Covid Globe Example in Shiny app

01:12:40 Rendering a ggplot

01:15:15 Summarizing parts of the Movie Vue R app

01:19:10 A look at template.html. A detailed walk through the organization of the app's HTML and files

01:26:30 Where R and Shiny are added to a Vue app. And how your app can send messages back to Shiny and R

01:31:20 Loading images and ggplots

01:38:00 Episode wrapup