Trying to add geocomplete to a Vue js webpack project

Question

I've added Geocomplete to a Vue project before but not with Webpack. I tried using the npm module, which requires the following in index.html:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script src="jquery.geocomplete.js"></script>

(of course, I filled in my api key and it's valid)

When I try to add geocomplete to an input in my App.vue file:

   $("address-input").geocomplete();

I get the message:

TypeError: __WEBPACK_IMPORTED_MODULE_5_jquery___default(...)(...).geocomplete is not a function

Any ideas how to use this module with Vue?

Here's my index.html file:

<!DOCTYPE html>
<html>
   <head>

        <script src="http://maps.googleapis.com/maps/api/js?libraries=places&key=mykey"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

      <script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>

    <meta charset="utf-8">
    <title>gotta-go</title>
    <style ></style>


  </head>

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

webpack.dev.conf.js:

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

Here is my app.vue

<template>
  <div>
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-form-item label="Location">                            
                            <el-input id="address-input"></el-input>
                        </el-form-item>                        
                        <el-form-item label="Distance">
                            <el-slider v-model="form.distance"></el-slider>
                        </el-form-item>
                        <el-form-item label="Rating">
                            <el-rate void-color="rgb(100, 100, 100)" v-model="form.rating"></el-rate>
                        </el-form-item>


                        <el-form-item label="special:">                        
                            <el-checkbox-group v-model="form.specials">

                            </el-checkbox-group>                        
                        </el-form-item>                    
                    </el-form>

  </div>

</template>
<script>

 import app from './db.js'


 import Icon from 'vue-awesome/components/Icon'
 import L from 'leaflet'
 import Vue2Leaflet from 'vue2-leaflet'

 var db = app.database()
 var storage = app.storage()
 var usersRef = db.ref('users')
 var toiletsRef = db.ref('toilets')
 var auth = app.auth()



 export default {
     name: 'app',
     components: {         
         Icon,
         'v-map': Vue2Leaflet.Map,
         'v-tilelayer': Vue2Leaflet.TileLayer,
         'v-marker': Vue2Leaflet.Marker         

     },
     mounted(){

         $("#address-input").geocomplete();

     },
    }
</script>

@EricGuan Yes. Before I included it, it complained about $ not being defined, so I know it's included — David J., Oct 29 '17 at 03:48
Did you include jQuery and Geocomplete directly in index.html file as script tags? or just `require`d from the main app js file so webpack bundles them all together? — sigh, Oct 29 '17 at 05:29
@karamarimo I included them directly in the index.html file. I'll post my code... — David J., Oct 29 '17 at 06:28
but according to the error message, webpack knows jQuery as a dependency, right? — sigh, Oct 29 '17 at 06:47
I think that doesn't happen when you just include jQuery as a script tag. Maybe you are `require`ing jQuery from the vue app or adding jQuery alias in webpack config. Could you post your webpack config? — sigh, Oct 29 '17 at 07:20
That's not the webpack config. I guess you used vue-cli to create the project. Actually there are 3 webpack config files under `build/` folder. Did you edit them? If you didn't, you don't need to post them here. — sigh, Oct 29 '17 at 08:09
@karamarimo Yeah I used vue-cli. Which of the three files do you need? I'll post dev.conf.js — David J., Oct 29 '17 at 08:22
Then could you post your vue file that is using geocomplete? — sigh, Oct 29 '17 at 08:49

score 1 · Accepted Answer · answered Oct 29 '17 at 08:36

1

I tried to replicate the problem, but geocomplete worked fine.

All i did was:

Create project using vue-cli. vue init webpack my-project and npm i.
Enable Google Map APIs.
Edit index.html and App.vue as below.

index.html

  <head>
    <meta charset="utf-8">
    <title>vue-webpack-playground</title>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&key=MYAPIKEY"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
  </head>

App.vue

<template>
  <div id="app">
    <input type="text">
  </div>
</template>

<script>
export default {
  name: 'app',
  mounted: function () {
    $("input").geocomplete();
  }
}
</script>

Result

answered Oct 29 '17 at 08:36

sigh

141
1
2
6

did you use npm to install geocomplete? – David J. Oct 29 '17 at 09:22
@DavidJ. no, i didn't add any packages. – sigh Oct 29 '17 at 09:24
I added my App.vue to the question. I'm going to try to follow your example and see if I run into any problems. Thanks for the help! – David J. Oct 29 '17 at 09:29
I retried this from scratch with your instructions and it worked, thanks again. – David J. Oct 31 '17 at 15:39
@DavidJ. no problem. – sigh Oct 31 '17 at 17:10

Trying to add geocomplete to a Vue js webpack project

1 Answers1