Use Quasar components in Vue CLI 4.x

[H25E]

Hello everybody,

I’m doing a rework in the frontend of a web application, and for this I have choosen Vue & Quasar. It’s going to be my first project with both of them so I’m a newbie here.

I have tried both of them with the direct <script src=""> mode. Then I decided to learn how to use the Vue CLI in order to have a better project organization and so on.

Now I wanted to integrate Quasar in the Vue CLI. Only the web components. I like the Quasar framework functionalities, and they are the reason why I have choosen Quasar, but I’m not going to use them now. Not in the first version of the rework.

In order to use Quasar web components in the same way I was using them in the <script src> mode, but in the Vue CLI, I tried to add this in the head of the vueFolder/public/index.html:

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.9.15/dist/quasar.css" rel="stylesheet" type="text/css">
    <script>
      window.quasarConfig = {
        brand: {...}
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.9.15/dist/quasar.umd.js"></script>

But I get:

quasar.umd.js:1893 Uncaught TypeError: Cannot read property ‘extend’ of undefined
at quasar.umd.js:1893
at quasar.umd.js:10
at quasar.umd.js:11

Created by the <script src = “quasar.js”> line. I have tried also to include the following in the Vue main.js:

import Quasar from "https://cdn.jsdelivr.net/npm/quasar@1.9.15/dist/quasar.umd.js"
Vue.use(Quasar);

But I get:

Failed to compile.

./src/main.js
Module not found: Error: Can’t resolve ‘https://cdn.jsdelivr.net/npm/quasar@1.9.15/dist/quasar.umd.js’ in ‘C:…’

So, there is a reliable way to include Quasar UMD into Vue CLI 4.x?

There are also two more options:

• Vue CLI Quasar Plugin: I have read in the documentation that this path can lead into errors because integration of the plugin isn’t the best. Is this a really realiable way?
• Quasar CLI: In the future we would like to create mobile and desktop applications. But now we only want to build a web frond-end. And I have barely learned Vue CLI right now. Do you think it will worth to spend more time to learn Quasar CLI and use it directly when we are going to use only the web components?

Thanks for your help in these learning moments,

H25E