npm package: @hdevplus/connector-nuxt3
Description: H:Dev+ Connector for Nuxt 3
Latest version: 0.1.13

# H:Dev+ Connector for Nuxt 3

[![npm version](https://img.shields.io/npm/v/@hdevplus/connector-nuxt3/latest.svg?style=flat&colorA=020420&colorB=00DC82)](https://npmjs.com/package/@hdevplus/connector-nuxt3)
[![npm downloads](https://img.shields.io/npm/dm/@hdevplus/connector-nuxt3.svg?style=flat&colorA=020420&colorB=00DC82)](https://npm.chart.dev/@hdevplus/connector-nuxt3)
[![License](https://img.shields.io/npm/l/@hdevplus/connector-nuxt3.svg?style=flat&colorA=020420&colorB=00DC82)](https://npmjs.com/package/@hdevplus/connector-nuxt3)
[![Nuxt](https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js)](https://nuxt.com)

Nuxt 3 plugin to connect your frontend with the [H:Dev+](https://www.hdevplus.com) backend.  
This connector simplifies communication using declarative data definitions and secure token-based access.

- [✨ &nbsp;Release Notes](/CHANGELOG.md)

## 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:

```bash
npm install @hdevplus/connector-nuxt3
```

Add it to your nuxt.config.ts:

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

Use it in your app:

```aiignore
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:

```env
# 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

<details>
  <summary>Local development</summary>

  ```bash
  # 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
  ```

</details>


<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82

[npm-version-href]: https://npmjs.com/package/my-module

[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82

[npm-downloads-href]: https://npm.chart.dev/my-module

[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82

[license-href]: https://npmjs.com/package/my-module

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js

[nuxt-href]: https://nuxt.com