about uscontact

How to set prefix or suffix to title in NuxtJS

Category:
Author: zemna
Date: April 17, 2021
Share this:

Create .env file and add APP_NAME variable

APP_NAME=ZEMNA.NET

Add global environment variable to nuxt.config.js

You can use your custom variable name. I'm using appName for this demo.

export default {
  // Insert this option
  env: {
    appName: process.env.APP_NAME || 'ZEMNA.NET'
  }
}

After set, we can use this variable using process.env.appName.

Set default header in nuxt.config.js

In nuxt.config.js file, You can't access your process.env.appName environment variable.

So we will use process.env.APP_NAME from .env file.

export default {
  head: {
    title: process.env.APP_NAME,
  },
}

Set header in vue file

export default {
  head() {
    return {
      title: 'My article page title' + ' - ' + process.env.appName
    }
  },
}
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu