---
title: "Hello Grove — Extensión Mango 3.1 Grove"
description: "Una muestra Sprig de Vue 3 + TypeScript para probar el puente Grove."
url: "https://mangoirc.chat/es/extensions/hello-grove"
language: "es"
---

[← Todas las extensiones](https://mangoirc.chat/es/extensions)

Ejemplo para desarrolladores · Sprig

# Hello Grove

por [Mango](https://mango.app/)

Una muestra Sprig de Vue 3 + TypeScript para probar el puente Grove.

Instalar en Mango 3.1 40 KB · Mango 3.1

Versión

0.1.0

Tipo de ejecución

Panel de canal

Grove API

1

Actualizado

2026-07-31

Permisos solicitados

## 3 permisos

- **Leer mensajes del canal**Recibe mensajes del canal donde se está ejecutando la extensión.
- **Enviar mensajes de canal**Puede publicar mensajes atribuidos al canal donde se ejecuta.
- **Mantener datos locales**Almacena datos de extensión en este dispositivo en su propio espacio aislado.

Acceso a la red

## Sin acceso a Internet

Su manifiesto no declara hosts externos. El sandbox de Grove bloquea las solicitudes de red fuera del paquete.

Capturas de pantalla

## Verlo en Mango.

![Captura de pantalla 1 de Hello Grove](https://mangoirc.chat/extensions/assets/hello-grove/screenshots/hello-grove.png)

Interfaz del panel de canal de Hello Grove.

Desde la extensión

## README · Inglés

# Hello Grove — sample Sprig (Vue 3 + TypeScript)

A minimal Grove extension (“Sprig”) for testing Mango’s ` grove-ext:// ` host and the ` window.grove ` bridge. See ` Docs/Design/grove.md ` for the platform design.

## Build

```bash
cd Examples/grove-hello-vue
npm install
npm run build      # → dist/  (index.html + manifest.json + assets/)
npm run package    # → hello-grove.grove, ready to install on iOS or macOS
```

` vite.config.ts ` sets ` base: './' ` so the built asset URLs are relative and resolve under the Sprig’s own origin. ` public/manifest.json ` is copied verbatim into ` dist/ `.

The repository’s source directory is deliberately **not** itself an installable Sprig: its manifest lives under ` public/ ` and its entry imports TypeScript/Vue source. Install the generated ` hello-grove.grove `, or dev-load the built ` dist/ ` directory on macOS.

Node 18 or newer is required by the build toolchain.

## Load into Mango

### iPhone and iPad

1. Put ` hello-grove.grove ` in Files or iCloud Drive.
2. In Mango, open **Grove Extensions** and choose **Install .grove…**.
3. Select the package, then press **Start** beside Hello Grove and approve its requested permissions.

### macOS (development)

1. Run Mango.
2. Open any channel.
3. Click the **puzzle-piece** button at the top-right of the transcript.
4. Choose **Load Unpacked (Dev)…**, then select **` Examples/grove-hello-vue/dist `**.

The Sprig opens in a split-pane bound to that channel.

## What it demonstrates

- Reads ` window.grove.info.id ` (the Sprig identity from the bridge).
- Calls ` window.grove.send(text) ` — posts to the bound channel through the native bridge → ` IRCFeature `’s send path (capability-gated on ` channel.send `).
- Subscribes to ` window.grove.on('message', …) ` — the feed shows this channel’s messages live (capability-gated on ` channel.read `).

## Manifest

```jsonc
{
  "grove": 1,
  "id": "app.mango.grove.hello",
  "capabilities": ["channel.read", "channel.send"],
  "hostPermissions": []   // no network — pure local UI
}
```

Bridge type declarations live in ` src/grove.d.ts ` — keep them in sync with ` Mango/Grove/Host/GroveWebView.swift::facadeSource `.

**manifest.json**app.mango.grove.hello

```
{
  "grove": 1,
  "id": "app.mango.grove.hello",
  "name": "Hello Grove",
  "version": "0.1.0",
  "description": "A Vue 3 + TypeScript sample Sprig for testing the Grove bridge.",
  "author": {
    "name": "Mango",
    "url": "https://mango.app"
  },
  "readme": "README.md",
  "screenshots": [
    {
      "path": "screenshots/hello-grove.png",
      "caption": "Hello Grove's channel-pane interface."
    }
  ],
  "entry": "index.html",
  "presentation": {
    "surfaces": [
      "channelPane"
    ],
    "defaultSurface": "channelPane",
    "defaultSize": {
      "width": 340,
      "height": 460
    }
  },
  "capabilities": [
    "channel.read",
    "channel.send",
    "storage"
  ],
  "hostPermissions": []
}
```