mrkvon · Oct 22, 2026 · Sep 8, 2026 · Sep 10, 2026 · Sep 11, 2026 · Sep 17, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - **connected-solid:** Read links from Link header of a Solid resource. (#165)
+- **vue:** Add [Vue](https://vuejs.org) support with `@ldo/vue` package. ([#171](https://github.com/o-development/ldo/pull/171))
 
 ### Changed
 

diff --git a/dev/solid-vue-vite-app/.gitignore b/dev/solid-vue-vite-app/.gitignore
@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+#!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
diff --git a/dev/solid-vue-vite-app/README.md b/dev/solid-vue-vite-app/README.md
@@ -0,0 +1,42 @@
+# solid-vue-vite-app
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
diff --git a/dev/solid-vue-vite-app/env.d.ts b/dev/solid-vue-vite-app/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/dev/solid-vue-vite-app/index.html b/dev/solid-vue-vite-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/dev/solid-vue-vite-app/package.json b/dev/solid-vue-vite-app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "solid-vue-vite-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "build:ldo": "ldo build --input src/_shapes --output src/_ldo"
+  },
+  "dependencies": {
+    "@ldo/connected-solid": "^1.0.0-alpha.50",
+    "@ldo/ldo": "^1.0.0-alpha.50",
+    "@ldo/vue": "^1.0.0-alpha.50",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@ldo/cli": "^1.0.0-alpha.50",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/jsonld": "^1.5.15",
+    "@types/node": "^24.13.3",
+    "@types/shexj": "^2.1.7",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "npm-run-all2": "^9.0.2",
+    "typescript": "~6.0.0",
+    "vite": "^8.1.5",
+    "vite-plugin-vue-devtools": "^8.1.5",
+    "vue-tsc": "^3.3.7"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  }
+}
diff --git a/dev/solid-vue-vite-app/public/favicon.ico b/dev/solid-vue-vite-app/public/favicon.ico
diff --git a/dev/solid-vue-vite-app/src/App.vue b/dev/solid-vue-vite-app/src/App.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { FoafProfileShapeType } from "./_ldo/foafProfile.shapeTypes.js";
+import { useSubject, useResource } from "./ldo.js";
+import UseMatchSubjectTest from "./useMatchSubjectTest.vue";
+import VueReadmeTest from "./vueReadmeTest.vue";
+
+const isValidUrl = (str: string) => {
+  try {
+    return Boolean(new URL(str));
+  } catch {
+    return false;
+  }
+};
+
+const inputUri = ref("");
+
+const validUri = computed(() =>
+  isValidUrl(inputUri.value) ? inputUri.value : "",
+);
+
+const subject = useSubject(FoafProfileShapeType, inputUri);
+console.log(subject);
+useResource(validUri);
+</script>
+
+<template>
+  <div>
+    <h1>vue Solid auth test</h1>
+    <input v-model="inputUri" placeholder="enter webId" />
+    <div>{{ subject?.name ?? subject?.["@id"] }}</div>
+    <ul>
+      <li v-for="friend in subject?.knows" :key="friend['@id']">
+        {{ friend["@id"] }}
+      </li>
+    </ul>
+
+    <p>checked:</p>
+    <p>active:</p>
+    <p>webId:</p>
+    <p>webId resource:</p>
+
+    <form>
+      <input />
+      <button type="submit">login</button>
+    </form>
+
+    <!-- <button type="button" @onClick="logout">logout</button> -->
+
+    <form>
+      <input />
+      <button type="submit">fetch</button>
+    </form>
+
+    <pre></pre>
+  </div>
+  <UseMatchSubjectTest />
+  <VueReadmeTest />
+</template>
+
+<style scoped></style>
diff --git a/dev/solid-vue-vite-app/src/_ldo/foafProfile.context.ts b/dev/solid-vue-vite-app/src/_ldo/foafProfile.context.ts
@@ -0,0 +1,48 @@
+import type { LdoJsonldContext } from "@ldo/ldo";
+
+/**
+ * =============================================================================
+ * foafProfileContext: JSONLD Context for foafProfile
+ * =============================================================================
+ */
+export const foafProfileContext: LdoJsonldContext = {
+  type: {
+    "@id": "@type",
+    "@isCollection": true,
+  },
+  Person: {
+    "@id": "http://xmlns.com/foaf/0.1/Person",
+    "@context": {
+      type: {
+        "@id": "@type",
+        "@isCollection": true,
+      },
+      name: {
+        "@id": "http://xmlns.com/foaf/0.1/name",
+        "@type": "http://www.w3.org/2001/XMLSchema#string",
+      },
+      img: {
+        "@id": "http://xmlns.com/foaf/0.1/img",
+        "@type": "http://www.w3.org/2001/XMLSchema#string",
+      },
+      knows: {
+        "@id": "http://xmlns.com/foaf/0.1/knows",
+        "@type": "@id",
+        "@isCollection": true,
+      },
+    },
+  },
+  name: {
+    "@id": "http://xmlns.com/foaf/0.1/name",
+    "@type": "http://www.w3.org/2001/XMLSchema#string",
+  },
+  img: {
+    "@id": "http://xmlns.com/foaf/0.1/img",
+    "@type": "http://www.w3.org/2001/XMLSchema#string",
+  },
+  knows: {
+    "@id": "http://xmlns.com/foaf/0.1/knows",
+    "@type": "@id",
+    "@isCollection": true,
+  },
+};
diff --git a/dev/solid-vue-vite-app/src/_ldo/foafProfile.schema.ts b/dev/solid-vue-vite-app/src/_ldo/foafProfile.schema.ts
@@ -0,0 +1,97 @@
+import type { Schema } from "shexj";
+
+/**
+ * =============================================================================
+ * foafProfileSchema: ShexJ Schema for foafProfile
+ * =============================================================================
+ */
+export const foafProfileSchema: Schema = {
+  type: "Schema",
+  shapes: [
+    {
+      id: "https://example.com/FoafProfile",
+      type: "ShapeDecl",
+      shapeExpr: {
+        type: "Shape",
+        expression: {
+          type: "EachOf",
+          expressions: [
+            {
+              type: "TripleConstraint",
+              predicate: "http://www.w3.org/1999/02/22-rdf-syntax-ns#type",
+              valueExpr: {
+                type: "NodeConstraint",
+                values: ["http://xmlns.com/foaf/0.1/Person"],
+              },
+              annotations: [
+                {
+                  type: "Annotation",
+                  predicate: "http://www.w3.org/2000/01/rdf-schema#comment",
+                  object: {
+                    value: "Defines the node as a Person (from foaf)",
+                  },
+                },
+              ],
+            },
+            {
+              type: "TripleConstraint",
+              predicate: "http://xmlns.com/foaf/0.1/name",
+              valueExpr: {
+                type: "NodeConstraint",
+                datatype: "http://www.w3.org/2001/XMLSchema#string",
+              },
+              min: 0,
+              max: 1,
+              annotations: [
+                {
+                  type: "Annotation",
+                  predicate: "http://www.w3.org/2000/01/rdf-schema#comment",
+                  object: {
+                    value: "Define a person's name.",
+                  },
+                },
+              ],
+            },
+            {
+              type: "TripleConstraint",
+              predicate: "http://xmlns.com/foaf/0.1/img",
+              valueExpr: {
+                type: "NodeConstraint",
+                datatype: "http://www.w3.org/2001/XMLSchema#string",
+              },
+              min: 0,
+              max: 1,
+              annotations: [
+                {
+                  type: "Annotation",
+                  predicate: "http://www.w3.org/2000/01/rdf-schema#comment",
+                  object: {
+                    value: "Photo link but in string form",
+                  },
+                },
+              ],
+            },
+            {
+              type: "TripleConstraint",
+              predicate: "http://xmlns.com/foaf/0.1/knows",
+              valueExpr: "https://example.com/FoafProfile",
+              min: 0,
+              max: -1,
+              annotations: [
+                {
+                  type: "Annotation",
+                  predicate: "http://www.w3.org/2000/01/rdf-schema#comment",
+                  object: {
+                    value:
+                      "A list of WebIds for all the people this user knows.",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        extra: ["http://www.w3.org/1999/02/22-rdf-syntax-ns#type"],
+      },
+    },
+  ],
+};
diff --git a/dev/solid-vue-vite-app/src/_ldo/foafProfile.shapeTypes.ts b/dev/solid-vue-vite-app/src/_ldo/foafProfile.shapeTypes.ts
@@ -0,0 +1,19 @@
+import type { ShapeType } from "@ldo/ldo";
+import { foafProfileSchema } from "./foafProfile.schema";
+import { foafProfileContext } from "./foafProfile.context";
+import type { FoafProfile } from "./foafProfile.typings";
+
+/**
+ * =============================================================================
+ * LDO ShapeTypes foafProfile
+ * =============================================================================
+ */
+
+/**
+ * FoafProfile ShapeType
+ */
+export const FoafProfileShapeType: ShapeType<FoafProfile> = {
+  schema: foafProfileSchema,
+  shape: "https://example.com/FoafProfile",
+  context: foafProfileContext,
+};