Learn how to create a component to show the App Version and Last Updated At time in a Nuxt app.

Create an App Information Component in Nuxt

Ravgeet Dhillon

Ravgeet Dhillon

Written on Dec 20, 2021 in Development

⏱ 5 min read

Blog banner for Create an App Information Component in Nuxt

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

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 --save 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:

App Information component in a Nuxt app

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.

📫

Loved this post? Join our Newsletter.

We write about React, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development and Technical Content Writing. He is a fan of Jamstack and likes to work with React, Vue, Flutter, Strapi, Node, Laravel and Python. He loves to play outdoor sports and cycles every day.

TAGGED WITH

Got a project or partnership in mind?

Let's Talk

Contact Us ->