{"id":13929352,"url":"https://github.com/JordanShurmer/vue-solid-plugin","last_synced_at":"2025-07-19T11:31:35.525Z","repository":{"id":42205880,"uuid":"189769099","full_name":"JordanShurmer/vue-solid-plugin","owner":"JordanShurmer","description":"A Vue plugin for working with Solid","archived":false,"fork":false,"pushed_at":"2022-12-09T05:17:02.000Z","size":370,"stargazers_count":13,"open_issues_count":7,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-26T18:40:26.829Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JordanShurmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-01T19:11:37.000Z","updated_at":"2023-01-05T16:24:59.000Z","dependencies_parsed_at":"2023-01-25T11:01:58.718Z","dependency_job_id":null,"html_url":"https://github.com/JordanShurmer/vue-solid-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JordanShurmer/vue-solid-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanShurmer%2Fvue-solid-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanShurmer%2Fvue-solid-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanShurmer%2Fvue-solid-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanShurmer%2Fvue-solid-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JordanShurmer","download_url":"https://codeload.github.com/JordanShurmer/vue-solid-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanShurmer%2Fvue-solid-plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265926927,"owners_count":23850886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-07T18:02:17.117Z","updated_at":"2025-07-19T11:31:35.233Z","avatar_url":"https://github.com/JordanShurmer.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# Vue Solid Plugin\n\n[![Project Solid](https://img.shields.io/badge/project-Solid-7C4DFF.svg?style=flat-square)](https://github.com/solid/solid)\n[![NPM Package](https://img.shields.io/npm/v/vue-solid-plugin.svg)](http://npmjs.com/package/vue-solid-plugin)\n\nA set of Vue plugins/components for making [Solid](https://github.com/solid) app development easier.\n\n* [Getting Started](#getting-started)\n* [Solid Login component](#solidlogin)\n* [Populating data in your component](#populating-data)\n* [New **loggedIn** lifecycle hook](#loggedin-lifecycle-hook)\n* [Accessing the solid-auth-client](#solid-auth-client)\n* [Accessing the query-ldflex api](#query-ldflex)\n\n# Getting Started\n\n## Install\n\nInstall the npm package\n\n```bash\nnpm install --save vue-solid-plugin\n```\n\nAdd it to your vue app\n\n```diff\n// main.js\nimport Vue from 'vue';\nimport App from './App.vue';\n+ import {Solid, SolidLogin} from 'vue-solid-plugin';\n\n+ Vue.use(Solid);\n+ Vue.component('SolidLogin', SolidLogin);\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app');\n\n```\n\n# Documentation\n\nThis plugin does a few different things to help write good Solid applications.\n\n\n**Features**\n\n* a [renderless component](https://adamwathan.me/renderless-components-in-vuejs/) for making logging in easy called `\u003cSolidLogin\u003e`\n* pre-load user data (and other data with known subjects) new `solid` attribute when defining your component\n* **loggedIn** lifecycle hook, to run code after the user logs in\n* access to the [solid-auth-client] at `this.$solid.auth`\n* access to the [query-ldflex] api at `this.$solid.data`\n\n## SolidLogin\n\nA [renderless component](https://adamwathan.me/renderless-components-in-vuejs/), providing an easy to use API for logging in/out of a Solid server. You provide the markup however you want to, using the data provided and calling the actions provided.\n\n\n[view src](./solid-login.js)\n\n**Example:**\n\n```vue\n\u003cSolidLogin popupUri=\"/popup.html\"\u003e\n    \u003cdiv slot-scope=\"{ initializing, login, logout, loggedIn, webId }\"\u003e\n        \u003cbutton v-if=\"initializing\"\u003eLoading...\u003c/button\u003e\n        \u003cbutton v-else-if=\"loggedIn\" @click=\"logout()\" :title=\"webId\"\u003eLog out\u003c/button\u003e\n        \u003cbutton v-else @click=\"login()\"\u003eLog In\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/SolidLogin\u003e\n```\n\nFor more info about renderless components, check out this [excellent article](https://adamwathan.me/renderless-components-in-vuejs/).\n\n### Props\n\nYou provide the properties on the component itself, passing in data to the SolidLogin component\n\n* `popupUri` \u003csmall\u003erequired\u003c/small\u003e: the uri to the popup html page for logging in. ([Generate](https://solid.github.io/solid-auth-client/#generating-a-popup-window) your own, or maybe grab [solid.community's](https://solid.community/common/popup.html) and serve it on your domain)\n\n### Data\n\nThis info is given to you in the default slot scope. You can destructure the object, as in the example above.\n\n* `initializing`: true if the `solid-auth-client` has not checked for any login status yet (i.e. it's still initializing). Provide a loading gif or something\n* `loggedIn`: true if logged in, false otherwise\n* `webId`: the webId of the logged in person, or an empty string\n\n### Actions\n\nThese methods are given to you in the default slot scope. You can destructure the object, as in the example above.\n\n* `login()`: call this method when you want to invoke the login process (i.e. the popupUri)\n* `logout()`: call this method when you want to logout\n\n## Populating Data\n\nIf your component needs data from solid you can specify it in the definition of your component and the plugin will populate it **asynchronously**, providing your template access to it as if it were in `data` or `computed`.\n\nYou define where the data comes from (the **subject**) and what data pieces you want about that subject (the **propeties**). An exception to this is the `user` - for this you only need to define what data you want about the user, no need to specify the subject.\n\nThe **properties** you specify can be either a _string_ or an _object.\n\n* _String_ properties get resolved directly using the data available for the subject. They can be anything which [query-ldflex] understands: anything from their [context](https://github.com/solid/query-ldflex/blob/master/src/context.json), or any full url (e.g. `https://schema.org/description`)\n* _Object_ properties let you populate data coming from the subject's [**Type Index**](https://github.com/solid/solid/blob/master/proposals/data-discovery.md). You must specify the _type_ you're looking for, and what _properties_ you care about on that type.\n\n\n```diff\n//your-component.vue\n\u003ctemplate\u003e\n  \u003cspan class=\"user__name\"\u003e{{ user.name }}\u003c/span\u003e\n  \u003cspan class=\"other__thing\"\u003e{{ other.thing }}\u003c/span\u003e\n  \u003cul\u003e\n    \u003cli v-for=\"bookmark in user.bookmarks\"\u003e\n      \u003ca :href=\"bookmark.link\"\u003e{{ bookmark.title }}\u003c/a\u003e\n    \u003c/li\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'YourComponent',\n  data: ...,\n+  solid: {\n+    user: { //user is sepcial, no need to specify a 'subject', just specify the data\n+      name: 'name',\n+      title: 'foaf:title',\n+      bookmarks: {\n+        'type': 'http://www.w3.org/2002/01/bookmark#Bookmark',\n+        properties: {\n+          link: \"http://www.w3.org/2002/01/bookmark#recalls\",\n+          title: \"terms:title\",\n+        },\n+      },\n+    },\n+    other: {\n+      subject: 'http://some-other-url.to#a-thing',\n+      properties: { \n+        description: 'schema:description',\n+        bookmarks: {\n+          'type': 'http://www.w3.org/2002/01/bookmark#Bookmark',\n+          properties: {\n+            link: \"http://www.w3.org/2002/01/bookmark#recalls\",\n+            title: \"terms:title\",\n+          },\n+        },\n+      }\n+    }\n+  }\n}\n\u003c/script\u003e\n```\n\n## `loggedIn` lifecycle hook\n\nThis new lifecycle hook will execute after the user logs in and the `solid` data defined above have been populated.\n\nOne good use for this is to load arbitrary data which requires the user to be logged in. You can use the [query-ldflex] api for this, which is available at `this.$solid.data`.\n\n```vue\n//your-component.vue\n\u003ctemplate\u003e\n  \u003cspan class=\"more-data\"\u003e{{ moreData }}\u003c/span\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'YourComponent',\n  data: {\n    moreData: null, //initial value, will populate when the user logs in\n  },\n  solid: {...},\n  async loggedIn() {\n    this.moreData = await this.$solid.data['some-rdf-url-with#more-data']['somepredicate']\n  }\n}\n\u003c/script\u003e\n```\n\n## Solid Auth Client\n\nA reference to the `solid.auth` object from [solid-auth-client] is availabe at `this.$solid.auth`. This essentially saves you from doing `import auth from 'solid-auth-client'` in every component.\n\n```js\nthis.$solid.auth.fetch('https://timbl.com/timbl/Public/friends.ttl')\n  .then(console.log);\n```\n\n## Query LDFlex\n\nA reference to the `data` object from [query-ldflex] is available at `this.$solid.data`. This essentially saves you from doing `import data from 'query-ldflex'` in every component.\n\n```js\nconsole.log(await this.$solid.data['https://ruben.verborgh.org/profile/#me'].friends.firstName);\n```\n\n\n\n[solid-auth-client]: https://github.com/solid/solid-auth-client 'Solid Auth Client'\n[query-ldflex]: https://github.com/solid/query-ldflex 'Query LDFlex'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJordanShurmer%2Fvue-solid-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJordanShurmer%2Fvue-solid-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJordanShurmer%2Fvue-solid-plugin/lists"}