https://github.com/jordanopensource/nuxt-build-banner
A Nuxt 3 module to display build information
https://github.com/jordanopensource/nuxt-build-banner
build environment npm-module npm-package nuxt nuxt-module nuxtjs
Last synced: 13 days ago
JSON representation
A Nuxt 3 module to display build information
- Host: GitHub
- URL: https://github.com/jordanopensource/nuxt-build-banner
- Owner: jordanopensource
- License: apache-2.0
- Created: 2022-11-17T12:37:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-22T01:24:04.000Z (4 months ago)
- Last Synced: 2025-05-09T00:55:17.548Z (13 days ago)
- Topics: build, environment, npm-module, npm-package, nuxt, nuxt-module, nuxtjs
- Language: Vue
- Homepage: https://www.npmjs.com/package/@josango/nuxt3-build-banner
- Size: 644 KB
- Stars: 3
- Watchers: 9
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JOSA Build info banner
This is a Nuxt3 module for our banner that displays the Drone build info that are injected into the build args of the docker image during build time in the pipline.
## Usage
npm install the package
```bash
# using npm
npm i --save-dev @josango/nuxt3-build-banner
# Using pnpm
pnpm add -D @josango/nuxt3-build-banner
```
And Load it into your `nuxt.config.ts` modules:
```js
export default defineNuxtConfig({
...
modules: [
'@josango/nuxt-build-banner',
],
....
})
```
Add the following as environmental variables in `.env`
```env
NUXT_PUBLIC_TARGET_ENV=
NUXT_PUBLIC_BUILD_COMMIT_SHA=
NUXT_PUBLIC_BUILD_NUMBER=
NUXT_PUBLIC_BUILD_LINK=
NUXT_PUBLIC_BUILD_COMMIT_LINK=
NUXT_PUBLIC_BUILD_REPO_LINK=
NUXT_PUBLIC_BUILD_TIMESTAMP=
```
Make sure to pass them in `nuxt.config.ts` as public runtime config
```js
export default defineNuxtConfig({
...
runtimeConfig: {
public: {
targetEnv: "",
buildCommitSha: "",
buildCommitLink: "",
buildNumber: "",
buildLink: "",
buildRepoLink: "",
buildTimestamp: "",
},
},
...
})
```
Last thing load the module inside your default layout page, or where ever you want to display it.
```jsx
```
If you want to display it only when development mode is enabled
```jsx
```
## Development
```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
# Release new version
npm run release
```