Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

469
Vistas
where to find or how to set htmlWebpackPlugin.options.title in project created with vue cli 3?

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?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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

over 4 years ago · Santiago Trujillo Denunciar

0

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 specify th 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 %>
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda