use version property in vue which defined from package.json file

[honwhy]

since wxt dev/build can use version from package.json define property version, can we use this version property in such as extension options page,
suppose something like this

<template>
<div>my project {{import.meta.env.VERSION}}</div>
</template>

check this #version
and this vite meta env

[honwhy]

I managed to figure out one solution,

// wxt.config.ts
import * as pack from './package.json'
export default defineConfig({
...
  vite: () => ({
    define: {
      __APP_VERSION__: JSON.stringify(pack.version),
    },
  })
})

use in

<script setup lang="ts">
const appVersion = ref(__APP_VERSION__)
</script>

maybe define global variable for tsconfig.json

declare global {
  const __APP_VERSION__: string
}

[aklinker1]

Yup! Alternatively: browser.runtime.getManifest().version

[honwhy]

good