waningflow/vue-virtual-table

How to use in browser without module bundlers

Closed this issue · 2 comments

brendanfalk commented

Hi.

I have tried everything to try and get this to work in the browser.

I have a Vue which is receiving a lot of data. I would ideally like to pass this directly to vue-virtual-table as a prop.

I have tried integrating with https://github.com/FranckFreiburger/http-vue-loader

my main.js

var app = new Vue({
    el: '#app',
    components: {
        // 'VueVirtualTable': window.httpVueLoader('./tableComponent.vue')
        'my-component': httpVueLoader('https://raw.githubusercontent.com/waningflow/vue-virtual-table/master/src/vue-virtual-table.vue')
    },
    data: {
        table_data: "",
        column_names: [{ prop: "first" }, { prop: "id" }, { prop: "last" }, { prop: "city" }]
    },

my index.html header

    <script defer src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script defer src="https://unpkg.com/http-vue-loader"></script>
    <script defer src="vue-virtual-table.min.js"></script> <!-- downloaded from this github -->
    <script defer src="vueScript.js"></script>

Any help getting this working would be immensely appreciated.

waningflow commented

Here is an example. There might be some style problems. After all, it's recommended to use module.

<html>
  <head>
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-virtual-table@0.2.15/dist/vue-virtual-table.min.js"></script>
    <link href="https://unpkg.com/vue-virtual-table@0.2.15/dist/vue-virtual-table.min.css" />
  </head>
  <body>
    <div id="app">
      <vue-virtual-table :data="table_data" :config="column_names"></vue-virtual-table>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          table_data: [{ first: 'a', id: 123, last: 'a', city: 'a' }],
          column_names: [{ prop: 'first' }, { prop: 'id' }, { prop: 'last' }, { prop: 'city' }],
        };
      },
    });
  </script>
</html>
  • 👍1
brendanfalk commented

Wow. It's so simple. I don't know why I tried for so long and could not get this to work. I was also using unpkg.

I deleted the file, but from memory, one of console errors I was receiving said the vue-resize package had not been imported. Very strange.

Anyway, thank you!!!