You must have seen multiple apps which show the app’s information like app version and last updated at time in their footers or via a floating action button. In this tutorial, you’ll learn to create a component to show such kind of information in a Nuxt app.

Contents

• Prerequisites
• Reading App Information Files
• Creating an App Information Component
• Conclusion

Prerequisites

For this tutorial, it is assumed that you have already set up a Nuxt app and have a manual or automated way of adding .version and .last-updated-at files to your project.

We build our Nuxt app using Github Actions. In our workflow, we have set up a system that automatically determines the next release version and adds it to the .version file. At the same time, it also creates a .last-updated-at file and adds to it the build date and time.

Reading App Information Files

The first step is to be able to read the contents of .version and .last-updated-at files. The only place this can be done is the nuxt.config.js.

To read the files on the file system, first, you need to install the fs NPM package. To do so, open your terminal, navigate to your project directory and run the following command:

npm install fs

Next, add the following code at the start of the nuxt.config.js file:

import fs from 'fs'

// 1
let appVersion
try {
  appVersion = fs.readFileSync('./.version', 'utf8')
} catch (err) {
  appVersion = 'dev'
}

// 2
let appLastUpdatedAt
try {
  appLastUpdatedAt = fs.readFileSync('./.last-updated-at', 'utf8')
} catch (err) {
  appLastUpdatedAt = new Date()
}

In the above code:

1. You try to read the .version file using the fs.readFileSync method and assign the result to appVersion. In case the .version file doesn’t exist, an error occurs, so appVersion is set to dev.
2. In the same way, you try to read the .last-updated-at file using the fs.readFileSync method and assign the result to appVersion. In case the .last-updated-at file doesn’t exist, an error occurs, so appLastUpdatedAt is set to the current time (new Date()).

Finally, in the export default object of the nuxt.config.js, add the appVersion and appLastUpdatedAt variables to the publicRuntimeConfig object:

export default {
  ...

  // environment variables used by nuxt
  publicRuntimeConfig: {
    appVersion,
    appLastUpdatedAt,
  },
  ...
}

By adding variables to publicRuntimeConfig, you can access them anywhere - both client and server side - in the Nuxt app using $config.appVersion and $config.appLastUpdatedAt.

Creating an App Information Component

Now that your configuration is set, it’s time to create an app information component.

First, create an AppInfo.vue file in the components directory and add the following template code to it:

<template>
  <div>
    Version: <b>{{ $config.appVersion }}</b>
    <br />
    Updated at: <b>{{ $config.appLastUpdatedAt }}</b>
  </div>
</template>

Next, you can import this component in a layout or in a page by adding the following code:

<template>
  <app-info />
</template>

Finally, restart your Nuxt app by running the following command in your terminal:

npm run dev

Open your app in the browser and you’ll get something like this:

We have skipped the styling part as you can style the app information component as per your liking.

Conclusion

That’s it! You have successfully implemented an app information component in your Nuxt app. In the same way, you can add things like Changelog, What’s New, and more to your app by taking the help of publicRuntimeConfig in a Nuxt app.