Vue: How to change tab title in Chrome

user_1545308 0
Viewed 2157

How do I change the default "Webpack App" tab title in Vue.js? enter image description here

vuejs2 vue.js
4 Answers

In Your public/index.html or other HTML files used as templates by html-webpack-plugin. find title tag and change it

 <title>Page Title</title>

Or you can set the page title dynamically by getting the title from document document.title and change it inside your component like the code below :

<template>
        <div id="app"></div>
</template>
<script>
     export default {
            name: "App",
            mounted() {
                  document.title = "page title";
                      },};
                   
              </script>
user_104718530

You will find <title>Webpack App</title> in index.html in most probably public folder. You can change it

user_98830340

you have at least two options:

document.title = 'Your new name'

or in the index.html-file:

<head>
 <title>Your new name</title>
</head>
user_118691000

We needed to fix this in the webpack config which generated the index.html every time we deployed our Storybook app.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = async ({ config }) => {
  config.plugins.push(
    new HtmlWebpackPlugin({ title: 'Storybook — Company Name' }),
  )

  return config
}
user_13364080
Related