So I'm wondering how I can include another JavaScript file as is. Much like PHP's include function/keyword. I'm not looking for the export function, as that just allows you to use variables from other files.

I'm using vue init webpack my-project.

Here's what I basically have (Vue):

mounted () {
    socket = io("http://localhost:8081")
    socket.connect()

    // ensure server has actually put us in a room
    socket.on("find game", () => {
        this.gameSearch = "finding"
    })
    ...
}

So basically I have a whole heap of socket.on that I would like to move into another file. I'm wondering how I could I could include them as is so that they would work as if the code was already inserted there (like PHP's include)

What it might look like in the end:

mounted () {
    <socket.js file>
}

socket.js

socket = io("http://localhost:8081")
socket.connect()

// ensure server has actually put us in a room
socket.on("find game", () => {
    this.gameSearch = "finding"
})
...

So I'm wondering how I can include another JavaScript file as is. Much like PHP's include function/keyword. I'm not looking for the export function, as that just allows you to use variables from other files.

I'm using vue init webpack my-project.

Here's what I basically have (Vue):

mounted () {
    socket = io("http://localhost:8081")
    socket.connect()

    // ensure server has actually put us in a room
    socket.on("find game", () => {
        this.gameSearch = "finding"
    })
    ...
}

So basically I have a whole heap of socket.on that I would like to move into another file. I'm wondering how I could I could include them as is so that they would work as if the code was already inserted there (like PHP's include)

What it might look like in the end:

mounted () {
    <socket.js file>
}

socket.js

socket = io("http://localhost:8081")
socket.connect()

// ensure server has actually put us in a room
socket.on("find game", () => {
    this.gameSearch = "finding"
})
...

• javascript
• node.js
• vue.js
• vuejs2

• What module system are you using? require? es6? Are you using webpack? Please, provide more details. – Sergi Pasoevi Commented Dec 14, 2017 at 6:26
• @SergiPasoev I'm using es6 and webpack. I'm using the default installation for vue-cli. So vue init webpack my-project. – A. L Commented Dec 14, 2017 at 6:27
• You didn't anser why you need "inline include". – Sergi Pasoevi Commented Dec 14, 2017 at 8:16
• @SergiPasoev Well I need the .on functions to occur once the ponent is mounted. Maybe I'll just try exporting the socket and see what happens tomorrow. – A. L Commented Dec 14, 2017 at 8:21

3 Answers 3

I know you mentioned you don't need exports, and you want inline code but I don't think you can easily able to achieve that, but if you are working with bable and es6 as vue js is now, you can export and import.

but I assure you it will not be plex as you think. { rather making it inline will be lot more overhead } (its just my point of view may you want it for some good reason :) )

because at last all code will be inside big bundle.js

may be it can be simple, you just wrap your all coed in to the one big function bind it with main instance, now whole block of code looks like its inside of your main file but still in another file.

I assume you need this in es6,bable and with import

for example: assume code.js and my main.js are on same level and (main.js)'s some part of code is huge like event listeners and etc so I can move it in code.js

code.js / just like your socket.js

const code = function() {

    // this whole space is your's

    console.log(this);

    console.log(this.socket);

    const test = () => {
        console.log(this);
    }

    test()
}
export default code

now my main.js / just like your main vue app

import socketCode from './code';

const main = {
    socket: 'test',
    init() {
        console.log(this);
        let socketCodebinded = socketCode.bind(this); // magical this binding
        socketCodebinded(); // this will do all event-binding things 
        //and good thing is that it will have "this" as context so no breaking of references

        ... continue other code or add another lib ;) like above
    }
}

main.init();

you can also check references/scope as well all things are just working perfect and you can stack up your all code in code.js/socket.js file just like its inside main.js.

You cannot do it exactly the way you described, however I have another suggestion. Put all your socket.ons in a function in a separate file e.g.

sockets.js

  function attachSockets($socket, $this){ // note the added $ in var names, you can actually pass an array here will all objects you need

    $socket.on("find game", () => {
        $this.gameSearch = "finding"
    });
    ...
    ...
    ...
  }

then modify your original file

socket.js

socket = io("http://localhost:8081")
socket.connect()
attachSockets(socket, this)

load both js files to your page and it should give you what you want..

You are probably looking for export default. It will allow you to export a function or an object.

export default {
    // anything
}

See more examples here: https://developer.mozilla/en-US/docs/web/javascript/reference/statements/export