110

I wanted to set title to my webpage created with vue cli 3 and thus looked into public/index.html. There, I found <title><%= htmlWebpackPlugin.options.title %></title>.

How do I set and modify htmlWebpackPlugin.options.title in vue cli 3 project?

1
  • 1
    That'd be configurable via pages.
    – Yom T.
    May 26, 2020 at 15:26

8 Answers 8

190

Looking at the popularity of the question, I decided to add an elaborate answer with references to make it more authentic and complete. I have also created an article on this topic and covered this topic in this and this courses.

Though the question is looking for setting htmlWebpackPlugin.options.title, the ultimate effect is changing the title of the web-page.

1. Most convenient and trivial solution

The simplest way to do this is to modify the public/index.html and hard-code the title.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

This is the default public/index.html that is generated by vue cli. And in this, you just need to change

    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>

to

<title>Title of your choice</title>

2. Change the name field in package.json

Another simple solution is to change the "name": "your-project-name". However, there are many restrictions on the name you can use in package.json. You can read more about this here. Basically, package.json must contain a name and that must be lowercase and one word, and may contain hyphens and underscores.

3. Using pages field in vue.config.js

vue.config.js is an optional file that you can add to provide additional configurations to Vue CLI and this file, if present, will be automatically loaded by Vue CLI. You need to create vue.config.js in the root folder - the folder containing you package.json file.

According to Vue documentation, you can use pages field to define entrypoint for multi-page app. However, you can also use this to define title for single page app as well. Create vue.config.js in the root directory and add pages field to your exports as follows:

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      title: 'My Title',
    },
  }
}

Note that if you are already running development server, this change will be reflected only when you stop and restart the development server. In other words, these changes will not be hot reloaded.

4. Chaining Webpack

You can chain Webpack in vue.config.js as shown below

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

Note that similar to solution 3, this change will be reflected only when you stop and restart the development server, in case you are already running development server. In other words, these changes will not be hot reloaded.

5. Modify title in lifecycle hooks using JavaScript

The next solution in the list is to use JavaScript to modify the title. You can do this either in mounted lifecycle hook of your root component or if you want different title for different routes, you can do the same for components loaded by each route.

<script>
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
</script>

6. Use Vue Meta

Finally you can use Vue Meta to manage all metadata for your Vue app including title. First you need to add Vue Meta to your project and then use metaInfo field as shown below to configure metadata for your page or route.

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My title'}
    ]
  }
}

Conclusion

The first 4 solutions are static ways of changing your title or in other words you can't change your title at runtime using these ways. Also all of these are not hot reloaded. The last 2 options use JavaScript and can manipulate the title at runtime.

5
  • Vue Meta is awesome, perfect solution for me!
    – cdsaenz
    Sep 27, 2021 at 22:12
  • 1
    For some reason, none of the above solutions seemed to work on my Vue 3 / Vue CLI 4 project. In the end I was able to update the title, as well as the other meta info, using @vueuse/head
    – Ursidours
    Nov 25, 2021 at 23:17
  • Is setting the document.title in mounted() ok for SEO?
    – Andrew
    Nov 20, 2022 at 20:17
  • Unfortunately, not. For SEO you may want your app to render statically or server side. Or at least have meta-tags available without needing to run any JavaScript on client side. Nov 21, 2022 at 10:01
  • I used approach #3 suggested by you. In my case, [vue.config.js] looked a little different. I added the pages collection like this: const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig( { transpileDependencies : true , pages : { index : { entry : "src/main.js" , title : "Identity Verification Client" } } } )
    – Jelgab
    Feb 24 at 0:02
64

create a file vue.config.js at the root

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

3
  • 10
    Above answer works perfectly, just remember to restart your npm or yarn
    – Faziki
    Oct 7, 2020 at 10:30
  • 1
    Why just not add <title></title> tag in index.html? Feb 18, 2021 at 0:40
  • 2
    @jeand'arme it is related SPA logic. On each route changed, title is considered to be changed
    – Can PERK
    May 20, 2021 at 6:59
22

Update the name property in your package.json file

{
  "name": "URL-friendly_app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Update: The above mentioned method will only work if you use a URL friendly title.

There are a couple of other ways to do it

  • From the Vuejs official documentation Pages Configuration, you can use the html plugin configuration to specify the title for different pages
  • Use the environement variables Modes and Environment Variables to hold your app/page title. I personally prefer and use this method.

.env (or any .env.[mode])

VUE_APP_NAME=Application flixible name

And this is how you call it in different places in your app

AnyComponent.vue (as a data property)

TypeScript

appName: string = process.env.VUE_APP_NAME

Javascript

appName: process.env.VUE_APP_NAME

anyHTML.html

<%= process.env.VUE_APP_NAME %>
2
  • 1
    package.json does not support non-url-compatible name Oct 20, 2020 at 10:52
  • That's true. I'm updating the answer to show more options.
    – MAW
    Oct 21, 2020 at 15:53
1

Just correcting one of the scripts with the green check

<script>
export default {
  data() {
    return {
      //
    };
  }
  mounted() {
    document.title = 'new title'
  }
}
</script>
0

If you are using the vue-pwa plugin, the name is set within the site.webmanifest file.

0

I have simply assigned value fo htmlWebpackPlugin.options.title something like this.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title="WebStore" %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  </body>
</html>
0

Simple and I think the best way is to update the name inside the packer.json and you need to restart your app

package.json file:

{
  "name": "my title app",
}
0

If you're using vue router you can do it through the router's index file. In the router.beforeEach method you just have to change the document.title to your routes title.

const DefaultPageTitle = "Default title"

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "home",
        meta: {
            title: "Your Title"
        },
    },
}

const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {
    setPageTitle(to);
    next();
});

function setPageTitle(to: RouteLocationNormalized) {
    const hasMetaTitleString = typeof to.meta.title == 'string';
    if (!hasMetaTitleString) {
        return document.title = DefaultPageTitle;
    }

    return document.title = to.meta.title as string;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.