How to set prefix or suffix to title in NuxtJS

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
    }
  },
}