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.