### Use useBuildInfo Composable in Nuxt Vue Component

Source: https://github.com/phojie/nuxt-build-info/blob/main/README.md

This example demonstrates how to use the `useBuildInfo` composable within a Vue component's `<script setup>` block to access build information like version, commit hash, and more. The retrieved data can then be displayed in the template.

```vue
<script setup lang="ts">
const { version, commit, shortCommit, branch, env, time } = useBuildInfo()
</script>

<template>
  <div>
    <h1>Build Info</h1>
    <p>Version: {{ version }}</p>
    <p>Commit: {{ commit }}</p>
  </div>
</template>
```

--------------------------------

### Module Installation and Configuration

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

How to install the nuxt-build-info module and configure it in your Nuxt project. You can optionally override the version from package.json.

```APIDOC
## Module Installation and Configuration

### Description
Install the module as a dev dependency and register it in your Nuxt configuration. It automatically reads version from `package.json` and git details from the repository.

### Configuration

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-build-info'
  ],
  buildInfo: {
    // Optional: Override version from package.json
    version: '2.0.0-beta.1'
  }
})
```
```

--------------------------------

### Local Development Commands for nuxt-build-info

Source: https://github.com/phojie/nuxt-build-info/blob/main/README.md

This section provides essential bash commands for local development of the nuxt-build-info module. It covers installing dependencies, generating type stubs, running the development server, building the playground, linting, and running tests.

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

--------------------------------

### Install and Configure Nuxt Build Info

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Installs the nuxt-build-info module as a dev dependency and registers it in the Nuxt configuration. It automatically reads version from package.json and git details from the repository, with an option to override the version.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-build-info'
  ],
  buildInfo: {
    // Optional: Override version from package.json
    version: '2.0.0-beta.1',
  }
})
```

--------------------------------

### Environment Detection and Usage in Nuxt Middleware

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Demonstrates how the Nuxt Build Info module automatically detects the deployment environment ('dev', 'preview', 'canary', 'release') and branch information. It shows example usage within Nuxt middleware for conditional navigation based on environment and branch.

```typescript
// Environment detection logic (handled automatically by module)
// Returns: 'dev' | 'preview' | 'canary' | 'release'

// Example usage in middleware
export default defineNuxtRouteMiddleware((to, from) => {
  const { env, branch } = useBuildInfo()

  // Redirect preview environments to login
  if (env === 'preview' && !to.path.startsWith('/auth')) {
    return navigateTo('/auth/login')
  }

  // Show maintenance page for non-main branches in production
  if (env === 'release' && branch !== 'main') {
    return navigateTo('/maintenance')
  }

  // Enable verbose logging in development
  if (env === 'dev') {
    console.log(`[${env}] Navigating from ${from.path} to ${to.path}`)
  }
})

// Example: Feature flag in server API route
export default defineEventHandler((event) => {
  const buildInfo = useAppConfig().buildInfo

  return {
    features: {
      analytics: buildInfo.env === 'release',
      debugging: buildInfo.env === 'dev' || buildInfo.env === 'preview',
      experimental: buildInfo.branch === 'develop',
      canary: buildInfo.env === 'canary'
    },
    meta: {
      version: buildInfo.version,
      commit: buildInfo.shortCommit,
      deployedAt: new Date(buildInfo.time).toISOString()
    }
  }
})
```

--------------------------------

### Install nuxt-build-info Dependency

Source: https://github.com/phojie/nuxt-build-info/blob/main/README.md

This section details how to add the nuxt-build-info module as a development dependency to your Nuxt project using different package managers (pnpm, yarn, npm).

```bash
# Using pnpm
pnpm add -D nuxt-build-info

# Using yarn
yarn add --dev nuxt-build-info

# Using npm
npm install --save-dev nuxt-build-info
```

--------------------------------

### Access buildInfo from App Config in Nuxt Vue Component

Source: https://github.com/phojie/nuxt-build-info/blob/main/README.md

This snippet illustrates how to access the build information, which is made available via Nuxt's app configuration, using the `useAppConfig` composable. The example shows how to stringify and display the entire `buildInfo` object.

```vue
<script setup lang="ts">
const { buildInfo } = useAppConfig()
</script>

<template>
  <div>
    <h1>Build Info</h1>
    <pre>{{ JSON.stringify(buildInfo, null, 2) }}</pre>
  </div>
</template>
```

--------------------------------

### Platform-Specific Environment Variables for Git Info

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Illustrates environment variables automatically detected by the module from various CI/CD platforms like Vercel, Netlify, Cloudflare Pages, and GitHub Actions. Includes a generic fallback for branch information.

```bash
# Vercel Environment Variables (automatically detected)
VERCEL_GIT_COMMIT_REF=main
VERCEL_ENV=production

# Netlify Environment Variables (automatically detected)
CONTEXT=production
BRANCH=main
PULL_REQUEST=false

# Cloudflare Pages Environment Variables (automatically detected)
CF_PAGES_BRANCH=main

# GitHub Actions Environment Variables (automatically detected)
GITHUB_REF=refs/heads/main

# Generic fallback
BRANCH=main
```

--------------------------------

### Displaying Platform-Aware Deployment Information in Nuxt

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Provides a composable function `useDeploymentInfo` that returns computed deployment details, including the detected platform, version, commit URL, branch, environment, and deployment timestamp. It includes helper functions to detect the platform and generate commit URLs.

```typescript
// Example: Display platform-aware deployment info
export function useDeploymentInfo() {
  const buildInfo = useBuildInfo()

  return computed(() => {
    const platform = detectPlatform()

    return {
      platform,
      version: buildInfo.version,
      commit: buildInfo.shortCommit,
      commitUrl: getPlatformCommitUrl(platform, buildInfo.commit),
      branch: buildInfo.branch,
      environment: buildInfo.env,
      deployedAt: new Date(buildInfo.time),
      isPreview: buildInfo.env === 'preview',
      isProduction: buildInfo.env === 'release'
    }
  })
}

function detectPlatform(): string {
  if (process.env.VERCEL) return 'Vercel'
  if (process.env.NETLIFY) return 'Netlify'
  if (process.env.CF_PAGES) return 'Cloudflare Pages'
  if (process.env.GITHUB_ACTIONS) return 'GitHub Actions'
  return 'Unknown'
}

function getPlatformCommitUrl(platform: string, commit: string): string {
  const repo = 'user/repo' // Get from runtime config

  switch (platform) {
    case 'Vercel':
    case 'Netlify':
    case 'GitHub Actions':
      return `https://github.com/${repo}/commit/${commit}`
    default:
      return ''
  }
}
```

--------------------------------

### Access Build Info via App Config

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Allows accessing build information through the global app config object, useful for plugins, middleware, or server routes. It demonstrates conditional feature flagging based on environment or branch. Dependencies include Nuxt's app config system.

```vue
<script setup lang="ts">
const { buildInfo } = useAppConfig()

// Access nested properties
const isMainBranch = buildInfo.branch === 'main'
const buildAge = Date.now() - buildInfo.time

// Conditional feature flags
const showDebugPanel = buildInfo.env !== 'release'
const enableBetaFeatures = buildInfo.branch === 'develop'
</script>

<template>
  <div>
    <h1>Build Information</h1>

    <!-- Display all build info as JSON -->
    <pre>{{ JSON.stringify(buildInfo, null, 2) }}</pre>

    <!-- Conditional rendering based on environment -->
    <div v-if="showDebugPanel" class="debug-panel">
      <p>Debug Mode Active</p>
      <p>Build age: {{ Math.floor(buildAge / 1000 / 60) }} minutes</p>
    </div>

    <!-- Beta features gate -->
    <section v-if="enableBetaFeatures">
      <h2>Beta Features</h2>
      <p>Experimental features enabled for {{ buildInfo.branch }} branch</p>
    </section>
  </div>
</template>
```

--------------------------------

### App Config Access

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Access build information through the global `useAppConfig()` object. This is useful for accessing build info in plugins, middleware, or server routes.

```APIDOC
## App Config Access

### Description
Access build information through the global app config object. Useful for accessing build info in plugins, middleware, or server routes.

### Usage

```vue
<script setup lang="ts">
const { buildInfo } = useAppConfig()

// Access nested properties
const isMainBranch = buildInfo.branch === 'main'
const buildAge = Date.now() - buildInfo.time

// Conditional feature flags
const showDebugPanel = buildInfo.env !== 'release'
const enableBetaFeatures = buildInfo.branch === 'develop'
</script>

<template>
  <div>
    <h1>Build Information</h1>

    <!-- Display all build info as JSON -->
    <pre>{{ JSON.stringify(buildInfo, null, 2) }}</pre>

    <!-- Conditional rendering based on environment -->
    <div v-if="showDebugPanel" class="debug-panel">
      <p>Debug Mode Active</p>
      <p>Build age: {{ Math.floor(buildAge / 1000 / 60) }} minutes</p>
    </div>

    <!-- Beta features gate -->
    <section v-if="enableBetaFeatures">
      <h2>Beta Features</h2>
      <p>Experimental features enabled for {{ buildInfo.branch }} branch</p>
    </section>
  </div>
</template>
```
```

--------------------------------

### useBuildInfo Composable

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Access build information directly within your Vue components using the `useBuildInfo` composable. It returns an object with version, commit hash, branch, environment, and timestamp.

```APIDOC
## useBuildInfo Composable

### Description
Returns the complete build information object containing version, commit hash, branch, environment, and timestamp. This is the primary API for accessing build metadata in components.

### Usage

```vue
<script setup lang="ts">
const { version, commit, shortCommit, branch, env, time } = useBuildInfo()

// Destructure specific fields
const buildTime = new Date(time)
const isProduction = env === 'release'
const commitUrl = `https://github.com/user/repo/commit/${commit}`
</script>

<template>
  <div>
    <h1>Application Info</h1>
    <dl>
      <dt>Version</dt>
      <dd>{{ version }}</dd>

      <dt>Environment</dt>
      <dd>{{ env }}</dd>

      <dt>Commit</dt>
      <dd><a :href="commitUrl">{{ shortCommit }}</a></dd>

      <dt>Branch</dt>
      <dd>{{ branch }}</dd>

      <dt>Build Time</dt>
      <dd>{{ buildTime.toLocaleString() }}</dd>
    </dl>
  </div>
</template>
```
```

--------------------------------

### Configure nuxt-build-info in nuxt.config.ts

Source: https://github.com/phojie/nuxt-build-info/blob/main/README.md

This code snippet shows how to register the 'nuxt-build-info' module in your Nuxt application's configuration file (`nuxt.config.ts`). It also demonstrates how to optionally provide a custom version string.

```javascript
export default defineNuxtConfig({
  modules: [
    'nuxt-build-info'
  ],
  buildInfo: {
    // Optional: Set a custom version instead of package.json version
    version: '1.0.0-custom'
  }
})
```

--------------------------------

### Access Build Information with useBuildInfo Composable

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Provides a composable function to retrieve comprehensive build information, including version, commit hash, branch, environment, and timestamp. This is the primary API for accessing build metadata in Vue components. Dependencies include Nuxt's composable system.

```vue
<script setup lang="ts">
const { version, commit, shortCommit, branch, env, time } = useBuildInfo()

// Destructure specific fields
const buildTime = new Date(time)
const isProduction = env === 'release'
const commitUrl = `https://github.com/user/repo/commit/${commit}`
</script>

<template>
  <div>
    <h1>Application Info</h1>
    <dl>
      <dt>Version</dt>
      <dd>{{ version }}</dd>

      <dt>Environment</dt>
      <dd>{{ env }}</dd>

      <dt>Commit</dt>
      <dd><a :href="commitUrl">{{ shortCommit }}</a></dd>

      <dt>Branch</dt>
      <dd>{{ branch }}</dd>

      <dt>Build Time</dt>
      <dd>{{ buildTime.toLocaleString() }}</dd>
    </dl>
  </div>
</template>
```

--------------------------------

### BuildInfo Type Interface

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

The TypeScript interface defining the structure of the build information data, providing type safety when working with build metadata.

```APIDOC
## BuildInfo Type Interface

### Description
The TypeScript interface defining the structure of build information data. Provides type safety when working with build metadata.

### Interface Definition

```typescript
// Type definition available for import
import type { BuildInfo, Environment } from 'nuxt-build-info'

// BuildInfo interface structure:
interface BuildInfo {
  version: string        // Application version from package.json or config
  time: number          // Unix timestamp in milliseconds
  commit: string        // Full git commit hash (40 characters)
  shortCommit: string   // Abbreviated commit hash (7 characters)
  branch: string        // Git branch name
  env: Environment      // Environment type: 'dev' | 'preview' | 'canary' | 'release'
}

// Usage in composables or plugins
export function useVersionCheck() {
  const buildInfo = useBuildInfo() as BuildInfo

  return {
    isOutdated: (deployedTime: number) => {
      return buildInfo.time < deployedTime
    },
    getVersionString: () => {
      return `v${buildInfo.version} (${buildInfo.shortCommit})`
    },
    isPreProduction: () => {
      return buildInfo.env === 'preview' || buildInfo.env === 'canary'
    }
  }
}
```
```

--------------------------------

### BuildInfo Type Interface Definition

Source: https://context7.com/phojie/nuxt-build-info/llms.txt

Defines the TypeScript interface for build information data, ensuring type safety when working with metadata. It specifies the structure of the BuildInfo and Environment types. This interface is intended for use in composables or plugins.

```typescript
// Type definition available for import
import type { BuildInfo, Environment } from 'nuxt-build-info'

// BuildInfo interface structure:
interface BuildInfo {
  version: string        // Application version from package.json or config
  time: number          // Unix timestamp in milliseconds
  commit: string        // Full git commit hash (40 characters)
  shortCommit: string   // Abbreviated commit hash (7 characters)
  branch: string        // Git branch name
  env: Environment      // Environment type: 'dev' | 'preview' | 'canary' | 'release'
}

// Usage in composables or plugins
export function useVersionCheck() {
  const buildInfo = useBuildInfo() as BuildInfo

  return {
    isOutdated: (deployedTime: number) => {
      return buildInfo.time < deployedTime
    },
    getVersionString: () => {
      return `v${buildInfo.version} (${buildInfo.shortCommit})`
    },
    isPreProduction: () => {
      return buildInfo.env === 'preview' || buildInfo.env === 'canary'
    }
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.