search

janniks / vue-notion

A fast Vue renderer for Notion pages
https://vue-notion.now.sh
Other
870 stars 62 forks source link

Allow UMD loading #49

Closed Diferno closed 3 years ago

Diferno commented 3 years ago

Hi! first of all, thx and congrats for the great work!

I'm trying to create a simple vue page using UMD from Quasar Framework, and although I found how to include vue-notion from jsdelivr.com, it gave me errors because it couldn't load correctly. Tryed to include through jsdelivr.com, but neither VueNotion or NotionRenderer were loaded.

Here's the example html that didn't work šŸ˜ž 

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.15.23/dist/quasar.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-notion@1.1.3/dist/styles.css">
  </head>

  <body>
    <div id="q-app">
      <!-- <q-btn label="My Button" @click="onClick"></q-btn> -->
      <notion-renderer :blockMap="blockMap" fullPage></notion-renderer>
    </div>

    <script>
      window.quasarConfig = {
        brand: { // this will NOT work on IE 11
          primary: '#e46262'
        }
      }
    </script>

<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.15.23/dist/quasar.umd.modern.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/vue-notion@1.1.3/dist/esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/prism.min.js"></script> -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/vue-prism@1.0.5/src/index.min.js"></script> -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/@cycraft/vue-prism-component@2.0.2/dist/vue-prism-component.min.js"></script> -->

<!-- <script src="https://cdn.jsdelivr.net/npm/vue-notion@1.1.3/dist/min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue-notion-render@1.1.3/dist/vue-notion-render.esm.min.js"></script> -->

<script>
    var PDFDocument = PDFLib.PDFDocument;

      // import { NotionRenderer, getPageBlocks } from 'vue-notion'

      new Vue({
        el: '#q-app',
        // components: { NotionRenderer },
        data: () => {
          return {
            blockMap: null
          }
        },
        async created () {
          debugger
          // get Notion blocks from the API via a Notion pageId
          this.blockMap = await getPageBlocks('8c1ab01960b049f6a282dda64a94afc7', 'https://notion-api.splitbee.io/v1')
        },
        methods: {
          onClick () {
            alert('yeah')
          }
        }
      })
    </script>
  </body>
</html>
janniks commented 3 years ago

Hi šŸ‘‹ thanks for using vue-notion

I don't know too much about UMD, but the template we used for publishing vue-notion exports a UMD build as /ssr.min.js. I'm not sure how/if this works correctly, but I hope that helps...

janniks commented 3 years ago

Although, I'm not sure now... Our build config rollup.config.js is cloned from a template and the umdConfig seems misnamed and builds cjs.

janniks commented 3 years ago

So it looks like the unpkg/iife build might work. /min.js but I think vue-prism does not have a UMD/unpkg build šŸ˜¬