Layout not working following example

[jsinkers]

My issue is that with vue-cytoscape all nodes show up in the top-left corner, overlapping (when grid layout is specified). If I use plain cytoscape with all the same elements and config it works as expected with a properly laid out grid. I've gone back to the start and tried to follow the example given in the guide, but I must be missing something because I still get the same behaviour with overlapping nodes. Am I supposed to be calling layout.run()? Otherwise any other ideas why this could be playing up?

Here's the my attempt to replicate the example in the guide:

<template>
  <div>
    <h1>Cytoscape</h1>
    <cytoscape ref="cy" :config="config">
      <cy-element
        v-for="def in elements"
        :key="`${def.data.id}`"
        :definition="def"
      />
    </cytoscape>
  </div>
</template>

<script>
const config = {
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    }, {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
}

const elements = [
  { // node a
    data: { id: 'a' }
  }, { // node b
    data: { id: 'b' }
  }, { // edge ab
    data: { id: 'ab', source: 'a', target: 'b' }
  }
]

export default {
  name: 'HelloWorld',
  data: function() {
    return {
      elements: elements,
      config: config,
    }
  },
}
</script>

<style scoped>
</style>

[rcarcasses]

Hi @jsinkers, yes, I would recommend to call layout.run(), in afterCreated(cy) hook, for some plugins you have to do this explicitly. Can you try and let me know if it works?

[jsinkers]

Thanks for that - this is now working. I modified from #17 as this.$cytoscape.instance isn't available in latest version

async afterCreated(cy) {
      await cy
      cy.layout(this.config.layout).run()
}