How to use template inside template using vue.js & laravel?

Question

In my project using laravel elixir to mix up the JavaScript files.

In forms I have to use main Vue.js element to create forms. Also I have to use vue-google-map template inside parent Vue.js element but it is showing an error?

window.VueGoogleMaps = require('vue2-google-maps');
var app = new Vue({
    el: '#participantLocationListApp',
});

HTML:

<div class="panel panel-default card-view panel-refresh" id="participantLocationListApp">
    <template>
        <gmap-map:center="center" :zoom="1" style="width: 100%; height: 400px"> </gmap-map>
    </template>
</div>

Error:

[Vue warn]: Unknown custom element: <gmap-map> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: <gmap-info-window> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

JS:window.VueGoogleMaps = require('vue2-google-maps'); var app = new Vue({ el: '#participantLocationListApp',}) HTML:<div class="panel panel-default card-view panel-refresh" id="participantLocationListApp"><template > <gmap-map:center="center" :zoom="1" style="width: 100%; height: 400px"> </gmap-map></template></div> — Gobi R

acdcjunior acdcjunior · Accepted Answer · 2018-03-20T14:50:24

You are just declaring the plugin. You have to "use" it, so Vue knows about it.

Also, that <template> makes no sense, you don't want it there.

Here's how it should be:

In the JavaScript code, activate the plugin through .use():

var VueGoogleMaps = require('vue2-google-maps');

// from the docs: https://www.npmjs.com/package/vue2-google-maps#with-npm-recommended
Vue.use(VueGoogleMaps , {
  load: {
    key: 'YOUR_API_TOKEN',
    v: '3.26',                // Google Maps API version
    // libraries: 'places',   // If you want to use places input
  }
});

var app = new Vue({
    el: '#participantLocationListApp',
})

HTML (remove the <template>):

<div class="panel panel-default card-view panel-refresh" id="participantLocationListApp">
    <gmap-map :center="center" :zoom="1" style="width: 100%; height: 400px"></gmap-map>
</div>

How to use template inside template using vue.js & laravel?

1 Answers