N
Nuxt•6d ago
bnason

Get app version

Is there a good/official way to get the version of the Nuxt app? I suppose this would be pulled from package.json and git. So if I build the app with version v1.0.0 in package.json but the git tag isn't v1.0.0, I'd want the web page to show version "v1.0.0-DEV" or something to indicate it's not an actual release
5 Replies
kapa.ai
kapa.ai•6d ago
Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the version of your Nuxt app, you can use the getNuxtVersion() function provided by Nuxt Kit. This function returns the current Nuxt version. However, it doesn't directly provide the version of your application as specified in your package.json or git tags. Here's how you can use getNuxtVersion(): 
import { getNuxtVersion } from '@nuxt/kit'

const nuxtVersion = getNuxtVersion()
console.log('Nuxt version:', nuxtVersion)
import { getNuxtVersion } from '@nuxt/kit'

const nuxtVersion = getNuxtVersion()
console.log('Nuxt version:', nuxtVersion)
Nuxt Kit Compatibility API provides more details on this function. For getting your application's version as specified in package.json, you would need to implement a custom solution. Nuxt doesn't provide an official way to automatically combine package.json version with git information. To achieve what you're describing (showing "v1.0.0-DEV" if the git tag doesn't match package.json version), you'd need to: 1. Read the version from package.json 2. Get the current git tag (if any) 3. Compare them and generate the appropriate version string This would typically be done as part of your build process, perhaps using a custom plugin or script. You could then expose this information through your Nuxt app's runtime config or as an environment variable. Here's a basic example of how you might set this up in your nuxt.config.ts: 
import webpack from 'webpack'
import { version } from './package.json'
// You'd need to implement getGitTag() yourself
import { getGitTag } from './scripts/git-utils'

export default defineNuxtConfig({
  // ...
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.APP_VERSION': JSON.stringify(
          getGitTag() === `v${version}` ? version : `${version}-DEV`
        )
      })
    ]
  }
})
import webpack from 'webpack'
import { version } from './package.json'
// You'd need to implement getGitTag() yourself
import { getGitTag } from './scripts/git-utils'

export default defineNuxtConfig({
  // ...
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.APP_VERSION': JSON.stringify(
          getGitTag() === `v${version}` ? version : `${version}-DEV`
        )
      })
    ]
  }
})
This approach is based on the webpack plugin example from the Nuxt Configuration documentation. Remember, this is a custom solution and not an official Nuxt feature. You'd need to implement the getGitTag() function and adjust the logic to fit your specific needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@712351223482810390> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
bnason
bnasonOP•6d ago
@kapa.ai Does nuxt save the build date anywhere?
kapa.ai
kapa.ai•6d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, Nuxt does save the build date. This information is stored in the nitro.json file, which is generated during the build process. According to the knowledge source provided, when you run the "nuxt build" command, a nitro.json file is created in the .output folder. This file contains various build-related information, including the build date. Here's an example of what the nitro.json file might look like: 
{
  "date": "2024-04-22T11:47:26.045Z",
  "preset": "nitro-prerender",
  "framework": {
    "name": "nuxt",
    "version": "3.11.2"
  },
  "versions": {
    "nitro": "2.9.6"
  },
  "commands": {
    "preview": "npx serve ./public"
  }
}
{
  "date": "2024-04-22T11:47:26.045Z",
  "preset": "nitro-prerender",
  "framework": {
    "name": "nuxt",
    "version": "3.11.2"
  },
  "versions": {
    "nitro": "2.9.6"
  },
  "commands": {
    "preview": "npx serve ./public"
  }
}
As you can see, the "date" field in this JSON file represents the build date and time in ISO 8601 format. Stack Overflow Post provides this example, which shows the structure of the nitro.json file generated during a Nuxt build process. You can access this information in your application if needed, though you would typically need to implement a custom solution to read and use this data in your Nuxt app. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@712351223482810390> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?