sparna-git / Sparnatural

Sparnatural : Typescript visual SPARQL query builder for knowledge graphs, configurable with SHACL
http://sparnatural.eu
GNU Lesser General Public License v3.0
206 stars 34 forks source link

vue integartion #519

Open scenaristeur opened 1 year ago

scenaristeur commented 1 year ago

Bonjour Thomas,

je souhaitais importer sparna dans une appli vue js en utilisant ce code , comme je fais habituellement pour n'importe quel composant vuejs

example ici https://github.com/scenaristeur/Sparnatural/blob/master/examples/sparna-vue/src/views/HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <SparNatural />
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import SparNatural from 'sparnatural'

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    SparNatural
  }
}
</script>

mais j'ai ce message dans la console du navigateur

[Vue warn]: Component is missing template or render function. at at <HomeView onVnodeUnmounted=fn ref=Ref< undefined > > at at

Vuejs a besoin d'un composant html de base et de n'avoir qu'un seul élément root dans ce template. Je pensais changer BaseClassFectory de la sorte :

    html = $(`<div class="${baseCssClass}"></div>`);
}
**html = $(`<template>${html}</template>`);**
return html;

}

mais ça n'a pas l'air de fonctionner... une idée ?

tfrancart commented 1 year ago

Tout cela est un peu chinois pour moi ;-) Ce que je peux te dire c'est que le nom de l'élément HTML est <spar-natural> (minuscules, avec le tiret), et pas <SparNatural />. Il y a bien un seul élément racine. Est-ce que la doc d'intégration React pourrait t'être utile ? http://docs.sparnatural.eu/react-integration.html