How to display a package.json version in the footer of the site?

Question

I would like to display a version that is declared in the package.json file in the footer of my site

How can I do this?

I found this FAQ explanation in their documentation, but unfortunately I don't know to access it from my component

// svelte.config.js

import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
 
const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

Answer 1

You can use vite.define to do this:

const config = {
  kit: {
    vite: {
      define: {
        VERSION: pkg
      }
    }
  }
};

and in your component:

<script>
  const version = VERSION;
</script>

<span>{version}</span>