how to import functions from different js file in a Vue+webpack+vue-loader project

Question

(see end for why this is not a dupe of How do I include a JavaScript file in another JavaScript file?)

Javascipt + Vue + webpack + vue-loader noob... stumbling on the simplest of things!

I have App.vue which has a template:

<template>
 <div id="app">
     <login v-if="isTokenAvailable()"></login>
 </div>
</template>

I declare the isTokenAvailable method in the normal way for Vue inside methods. It uses a function that I wrote in a separate js file:

<script>
import * as mylib from './mylib';

export default {
  ....
    methods:{
        isTokenAvailable: () => {
            return mylib.myfunc();
        }
    }
}
</script>

mylib starts like this:

import models from './model/models'
import axois from 'axios'

export default function() {
    // functions and constants
}

When I run the project I get the warning:

export 'myfunc' (imported as 'mylib') was not found in './mylib'

I gather I'm not importing or declaring a javascript module correctly... but there seems to be so many ways to do it, added with the complexity of the scoping in Vue, I'm not sure what is the "right" way to do it?

Thanks in advance

Why this isn't a dupe of: How do I include a JavaScript file in another JavaScript file?

Doesn't seem to fix the problem, specifically in the context of vuejs.

I have tried this:

<script>
const mylib = require('./mylib');
...
</script>

With the function modified to: exports.myfunc = function()

should i have some other dependency for this to work? Because I get a different error:

[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function

Answer 1

Say I want to import data into a component from src/mylib.js:

var test = {
  foo () { console.log('foo') },
  bar () { console.log('bar') },
  baz () { console.log('baz') }
}

export default test

In my .Vue file I simply imported test from src/mylib.js:

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>

Answer 2

After a few hours of messing around I eventually got something that works, partially answered in a similar issue here: How do I include a JavaScript file in another JavaScript file?

BUT there was an import that was screwing the rest of it up:

Use require in .vue files

<script>
  var mylib = require('./mylib');
  export default {
  ....

Exports in mylib

 exports.myfunc = () => {....}

Avoid import

The actual issue in my case (which I didn't think was relevant!) was that mylib.js was itself using other dependencies. The resulting error seems to have nothing to do with this, and there was no transpiling error from webpack but anyway I had:

import models from './model/models'
import axios from 'axios'

This works so long as I'm not using mylib in a .vue component. However as soon as I use mylib there, the error described in this issue arises.

I changed to:

let models = require('./model/models');
let axios = require('axios');

And all works as expected.

Answer 3

I like the answer of Anacrust, though, by the fact "console.log" is executed twice, I would like to do a small update for src/mylib.js:

let test = {
  foo () { return 'foo' },
  bar () { return 'bar' },
  baz () { return 'baz' }
}

export default test

All other code remains the same...