packer
packer copied to clipboard
JohnCoene
Vue leprechaun problem
Dear John Coene,
Thank you for developing such nice packages
I wanted to try out packer and leprechaun together with vue js.
First I ran into the problem mentioned in issue #21.
I applied the fix mentioned there to solve the bundling problem.
However vue was still not working.
It kept complaining it could not find the #app element.
The difference I noticed with the golem solution is that with serveAssets() the index.js is put in the "main" head of the html, while in the golem example it is included after the <div id = "app">
I solved it like this:
fluidPage(
tagList(
assets(),
div(id = "app"),
tags$script(src = "leprechaunVueTest-0.0.0.9000/assets/index.js")
)
)
But I don't think this is a good solution, as this way index.js is loaded twice. Do you or anyone else have an idea how to solve this in a better way?
I also tried to call assets() after the app div, but that doesn't matter.
I also tried using the vueCDN function, but that also didn't work. There also is a bug in this when you try to load another version than the latest.
Warning in sprintf("https://cdn.jsdelivr.net/npm/vue", version_string) :
one argument not used by format 'https://cdn.jsdelivr.net/npm/vue'
I modified the function like this:
vueCDN <- function(version = NULL){
version_string <- "@2"
if(!is.null(version))
version_string <- sprintf("@%d", version)
vue <- sprintf("https://cdn.jsdelivr.net/npm/vue%s", version_string)
shiny::singleton(
shiny::tags$head(
shiny::tags$script(src = vue, crossorigin = NA)
)
)
}
PS: Maybe this is more an issue for leprechaun?
Another solution I found is this modification to in srcjs/index.js:
import Vue from "vue";
import App from "./Home.vue";
window.addEventListener('load', function () {
new Vue({
el: "#app",
template: "<App/>",
components: { App }
});
});
Thank you for the detailed report.
There was an issue with the vueCDN which pertains to packer, your fix is correct, I've pushed this.
The other issue is with leprechaun, I think we simply need to allow ignoring files in serverAssets. By default this function creates htmltools::htmlDependency for every relevant file which ultimately is placed within the <head></head> of the HTML.
Indeed, for Vue, the script should not be; simply ignoring index.js should do the trick.
