Importing vue component

[kamilersz]

Importing vue component

[rstoenescu]

Use the App Configuration file to specify your dependencies. You are interested in deps property.

1. First npm install the Vue Components dependecies.

2. Configure quasar.build.yml:
   Example for vue-google-maps (not the whole file, just what you are interested in):

   deps:
     js: [
       'node_modules/q/q.js',
       'node_modules/lodash/index.js',
       'node_modules/vue-google-maps/index.js'
       ]

   As dependency string needed for quasar.build.yml, look into the node_modules folder of your installed component and check for the main entry point (usually in a dist folder). You can read the component's package.json for this property.

3. Use your Vue Component:

   Generally speaking, look at standalone usage for the Vue Components you want to use. In vue-google-maps case, you should declare the components yourself before using them. Here is an extract from their website:

   // they inject VueGoogleMap global:
   VueGoogleMap.load({
       'key': 'YOUR_API_KEY',
   });
   Vue.component('google-map', VueGoogleMap.Map);

   You have three options for including the declarations above.

   A) You can include these declarations in src/index.html inside quasar.boot():

     quasar.boot(function() {
       VueGoogleMap.load({
         'key': 'YOUR_API_KEY',
       });
       Vue.component('google-map', VueGoogleMap.Map);
   
       quasar.start.app();
     });

   B) ... or you can make a JS file like src/js/app.js and require it from src/index.html. Read about the Quasar Starting Point.

   C) Include the declarations in a Page script file (script.page-name.js) before module.exports if you are using the Component just for that Page.

Will also add a page for this on the documentation website.

Please reopen if you encounter problems.

[kamilersz]

This raises some issues:

• Do I have to install these 3 unmet deps?
  
• If I force install these 3 deps (including vue, which is weird considering quasar already included vue and I cannot run VueGoogleMap if I don't include vue) and use require('VueGoogleMap'), the autorefresher took much longer to process (up to 2 mins).
• Also the deps.js's footprint increases by 2mb, which I believe this should be much lower

[rstoenescu]

Just include lodash and Q. Vue is supplied by default, so you can ignore the warning (or npm install it to avoid the warning, but do not add it in quasar.build.yml).
Do not require('VueGoogleMap'). Simply use the global that vue-google-maps injects: VueGoogleMap, like this:

VueGoogleMap.load({
  'key': 'YOUR_API_KEY',
});
Vue.component('google-map', VueGoogleMap.Map);
// also declare the other components that you want to use from vue-google-maps

Please note that development builds include sourcemaps.

[rstoenescu]

And when I say "include lodash and Q" I mean "npm install" them and add them to quasar.build.yml.

[kamilersz]

I tried to include vue-google-maps from quasar.build.yml then got this error:

Uncaught ReferenceError: require is not defined

turns out vue-google-maps wasn't included / exported, but I can use Q and _

[rstoenescu]

Tried an example myself and got same error. Opened a bug for vue-google-maps:
GuillaumeLeclerc/vue-google-maps#81

The map seems to be working though, even if I got that error.