Setup

Clone the repository:

git clone ...
set VUE_APP_ROOT (pwd)/blog-vue
cd {$VUE_APP_ROOT}

Install modules:

pnpm install

Once the API Platform is running, review the API URLs configured in this project:

cp .env .env.local
cat .env.local

Compile and Hot-Reload for Development:

pnpm dev --host

Open browsers and point them to the app (replace the hostname/port here):

cat ~/bin/chrome
#!/usr/bin/env bash
#

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome $@

A pair of instances to see the interactions:

chrome --user-data-dir=/tmp/alpha --no-first-run http://shodan.local:5173 &
chrome --user-data-dir=/tmp/beta --no-first-run http://shodan.local:5173 &

With the development tools check the network tab while visiting the "About" page or any other pages that shows resources; there should be several graphql and mercure?topic=... requests.

If you see CORS errors in the javascript console, review the cors directive in the Caddyfile, it must allow the address and port that pnpm dev --host is using.

See

Check out the docs in the doc folder. These are some things that somebody might find useful:

• GraphQL Subscription Forwarder for urql to use the Mercure Hub. Based on this gist by lukasluecke
• An EventSource to support GraphQL subscriptions but also plain Mercure Hub access from Vue.js. Uses a lot of fine-grained reactivity.