nuxt-devtools-opencode

Nuxt DevTools OpenCode

Embed an OpenCode Web instance inside Nuxt DevTools (Nuxt 4), and send selected DOM element context into OpenCode with an in-app picker.

Features

• DevTools tab: Adds an “OpenCode” tab that launches and embeds opencode web.
• Runs in app directory: opencode web is started with cwd = nuxt.options.rootDir.
• Element picker → Clipboard: Press Ctrl+Shift+E, click an element, and the module copies route, selector, and component name to your clipboard.

Quick Setup

• Install the module:

# npm
npm install nuxt-devtools-opencode

# pnpm
pnpm add nuxt-devtools-opencode

# yarn
yarn add nuxt-devtools-opencode

• Add to your nuxt.config.ts:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["nuxt-devtools-opencode"],
  opencodeDevtools: {
    port: 4096,
    hostname: "127.0.0.1",
    // password: 'optional-basic-auth-password',
  },
});

Prereq: opencode must be available on your PATH (install OpenCode).

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release