Solid Vue Plugin

Build a Solid App App Testing
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)

10 Likes
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

1 Like
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.

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
2 Likes
7

Made another update (0.6.0) to this to make loading data even easier. The plugin will now load data from the user’s Type Index automatically!

Let me know what you think

See the readme for details again, but here’s the gist:

{
  //in your vue component definition
  solid: {
    user: {
      name: 'foaf:name'
      bookmarks: {
        type: 'http://www.w3.org/2002/01/bookmark#Bookmark',
        properties: {
          link: 'http://www.w3.org/2002/01/bookmark#recalls',
          title: 'dct:title',
        }
      }
    }
  }
}

Which will then give you access to {{ user.name }} as well as {{ user.bookmarks }} in the template, as if they were in the data definition!

<h1>{{ user.name}}</h1>
<ul>
  <li v-for="bookmark in user.bookmarks">
    <a :href="bookmark.link">{{ bookmark.title }}</a>
  </li>
</ul>
4 Likes