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:

    import QTable from 'quasar';
    export default {
      data() {
        return {
          columns: [...],
          data: [...]
      components: {

    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.

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

Log in to reply