Vue leprechaun problem - Githubissues

EkkoTheGekko commented 2 years ago

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?

EkkoTheGekko commented 2 years ago

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 }
  });
});

JohnCoene commented 2 years ago

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.

JohnCoene commented 2 years ago

See https://github.com/devOpifex/leprechaun/issues/7

JohnCoene / packer

Vue leprechaun problem #23