nuxt / nuxt/modules

[Module Listing Request]: `nuxt-gitlab`

Open
#1,370 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

module-request
Dominant language
TypeScript
Stars
1.1k
Forks
354
Avg merge
10h 18m
Merged PRs (30d)
12

Description

Description

Nuxt GitLab

npm version
npm downloads
License
Nuxt

GitLab integration module for Nuxt.
Provides typed composables and secure server-side APIs to interact with GitLab repositories.


Features

  • 🔐  Secure server-side GitLab token handling
  • 🌿  Fetch Git references (branches & tags)
  • 🧩  Typed composables (useGitlab)
  • 🛡  Zod-based request validation (shared client & server)
  • 🏗  Works with GitLab SaaS and self-hosted GitLab
  • 🧪  Playground for local development

Quick Setup

Install the module in your Nuxt application:

npx nuxt module add nuxt-gitlab

Or using your package manager:

npm install nuxt-gitlab

Add the module to your Nuxt config:

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

Configuration
Environment Variables (Recommended)

⚠️ Never commit real GitLab tokens to your repository.

NUXT_GITLAB_API_URL=https://gitlab.com/api/v4
NUXT_GITLAB_TOKEN=glpat-xxxxxxxxxxxxxxxx

Nuxt Config

export default defineNuxtConfig({
  modules: ['nuxt-gitlab'],

  gitlab: {
    baseUrl: process.env.NUXT_GITLAB_API_URL,
    token: process.env.NUXT_GITLAB_TOKEN,
  },
})

Usage

Fetch Git references (branches or tags)
<script setup lang="ts">
const { getRefs } = useGitlab()

const branches = await getRefs({
  projectId: 5940,
  type: 'branches',
})
</script>

Options

interface GitlabRefsInput {
  projectId: string | number
  type?: 'branches' | 'tags'
}

Fetch repository tree
<script setup lang="ts">
const { getTree } = useGitlab()

const { data: tree } = await useAsyncData(
  'gitlab-tree',
  () =>
    getTree({
      projectId: 5940,
      branch: 'develop',
    }),
)
</script>

Options

interface GitlabTreeInput {
  projectId: string | number
  branch: string
}
Fetch multiple file contens
<script setup lang="ts">
const { getFiles } = useGitlab()

const { data: files } = await useAsyncData(
  'gitlab-files',
  () =>
    getFiles({
      projectId: 5940,
      branch: 'develop',
      paths: [
        'content/1.moon-index.md',
        'content/content/articles',
      ],
    }),
)
</script>

Options

interface GitlabFilePullInput {
  projectId: string | number
  branch: string
  paths: string[]
}

License

MIT

Nuxt Compatibility

Nuxt 4, Nuxt 3

Roadmap

📂 Repository tree API

📄 File content API

🔄 Pagination support

🧪 Extended test coverage

Repository

https://github.com/lukhaiminh/nuxt-gitlab

npm

https://www.npmjs.com/package/nuxt-gitlab

Nuxt Compatibility

Nuxt 4, Nuxt 3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the linked nuxt-gitlab repository and npm package first, checking the listed setup, features, compatibility, and roadmap against the Nuxt modules catalog requirements. Confirm the catalog entry location and determine what metadata or validation is needed for the module to be considered listed.

Written by the indexing model from the issue text.

Assessment

Tech stack
gitlab, nuxtjs, typescript
Domain
api, backend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.