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. Required fields are marked *

Let's connect and create
something awesome together!
2023 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram