How to run it with Framework7-Vue?

[LocutusOfPenguin]

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]

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]

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):
<template> <chess-board position="start" style="width: 400px"></chess-board> ....

import {ChessBoardElement} from 'chessboard-element';

export default {
components: {
ChessBoardElement
},
setup(props, context) {
...

and some other way...but nothing really change. What else i should do to make it work similar to the "startPos Example"?

I do get these errors (which prob. the reason why its not working --- but i cant get rid of them, no matter what i tried)

• [Vue warn]: Failed to resolve component: chess-board
• Element chess-board scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update. See https://lit.dev/msg/change-in-update for more information.