Skip to content

Vue leprechaun problem #23

@EkkoTheGekko

Description

@EkkoTheGekko

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions