title: How to add Guess.js to Vue.js in existing Laravel project
body: <p>I have created the project from the base and have done step by step what saying <a href="https://guess-js.github.io/docs/nuxt" rel="nofollow noreferrer">here</a>. It's working. What I want to do is exactly the same on my current existing Laravel+Vue project.</p>
  <p>So in the first step I installed <code>fs</code>, <code>nuxt</code>, <code>@nuxtjs/guess</code>, <code>guess-webpack</code> by <code>npm install package-name</code>.</p>
  <p>Next I added <code>import { guess } from 'guess-webpack/api'</code> to my existing <code>app.js</code> file, which now has</p>
  <pre><code>import Vue from 'vue';
  window.Vue = Vue;
  
  import { guess } from 'guess-webpack/api'    // &lt;&lt;&lt;==== Added this
  
  const app = new Vue({
      components: {
          myTest: () =&gt; import('./components/myTest')
      },
      el: '#app',
      data() {
          return {}
      },
  });
  </code></pre>
  <p>But I couldn't get where and how to add this to the <code>app.js</code> file:</p>
  <pre><code>export default ({ app: { router } }) =&gt;  {
    router.afterEach(to =&gt; {
      // Wait for page to be displayed
      Vue.nextTick(() =&gt; {
        let predictions = Object.keys(guess()).sort((a, b) =&gt; a.probability - b.probability)
        predictions.forEach(path =&gt; {
          router.getMatchedComponents(path).forEach(Component =&gt; {
            if (typeof Component === 'function') {
              try { Component() } catch (e) {}
            }
          })
        })
      })
    })
  }
  </code></pre>
  <p>And I didn't know how to merge the webpack configs that are this:</p>
  <pre><code>import { readFileSync } from 'fs'
  import { GuessPlugin } from 'guess-webpack'
  
  const GA = { &quot;GA&quot;: &quot;MY-GTAG&quot; };
  export default {
    &quot;modules&quot;: [
      [&quot;@nuxtjs/guess&quot;, GA]
    ],
    plugins: [
      { src: '~/plugins/guess', ssr: false }
    ],
    build: {
      extend(config, ctx) {
        if (ctx.isClient) {
  
          let guessOptions = {};
          if (GA) {
            guessOptions.GA = GA;
          } else {
            guessOptions.reportProvider = () =&gt; Promise.resolve(JSON.parse(readFileSync('./routes.json')));
          }
  
          config.plugins.push(
            new GuessPlugin(guessOptions)
          )
        }
      }
    },
    // Nuxt &gt; v2.4.0
    router: {
      prefetchLinks: false
    }
  }
  </code></pre>
  <p>and this (which is already in my existing project):</p>
  <pre><code>const mix = require('laravel-mix');
  mix.js('resources/js/app.js', 'public/js').vue();
  mix.webpackConfig({
      plugins: [new MomentLocalesPlugin()],
      output: {chunkFilename: 'js/[name].[chunkhash].js'}
  });
  </code></pre>
  <p>I got really confused and my questions are:</p>
  <ol>
  <li>How can I fix them all together and start testing?</li>
  <li>Is there any problem I'm on the verge of? (As I'm using Laravel. Anything about routes and blade views)</li>
  <li>The nuxt is using port <code>3000</code>. Am I able to use it in laravel which is using port 8000?</li>
  </ol>