Solara•9mo ago

Using vue libraries with ipyvuetify & solara

Is it naive to think vuepdf should work out of the box with a ipyvuetify template? I've stripped the code to its bare minimum, it should show a single pdf page from the url. My code isnt showing errors but it also isn't showing a pdf. vue_pdf.vue

#pdf_viewer.vue
<template>
  <div>
    <VuePDF :pdf="pdf" text-layer/>
  </div>
</template>


<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import '@tato30/vue-pdf/style.css';

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

</script>

#pdf_viewer.vue
<template>
  <div>
    <VuePDF :pdf="pdf" text-layer/>
  </div>
</template>


<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import '@tato30/vue-pdf/style.css';

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

</script>

vue_pdf.js

import solara
import ipyvuetify as ipv
import os

@solara.component
def Viewer():
  class PDFViewer(ipv.VuetifyTemplate):
      template_file =  os.path.realpath(os.path.join(os.path.dirname(__file__), "./pdf_viewer.vue"))

  return PDFViewer.element()

import solara
import ipyvuetify as ipv
import os

@solara.component
def Viewer():
  class PDFViewer(ipv.VuetifyTemplate):
      template_file =  os.path.realpath(os.path.join(os.path.dirname(__file__), "./pdf_viewer.vue"))

  return PDFViewer.element()

2 Replies

CorranOP•9mo ago

vue-pdf docs are here: https://tato30.github.io/vue-pdf/examples/basic/one_page.html

One page | VuePDF

PDF component for Vue 3

MaartenBreddels•9mo ago

The ES imports would only work with ipyvue3 and ipyvuetify3, there are alpha releases for those, and solara does work with it (although not all components). I would say, this is work in progress. Instead of ES imports, you can take a look at how we do it in the solara repo with external dependencies, such as the altair/vegalite component for instance

Gaming

Programming

Using vue libraries with ipyvuetify & solara