# Solid Vue Plugin

**URL:** https://forum.solidproject.org/t/solid-vue-plugin/1880
**Category:** App Testing
**Created:** [June 3, 2019, 4:07pm UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880 "2019-06-03T16:07:08Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![JordanShurmer](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jordanshurmer/32/113_2.png) [@JordanShurmer](https://forum.solidproject.org/u/JordanShurmer)
#### Post date: [June 3, 2019, 4:07pm UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880/1 "2019-06-03T16:07:09Z")

</div>

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

> **[JordanShurmer/vue-solid-plugin](https://github.com/JordanShurmer/vue-solid-plugin)**
>
> A Vue plugin for working with Solid. Contribute to JordanShurmer/vue-solid-plugin development by creating an account on GitHub.

**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)

---

<div class="post-metadata">

### Author: ![shingyeung](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/shingyeung/32/491_2.png) [@shingyeung](https://forum.solidproject.org/u/shingyeung)
#### Post date: [June 4, 2019, 12:05am UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880/2 "2019-06-04T00:05:39Z")

</div>

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-angular)  
[https://solid.inrupt.com/docs/writing-solid-apps-with-react](https://solid.inrupt.com/docs/writing-solid-apps-with-react)

---

<div class="post-metadata">

### Author: ![JordanShurmer](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jordanshurmer/32/113_2.png) [@JordanShurmer](https://forum.solidproject.org/u/JordanShurmer)
#### Post date: [June 4, 2019, 12:18am UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880/3 "2019-06-04T00:18:26Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JordanShurmer](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jordanshurmer/32/113_2.png) [@JordanShurmer](https://forum.solidproject.org/u/JordanShurmer)
#### Post date: [June 4, 2019, 11:53am UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880/5 "2019-06-04T11:53:04Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![JordanShurmer](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jordanshurmer/32/113_2.png) [@JordanShurmer](https://forum.solidproject.org/u/JordanShurmer)
#### Post date: [June 5, 2019, 8:24pm UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880/6 "2019-06-05T20:24:29Z")

</div>

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

> **[GitHub - JordanShurmer/vue-solid-plugin: A Vue plugin for working with Solid](https://github.com/JordanShurmer/vue-solid-plugin)**
>
> A Vue plugin for working with Solid

## new things:

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

pre-populate user data in your component

```auto
{
  //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

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

```

and

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

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

```

---

<div class="post-metadata">

### Author: ![JordanShurmer](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jordanshurmer/32/113_2.png) [@JordanShurmer](https://forum.solidproject.org/u/JordanShurmer)
#### Post date: [July 25, 2019, 5:02pm UTC](https://forum.solidproject.org/t/solid-vue-plugin/1880/7 "2019-07-25T17:02:26Z")

</div>

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:

```auto
{
  //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!

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

```
