title: Vue js in cordova
body: <p>I'm struggling to implement a simple Vue.js app into Cordova. Everything works fine except that I don't know how I can intercept cordova events (deviceready, pause, ...) into my vue application. I used the Webpack template from vue-cli.</p>
  
  <p>Here's my file <code>js/index.js</code> :</p>
  
  <pre><code>const app = {
    initialize: function () {
      console.log('initialize')
      this.bindEvents()
    },
    bindEvents: function () {
      document.addEventListener('deviceready', this.onDeviceReady, false)
    },
    onDeviceReady: function () {
      app.receivedEvent('deviceready')
    },
    receivedEvent: function (id) {
      console.log('Received Event: ' + id)
    }
  }
  
  app.initialize()
  </code></pre>
  
  <p>the <code>src/main.js</code> :</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  
  /* eslint-disable no-new */
  const app = new Vue({
    template: '&lt;App/&gt;',
    components: { App }
  })
  
  app.$mount('#app')
  </code></pre>
  
  <p>config/index.js : </p>
  
  <pre><code>module.exports = {
    build: {
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      //assetsPublicPath: '/',
      productionSourceMap: true,
      productionGzip: false,
      productionGzipExtensions: ['js', 'css']
    },
    dev: {
      env: require('./dev.env'),
      port: 8080,
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      proxyTable: {},
      cssSourceMap: false
    }
  }
  </code></pre>
  
  <p>webpack.base.conf.js :</p>
  
  <pre><code>module.exports = {
    entry: {
      app: './src/main.js'
    },
    output: {
      path: config.build.assetsRoot,
      publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
      filename: '[name].js'
    },
    resolve: {
      extensions: ['', '.js', '.vue', '.json'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
        'vue$': 'vue/dist/vue.common.js',
        'src': path.resolve(__dirname, '../src'),
        'assets': path.resolve(__dirname, '../src/assets'),
        'components': path.resolve(__dirname, '../src/components'),
        'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
      }
    },
    resolveLoader: {
      fallback: [path.join(__dirname, '../node_modules')]
    },
    plugins: [
      new webpack.ProvidePlugin({
          // jquery
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          semantic: 'semantic-ui-css',
          'semantic-ui': 'semantic-ui-css'
      })
    ],
    module: {
      preLoaders: [
        {
          test: /\.vue$/,
          loader: 'eslint',
          include: projectRoot,
          exclude: /node_modules/
        },
        {
          test: /\.js$/,
          loader: 'eslint',
          include: projectRoot,
          exclude: /node_modules/
        }
      ],
      loaders: [
        {
          test: /\.vue$/,
          loader: 'vue'
        },
        {
          test: /\.js$/,
          loader: 'babel',
          include: projectRoot,
          exclude: /node_modules/
        },
        {
          test: /\.json$/,
          loader: 'json'
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url',
          query: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url',
          query: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        }
      ]
    },
    eslint: {
      formatter: require('eslint-friendly-formatter')
    },
    vue: {
      loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
      postcss: [
        require('autoprefixer')({
          browsers: ['last 2 versions']
        })
      ]
    }
  }
  </code></pre>
  
  <p>webpack.prod.conf : </p>
  
  <pre><code>var webpackConfig = merge(baseWebpackConfig, {
    module: {
      loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
    },
    devtool: config.build.productionSourceMap ? '#source-map' : false,
    output: {
      path: config.build.assetsRoot,
      filename: utils.assetsPath('js/[name].[chunkhash].js'),
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    vue: {
      loaders: utils.cssLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true
      })
    },
    plugins: [
      // http://vuejs.github.io/vue-loader/en/workflow/production.html
      new webpack.DefinePlugin({
        'process.env': env
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      // extract css into its own file
      new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
      // generate dist index.html with correct asset hash for caching.
      // you can customize output by editing /index.html
      // see https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        filename: process.env.NODE_ENV === 'testing'
          ? 'index.html'
          : config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'dependency'
      }),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module, count) {
          // any required modules inside node_modules are extracted to vendor
          return (
            module.resource &amp;&amp;
            /\.js$/.test(module.resource) &amp;&amp;
            module.resource.indexOf(
              path.join(__dirname, '../node_modules')
            ) === 0
          )
        }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
      })
    ]
  })
  
  if (config.build.productionGzip) {
    var CompressionWebpackPlugin = require('compression-webpack-plugin')
  
    webpackConfig.plugins.push(
      new CompressionWebpackPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          config.build.productionGzipExtensions.join('|') +
          ')$'
        ),
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }
  </code></pre>
  
  <p>And here's my project structure :</p>
  
  <p><a href="https://i.stack.imgur.com/TxJD4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TxJD4.png" alt="app structure"></a></p>
  
  <p>What shoud I do to get events from Cordova to my Vue components ? </p>