Creating custom component need to pass assets path

Ask us anything
,
1

try to use third party plugin in custom code

code for wwSection.vue:

<template>
  <div class="my-section" id="app">
    <WebViewer :path="`${publicPath}`" url="https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf"/>
  </div>
</template>

<script>
import WebViewer from './components/WebViewer.vue'

export default {
  name: 'app',
  components: {
    WebViewer
  },
  data () {
    return {
      publicPath: `/public/pdfjsexpress/`
    }
    
  }
}
</script>

<style lang="scss" scoped>
.my-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  h1 {
    font-size: 32px;
  }
  p {
    margin-top: 12px;
  }
}
</style>

ww-config.js

export default {
  editor: {
    label: {
      en: "PDF Viewer",
    },
  },
  properties: {
    pdfUrl: {
      label: {
        en: "PDF URL",
      },
      type: "String",
      defaultValue: "",
    },
  }
};
2

What?

1 Like
3

Subject: Unable to Load PDF Viewer from dist Folder in WeWeb

I’m trying to load a PDF viewer library from my dist folder, but I’m unable to pass the correct path. When attempting to access the viewer, I receive the following error:

dashboard.weweb.io refused to connect.
[Vue Router warn]: No match found for location with path /dist/public/pdfjsexpress/ui/index.html

Additionally, in the network tab, the request to:
https://editor-dev.weweb.io/dist/public/pdfjsexpress/ui/index.html
returns 200 OK, but the response says:
“We’re sorry but ww-test doesn’t work properly without JavaScript enabled. Please enable it to continue.”

Could you please help me resolve this issue? I suspect it might be related to routing or security restrictions in WeWeb. Let me know if I need to adjust my project settings to properly load static files from the dist folder.