It's not clear how to change the page title from the default template

revolter commented 4 years ago

Version

4.2.2

Environment info


Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: Not Found
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.116
    Firefox: 67.0.4
    Safari: 13.0.4
  npmGlobalPackages:
    @vue/cli: 4.2.2

Steps to reproduce

Use this preset:

{
  "useTaobaoRegistry": false,
  "presets": {
    "website-template": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "cssPreprocessor": "node-sass"
    }
  }
}

What is expected?

Maybe find a *webpack* file with a title key for which to change the value?

What is actually happening?

The project is created with an index.html file containing <title><%= htmlWebpackPlugin.options.title %></title>, but with no indication of where is that title property defined.

haoqunjiang commented 4 years ago

It's calculated from the name field in package.json. For multi-page apps, it's the title field in the page options (inside the pages field).

revolter commented 4 years ago

pages field of what object? Or, in what file? router/index.ts?

haoqunjiang commented 4 years ago

It's explained here: https://cli.vuejs.org/config/#pages

igbominadeveloper commented 3 years ago

If you use the vue-pwa plugin, then the name is set within your site.webmanifest file

weiliang903 commented 2 years ago

Holy shit, two years have passed, and now you still can't change the title.

revolter commented 2 years ago

@weiliang903, see if this helps you.

majestiq commented 1 year ago

did we ever figure out how to change the title? Especially for a page that has route params like /product/:id where depending on the id, each page might have a different title?

vtonu commented 1 year ago

All I want is to change my localhost300 title in my browser. Why is this so hard? Seriously vue?

igbominadeveloper commented 1 year ago

While you are figuring this out, can you check vueuse npm package, there should be a hook to change your title.

On 9 Aug 2023, at 20:34, vtonu @.***> wrote:

All I want is to change my localhost300 title in my browser. Why is this so hard? Seriously vue?

— Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-cli/issues/5199#issuecomment-1672029212, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC7PWY5BTSZOYYOKNNNDPX3XUPQ2RANCNFSM4KXTT5WA. You are receiving this because you commented.

alejandroyunes commented 2 months ago

how the hell we remove the name key in package.json from the title

vuejs / vue-cli