hal-layout-vue

Vue 3 components for rendering HAL (Hypertext Application Language) resources.

This is the Vue 3 port of hal-layout (React version).

Live Demo

Installation

``bash
npm install hal-layout-vue
`

Quick Start

`vue



`

Components

$3

Root component that fetches a HAL resource and provides context to children.

`vue
uri="/posts/1"
profile="detailed"
view="full"
@load="onLoad"
@error="onError"
>


`

Props:
- uri - Resource URI (required)
- profile - Content profile for content negotiation
- view - View parameter for representation selection

Events:
- @load - Emitted when resource is loaded
- @error - Emitted when an error occurs

Slots:
- default - Content to render when loaded
- fallback - Loading state
- error - Error state (receives { error })

$3

Renders embedded resources from _embedded.

`vue


{{ data.name }}








`

Props:
- rel - Relation name in _embedded (required)

Slot Props:
- data - Resource data (without HAL metadata)
- halData - Full HAL resource
- index - Index in collection
- isCollection - Whether it's a collection
- total - Total count

$3

Renders actionable links from _links.

`vue

Next Page



Delete




Update





{{ loading ? 'Submitting...' : 'Submit' }}


`

Props:
- rel - Relation name in _links (required)
- method - HTTP method (default: 'GET')
- params - URI template parameters
- body - Request body for POST/PUT/PATCH
- as - Element type ('a', 'button', 'span')
- invalidates - Relations to invalidate after action
- refreshParent - Refresh parent after action (default: true)

Events:
- @success - Emitted on successful action
- @error - Emitted on error

Composables

$3

Access hypermedia context within .

`vue

`

$3

Execute actions on HAL links.

`vue



`

URI Templates

Supports RFC 6570 URI templates:

`vue

Search

`

HAL Response Structure

`json
{
"_links": {
"self": { "href": "/posts/1" },
"edit": { "href": "/posts/1" },
"delete": { "href": "/posts/1" }
},
"_embedded": {
"author": {
"_links": { "self": { "href": "/users/1" } },
"name": "John Doe"
}
},
"title": "Hello World",
"body": "This is a post."
}
``

Related

- hal-layout - React version
- HAL Specification
- Ketting - HTTP client for REST APIs

License

MIT