With create-react-app one could use process.env.REACT_APP_VERSION
for this.
Is there an equivalent in Vite?
With create-react-app one could use process.env.REACT_APP_VERSION
for this.
Is there an equivalent in Vite?
If you want to use plugin, see Adarsh's answer
But it's very easy to implement it yourself.
You can use define
in vite.config.js
. Read about it here
vite.config.js
export default {
plugins: [vue()],
define: {
'__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
}
}
component.vue
<template>
<div>{{ version }}</div>
</template>
<script>
export default {
data () {
version: __APP_VERSION__
},
}
</script>
or with <script setup>
<script setup>
const version = __APP_VERSION__
</script>
<template>
<div>{{ version }}</div>
</template>
You should be able to change '__APP_VERSION__'
as long as it doesn't conflict with javascript syntax or other variables.
plugins: [reactRefresh()],
Add a define
to your vite.config.ts
:
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react()],
define: {
APP_VERSION: JSON.stringify(process.env.npm_package_version),
},
});
If you haven't got one already, define a vite-env.d.ts
or env.d.ts
and add a declare
:
declare const APP_VERSION: string;
You'll now be able to use the variable APP_VERSION
anywhere in your code & Vite will substitute it at compile time.
Note: You may need to restart your TS server for the declaration to be picked up by intellisense:
VSCode MacOS: ⌘ + ⇧ + P > Restart TS Server
VSCode Windows: ctrl + ⇧ + P > Restart TS Server
env.d.ts
or vite-env.d.ts
If you don't want to use define
, there is a vite plugin for just this.
https://www.npmjs.com/package/vite-plugin-package-version
// vite.config.js
import loadVersion from 'vite-plugin-package-version';
export default {
plugins: [loadVersion()],
};
Will inject import.meta.env.PACKAGE_VERSION with the version specified in your package.json.
This worked for me:
import { version } from '../../package.json'
Secure Way of Importing Vue version.
Incrementing semantic versions using npm commands