Can I import a single component from npm?

CL26

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?

dobbel

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.