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

Guppy in .vue #198

Open
kubaPod opened this issue Jun 7, 2021 · 2 comments
Open

Guppy in .vue #198

kubaPod opened this issue Jun 7, 2021 · 2 comments

Comments

@kubaPod
Copy link

kubaPod commented Jun 7, 2021

Hi, I am trying to integrate guppy in a quasar-js/vue project. My test component looks like this:

<template>
  <div>           
    <div id="guppy1" style="width:400px;"/>
  </div>
</template>

<script>

import Guppy from 'guppy-js/guppy.min.js'
export default {
    created () {   
        var g1 = new Guppy('guppy1')
    },
}
</script>

<style></style>

But I am getting an error:

vue.runtime.esm.js?5593:619 [Vue warn]: Error in created hook: "TypeError: Cannot set property 'tabIndex' of null"

found in

---> <Guppy> at src/components/Guppy.vue
       [...]
 

Which is most likely caused in
image

byt the fact that document is not available. What would be a proper way to handle this?

@kubaPod
Copy link
Author

kubaPod commented Jun 7, 2021

Ok, stupid mistake. One needs to use mounted to make sure document is available.

Still does not work though, it is inactive:

<div id="guppy1" tabindex="0" class=" guppy_inactive " style="width: 400px;"></div>

@kubaPod
Copy link
Author

kubaPod commented Jun 7, 2021

Also, this /node_modules/guppy-js/style/guppy-default.min.css does not exist, namely the style dir does not exist.
It does not complain but it does not load anything either.
Once style/ is removed the frame is loaded but icons loaded by .js file are not found.

So many things are off that I am not sure what to do. Any tips?

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

No branches or pull requests

1 participant