Can I import a single component from npm?



  • I’ve got a large, existing Vue project and I’m trying to embed just a single component (<q-table>) into it.

    Unfortunately, this isn’t a SPA written in something like NuxtJS - it’s plain 'ol Javascript where everything gets re-built every page load. I’d love to re-write the whole thing in Quasar, but I don’t have the time right now…

    I’ve tried the UMD route, but can’t seem to get the timing right for the global Quasar object. If I put the <script> at the end of <body>, then the Quasar object isn’t available as it tries to mount the table. Put it in <head> and other legacy code breaks.

    So I’m trying to import the component from npm instead using code like this:

    <template>
          <q-table
            class="my-sticky-header-column-table"
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
          />
    </template>
    
    <script>
    import QTable from 'quasar';
    
    export default {
      data() {
        return {
          columns: [...],
          data: [...]
        }
      },
    
      components: {
        QTable
      }
    }
    

    This fails though with the error that Failed to mount component: template or render function not defined. (on the <q-table> element).

    Is what I’m trying to do even possible, or is there a better way anyone can suggest to import just one element like this please?



  • There are 3 ways to use quasar. I don’t think this is one of them. It would be awesome if it was that easy to just import a random component like q-table in an existing project. For the why it doesn’t work like this. My guess is that q-table depends on other quasar code.

    https://quasar.dev/start/pick-quasar-flavour

    I think the UMD route is the way to go for you, or rebuilt with Q-cli.


Log in to reply