Nuxt Redmine

Redmine REST API integration for Nuxt

DISCLAIMER: Package is at a very early stage of development and not suited for production. Any suggestions, bug reports and contributions are most welcome.

• ✨  Release Notes

Features

• Redmine REST API resources provided via Nuxt API routes
• Fully typed composables for resource operations

Quick Setup

Redmine

1. You should have access to a running Redmine instace (e.g. https://redmine.mydomain.com)
2. Configure your Redmine instance to allow API tokens authentication (see Redmine documentation)

Nuxt

1. Add nuxt-redmine dependency to your project

# Using pnpm
pnpm add -D nuxt-redmine

# Using yarn
yarn add --dev nuxt-redmine

# Using npm
npm install --save-dev nuxt-redmine

2. Add nuxt-redmine to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-redmine']
})

3. Add your Redmine URL and API token to runtime configuration

export default defineNuxtConfig({
  modules: ['nuxt-redmine'],
  redmine: {
    redmineApiKey: '', // Admin API key is required!
    baseUrl: 'https://redmine.mydomain.com',
    // Optional
    responseFormat: 'json', // Currently the only supported format
    resources: ['issues', 'users'] // Defaults to all available resources
  }
})

Security warning: DO NOT save your API key in nuxt.config.ts file. Use .env instead.

NUXT_REDMINE_API_KEY=myverysecretkey

That's it! Nuxt Redmine will automatically configure Nuxt API routes for Redmine queries, which you can use from composables or direct calls ✨

Usage

Module provides composables for each Redmine REST resource (i.e. /issues). Being just wrappers for built-in $fetch call, they provide typed request and response objects and allow to use internal model types instead of direct usage of request body.

Although composables are recommended for usage, it's also possible to use useFetch or useAsyncData directly, since module generates Nuxt API routes.

<script setup lang="ts">
// Using a registry
const { search } = useRedmineIssues()

// Using composable to perform data fetching
// This way query object will have IDE type completion
const { data } = useAsyncData('issues', () => search({ query: { limit: 5, tracker_id: 2 } }))

// Using direct API call to perform data fetching
const { data } = useFetch('/api/redmine/issues', { query: { limit: 5, tracker_id: 2 } })
</script>

<template>
  <div v-for="issue in data.issues" :key="issue.id">
    {{ issue.subject }}
  </div>
</template>

Testing

Due to the purpose of the module, most of the testing is possible only against a real Redmine instance. Repository provides a Docker image of Redmine with preconfigured web server settings.

License

Published under MIT license