Solid Vue Plugin


#1

I’m working on a Vue Plugin, and have it at a share-able / use-able state now!

Current Features

  • this.$solid for direct access the solid-auth-client
  • <SolidLogin>: renderless component for easy log-in flow

See the github link for more details/documentation/etc.

More Feature Ideas

  • A better this.$solid object, with more helper things, like this.$solid.webId for the logged in webId
  • Some sort of way to provide a mapping of Solid/Linked data -> component data
  • More components…?

Any bits of feedback and ideas are appreciated. (I’ve also brought it up in the solid/app-development gitter room, FYI)


#2

Hi Jordan, thank you. This will help me.

I wrote a Solid chat app with Angular as it was then the only tooling available (end of 2018). React was added recently. I actually had decided on Vue and had started to code it but bailed due to lack of support at that time and I was learning everything fresh so went path of least-resistance.

My suggestion is if you can somehow contribute this as part of a generator so there is a 3rd option: angular, react, and vue a la

yo @inrupt/solid-vue

That would be make it low-touch to attract developers who are enamored with his/her favorite framework to take Solid for a test-drive.

Please see if not already:
https://solid.inrupt.com/docs/writing-solid-apps-with-angular
https://solid.inrupt.com/docs/writing-solid-apps-with-react


#3

Yes, someone else brought up a generator idea earlier today as well. I hadn’t considered it, but seems like a good idea. Definitely lower on my priority list though, but would be good to get to after the plugin is more full-featured.


#4

Great stuff.

Perhaps integrating LDflex could also be useful; it was created to assist with query needs (such as user and name, but far beyond) in a framework-agnostic way. See https://ruben.verborgh.org/blog/2018/12/28/designing-a-linked-data-developer-experience/#ldflex


#5

Ya, I am working on that right now, going to try integrating your query-ldflex library :slight_smile:

I found that post just yesterday and read through it already. Great write up! Well written, with good background and good impl details.


#6

Made some progress on this today, for anyone interested! Any and all feedback is welcome.

new things:

The github README has more details, but here’s the gist

pre-populate user data in your component

{
  //in your vue component definition
  solid: {
    user: {
      name: '' // will auto-populate {{ user.name }} from solid on log in
      //etc
    }
  }
}

loggedIn lifecycle hook to execute code after the user logs in

{
  //in your vue component definition
  loggedIn() {
    console.log("user logged in!")
  }
}

and

//query-ldflex available
this.$solid.data

//solid-auth-client available
this.$solid.auth