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        lt template gt        lt div id  app  gt            lt login v-if  isTokenAvailable    gt  lt  login gt        lt  div gt       lt  template gt    I ve declared the isTokenAvailable method in the normal way for Vue inside methods  It uses a function that I wrote in a separate js file    lt script gt      import   as mylib from    mylib        export default                      methods               isTokenAvailable       gt                    return mylib myfunc                                   lt  script gt    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 this below 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 seem 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    lt script gt      const mylib   require    mylib             lt  script gt    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

User · Answer

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

User · Answer

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    lt script gt     import test from    mylib     console log test foo           lt  script gt

User · Answer

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   lt script gt    var mylib   require    mylib      export default            Exports in mylib   exports myfunc        gt           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

User · Answer

I was trying to organize my vue app code  and came across this question   since I have a lot of logic in my component and can not use other sub-coponents   it makes sense to use many functions in a separate js file and call them in the vue file   so here is my attempt 1 The Component   vue file    MyComponent vue file  lt template gt     lt div gt     lt div gt Hello   name   lt  div gt     lt button  click  quot function A quot  gt Read Name lt  button gt     lt button  click  quot function B quot  gt Write Name lt  button gt     lt button  click  quot function C quot  gt Reset lt  button gt     lt div gt   message   lt  div gt     lt  div gt    lt  template gt     lt script gt  import Mylib from  quot   Mylib quot       lt -- import export default     name   quot MyComponent quot     data         return         name   quot Bob quot         message   quot click on the buttons quot                methods        function A           Mylib myfuncA this       lt ---read data            function B           Mylib myfuncB this       lt ---write data            function C           Mylib myfuncC this       lt ---write data               lt  script gt   2 The External js file   Mylib js let exports           this  vue instance  is passed as that   so we    can read and write data from and to it as we please    exports myfuncA    that    gt      that message      quot you hit   myfuncA   function that is located in Mylib js  and data name    quot        that name      exports myfuncB    that    gt      that message      quot you hit   myfuncB   function that is located in Mylib js and now I will change the name to Nassim quot     that name    quot Nassim quot       lt -- change name to Nassim     exports myfuncC    that    gt      that message      quot you hit   myfuncC   function that is located in Mylib js and now I will change the name back to Bob quot     that name    quot Bob quot       lt -- change name to Bob     export default exports    3 see it in action   https   codesandbox io s distracted-pare-vuw7i file  src components MyComponent vue  edit after getting more experience with Vue   I found out that you could use mixins too to split your code into different files and make it easier to code and maintain see https   vuejs org v2 guide mixins html

[javascript] How to import functions from different js file in a Vue+webpack+vue-loader project

Examples related to javascript

Examples related to module

Examples related to webpack

Examples related to vuejs2

Examples related to vue-loader