No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Can I import a single component from npm?

    Help
    components npm
    2
    2
    736
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by 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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post