VueJS component to run a MelonJS game

Question

I am making an application with VueJS, that launches a game with MelonJS, and then passes the score along to the mongoDB database.

At the moment, I have a .vue component that I want to inject the game into.

This is where the game should launch

</template>

<style>
#game-screen {
  background-color: blue;
}
</style>

<script>


</script>

The div screen is where the game is to run. The original game minifies the files, and on the index.html file it is injected into that div.

This is the game that I want to use

I am confused when it comes to require or importing the script files. Does Vue support using such large blocks of code in a component? If I link the files in the new project html file, once the component loads will it have access to the js and css files?

I have the idea in my mind that I can require them into the component, and the it will act just like the html file.

Answer 1

Adding a proper answer in so you have something to accept if it works, as well as some more sourcing.

Each Vue has an el -- Which is the element you are binding to -- as well as events like ready

In melon you supply an el (This is the optional div they call a wrapper) to render your element into, so you should be able to created a Vue, which requires all the game files, with an el of "#screen", and when the ready event fires trigger the game.onload() which will render onto the supplied selector (screen in this case)