title: Importing a JavaScript class into a Vue single file component using Laravel Mix
body: <p>I'm writing a Vue single page component in my project which is bundled using <a href="https://laravel.com/docs/5.7/mix" rel="nofollow noreferrer">Laravel Mix</a>. I want to extract some logic out into its own class so that it can be easily re-used across other components (but this isn't logic that should be a Vue component itself).</p>
  
  <p>I made a new class and put it in <code>TimeRangeConverter.js</code>, in the same directory as my Vue component.</p>
  
  <pre><code>export default class TimeRangeConverter {
      static getFromTimestamp() {
          return 1;
      }
  }
  </code></pre>
  
  <p>And in my component, I'm importing it as I think I normally would:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          Example component
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import './TimeRangeConverter';
  
      export default {
          mounted() {
              console.log(TimeRangeConverter.getToTimestamp());
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>However Vue is throwing an error saying <code>ReferenceError: TimeRangeConverter is not defined</code>.</p>
  
  <p>I'm using the default <code>webpack.mix.js</code> config file that comes with Laravel 5.7:</p>
  
  <pre><code>mix.js('resources/js/app.js', 'public/js');
  </code></pre>
  
  <p>And in my main <code>app.js</code> file I'm automatically including Vue components with:</p>
  
  <pre><code>const files = require.context('./', true, /\.vue$/i);
  files.keys().map(key =&gt; Vue.component(key.split('/').pop().split('.')[0], files(key).default));
  </code></pre>
  
  <p>What's the correct way to import this class into a Vue component for usage?</p>