H:Dev+ Connector for Nuxt 3

Nuxt 3 plugin to connect your frontend with the H:Dev+ backend.
This connector simplifies communication using declarative data definitions and secure token-based access.

• ✨  Release Notes

Features

• Automatically attaches session_id and api_token from cookies
• Uses $fetch() with Bearer token authentication
• Supports SSR and CSR
• Filters dynamically injected scripts to allow only *.hdevplus.com domains

Quick Setup

Install the module in your Nuxt 3 project:

npm install @hdevplus/connector-nuxt3

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@hdevplus/connector-nuxt3'],
  runtimeConfig: {
    public: {
      connectorUrl: '/api/request'
    }
  }
})

Use it in your app:

const requestData = {
  dataID: 'GET_POST_LIST',
  page: 1
}
const { output } = await useNuxtApp().$connector(requestData)

Environment Variables

To use the H:Dev+ connector, the following environment variables must be set:

# Required for all server-side communication
SECURE_KEY=your-secure-key-here

# Required for API routing from frontend to H:Dev+ backend
NUXT_PUBLIC_API_URL=https://api.hdevplus.com/request.js

SECURE_KEY

This is a required secret key used to authenticate requests when no user token is present.

You can obtain your SECURE_KEY from the System Console at www.hdevplus.com, under System > API Access.

NUXT_PUBLIC_API_URL This should always point to your H:Dev+ API gateway endpoint.

Use a full absolute URL (e.g. https://api.hdevplus.com/request.js) to ensure compatibility with both SSR and CSR environments.

Security Note

This module filters all dynamically injected JavaScript to only allow trusted origins from *.hdevplus.com. If you want to allow other sources, you must manually modify the plugin code or use your own script loading strategy.

Contribution

# 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