Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT] Vue /Nuxt integration example? #148

Open
a1xon opened this issue Aug 1, 2020 · 2 comments
Open

[FEAT] Vue /Nuxt integration example? #148

a1xon opened this issue Aug 1, 2020 · 2 comments

Comments

@a1xon
Copy link

a1xon commented Aug 1, 2020

It would be very helpful to see an example where this library is integrated in a vue/nuxt enviroment.

@a1xon
Copy link
Author

a1xon commented Aug 1, 2020

I ended up injecting the nipple.min.js file via plugins
It works but I'm not sure if this is the way to go :\

@mtpiercey
Copy link

I'm using it with Quasar something like this: (in SPA mode; with Nuxt in Universal mode you'd have to wrap the mounted in a

if (process.browser) { }

block, but the same setup should work without plugins (although plugins work well too; it's really all a matter of whether you want the component to be global or not):

<template>
  <div class="virtual--gamepad">
  </div>
</template>

<script>
import nipplejs from 'nipplejs'

export default {
  name: 'VirtualGamepad',
  mounted () {
    // eslint-disable-next-line no-unused-vars
    const staticGamepad = nipplejs.create({
      zone: document.querySelector('.virtual--gamepad'),
      mode: 'static',
      position: { left: '50%', top: '50%' },
      color: '#c9c3b2',
      threshold: 0.25,
      fadeTime: 400,
      maxNumberOfNipples: 1
    })
  }
}
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants