Js-ipfs and vue getting started

Help Coding
1

I am looking to use ipfs as the file store in a vue app, so that files are all stored locally. I am however struggling with understanding the vue demo and what exactly it does and how I move forward.

I am using vue cli gui so have imported latest js-ipfs as a dependancy and have built a component based on the demo code.

<template>
   <div>
<h1>{{ status }}</h1>
<h2>ID: {{ id }}</h2>
<h2>Agent version: {{ agentVersion }}</h2>
 </div>
</template>

<script>
import VueIpfs from 'ipfs'
//VueIpfs

export default {
  name: 'IpfsInfo',
  data: function () {
     return {
       status: 'Connecting to IPFS...',
       id: '',
  agentVersion: '',
}
   },
mounted: function () {
this.getIpfsNodeInfo()
 },
 methods: {
     async getIpfsNodeInfo() {
   try {
    // Await for ipfs node instance.
    const ipfs = await this.$ipfs
    // Call ipfs `id` method.
    // Returns the identity of the Peer.
    const { agentVersion, id } = await ipfs.id()
    this.agentVersion = agentVersion
    this.id = id
    // Set successful status text.
    this.status = 'Connected to IPFS =)'
  } catch (err) {
    // Set error status text.
    this.status = `Error: ${err}`
  }
    },
  },
}
</script>

However I am not sure 1) how to adapt and then 2) next steps to get this to render images out of IPFS, I have the desktop app installed ? assuming I could call into that “bucket”

Any pointers appreciated a lot of the API stuff is out of my depth instantly atm

2

My understanding is that the example component can be used to spin up a IPFS node and then I use Vue upload forms to add. to the IPFS node… that kind makes sense but I cant see if I am starting it correctly