search

justinfagnani / chessboard-element

A <chess-board> web component
https://justinfagnani.github.io/chessboard-element/
Other
100 stars 14 forks source link

How to run it with Framework7-Vue? #5

Open LocutusOfPenguin opened 4 years ago

LocutusOfPenguin commented 4 years ago

Hi,

i have problems with F7Vue.

The only way it works is with "require('yrlib") => So, yr install docu not (for me!)

inside the vue template i use these "chess-board" tags, but that is only working, if the markup is already visible at startup (not to say, that my IDE is unhappy with this tags).

Width also not working, but i just use "f7-col" for it. Well, my MAIN problem is invisible markup at startup of component. with chessboard inside.

Can y help me?

justinfagnani commented 4 years ago

I'm not sure I understand the problems here. I'm not familiar with F7. This library is published as standard JS modules. Hopefully your tooling supports that, but if not you should be able to use a tool like Rollup, Webpack, or Babel to compile to the module format you need. Then you should be able to import the element and just use <chess-board></chess-board> in your templates.

The element uses shadow DOM to encapsulate its internals. They are not intended to be visible in the DOM. All current major browsers support Shadow DOM. I'm not going to support IE11.

LocutusOfPenguin commented 2 years ago

in meantime i also tried it with pure Vue3 But im unsure, how to make this work there. I only get an empty board.

I tried something like this (in XYZ.vue): ``