How to embed playcanvas into Vue programs instead of vice versa

As mentioned above, I am trying to embed playcanvas into the Vue program. I have retrieved some examples that integrate Vue into Playcanvas. Is there any good way to reverse it? I heard that we can consider using the source version, can anyone give me some guidance? thank.

Hi @kprimo,

I don’t have much experience with Vue.js but I know it should be similar with react and angular.

If you search the forums for react you will find some insightful posts:

Hi @kprimo
As @Leonidas linked, you can either embed an iframe and run an app through the public folder, or use the more direct approach with NPM.
It is very similar to the webpack template (https://github.com/playcanvas/playcanvas-webpack)
You can simply npm install playcanvas and then import * as pc from 'playcanvas';.

I modified the HelloWorld component from Vue to contain a Playcanvas app;

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <canvas id="game" style="width: 50em; height: 25em"></canvas>
  </div>
</template>
<script>
import * as pc from 'playcanvas';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function() {
    return {
      app: undefined
    }
  },
  mounted(){
    this.app = new pc.Application(document.getElementById('game'));
    this.app.setCanvasResolution(pc.RESOLUTION_AUTO);
    // create box entity
    const box = new pc.Entity('cube');
    box.addComponent('model', {
        type: 'box'
    });
    this.app.root.addChild(box);

    // create camera entity
    const camera = new pc.Entity('camera');
    camera.addComponent('camera', {
        clearColor: new pc.Color(0.1, 0.1, 0.1)
    });
    this.app.root.addChild(camera);
    camera.setPosition(0, 0, 3);

    // create directional light entity
    const light = new pc.Entity('light');
    light.addComponent('light');
    this.app.root.addChild(light);
    light.setEulerAngles(45, 0, 0);

    // rotate the box according to the delta time since the last frame
    this.app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

    this.app.start();
  }
}
</script>

Hope it helps.

3 Likes

Thank you for sharing, @Ivolutio!

1 Like

I’m actually working on a project that uses Vue.JS right now. Ended up going with a little more unconventional way of integrating by forgoing PlayCanvas NPM package entirely. However, it only takes me a second to export a new version of the project from PlayCanvas and have it working in Vue, so I’ve found that convenient. If you stick the exported files right in the “public” folder, and use a slightly modified index.html then it should work.

If it helps, this is what my public/index.html looks like:

  <body>
    <!-- Vue.JS app root -->
    <div id="app"></div>
    <!-- PlayCanvas -->
    <link rel="manifest" href="./playcanvas/manifest.json">
    <script src="./playcanvas/playcanvas-stable.min.js"></script>
    <script src="./playcanvas/settings.js"></script>
    <script>
      // PlayCanvas project location settings
      var PREFIX = '/playcanvas/';
      var CONFIG_FILENAME = PREFIX + 'config.json';
      var ASSET_PREFIX = PREFIX;
      var SCRIPT_PREFIX = PREFIX;
    </script>
    <script src="./playcanvas/start.js" defer></script>
    <script src="./playcanvas/loading.js" defer></script>
  </body>

When I export the lastest project from PlayCanvas, I unzip everything into the ./public/playcanvas folder.
image

This method is a little less flexible though. I end up moving the <canvas> DOM element into a Vue component on load.

4 Likes

thank you for your sharing. I think I’ll adopt your plan.

1 Like

Hello, do you have any more examples?