CODEWITHSUNDEEP
vuejs2
Vlad Vladimir Hercules
Vlad Vladimir Hercules

Reputation: 1869

How to change initially generated title after file build in index.html

I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?

Upvotes: 2

Views: 4913

Answers (3)

Daniel Barral
Daniel Barral

Reputation: 4096

Option 1:

Edit your /public/index.html and replace this:

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

with this:

<title>Your Title Here</title>

Option 2:

vue.config.js

module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].title = 'Your Title Here';
            return args;
        });
    }
}

/public/index.html

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

Upvotes: 1

ctc
ctc

Reputation: 3553

I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.

Option 1: set for Multiple Pages mode vue.config.js

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'My Website Title',
    },
  }
}

Option 2: titleMixin (referenced from https://medium.com/@Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)

titleMixin.js added to mixins folder

function getTitle (vm) {
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}
export default {
  created () {
    const title = getTitle(this)
    if (title) {
      document.title = title
    }
  }
}

added to main.js

import titleMixin from './mixins/titleMixin'

Vue.mixin(titleMixin)

Use in Component Pages

<script>
  export default {
    title: 'Foo Page'
  }
</script>

Use in Vue instance with a function

<script>
export default {
  title () {
    return `Foo Page — ${this.someValue}`
  },
  data () {
    return {
      someValue: 'bar'
    }
  }
}
</script>

Upvotes: 1

AndrewShmig
AndrewShmig

Reputation: 4923

As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:

module.exports = {
    baseUrl: '/',
    outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
    indexPath: '../app/Resources/views/index.html.twig',

    // Setting this to false can speed up production builds if you don't need source maps for production.
    productionSourceMap: false,

    // By default, generated static assets contains hashes in their filenames for better caching control.
    // However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
    // generated by Vue CLI, you can disable filename hashing by setting this option to false,
    filenameHashing: false,
    lintOnSave: false,

    // https://cli.vuejs.org/ru/config/#devserver-proxy
    devServer: {},

    // https://cli.vuejs.org/ru/config/#chainwebpack
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = 'Ojok Deep Sales Platform';
                args[0].template = './index.html.template';
                return args;
            })
    }
};

And after you have updated your vue.config.js file, change your index.html template file to be like this:

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="../js/go.js"></script>
    <script type="text/javascript" src="../js/momentjs.js"></script>
    <script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
    <script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>

<body>
<div id="app"></div>
</body>
</html>

Pay attention on what is being included in <title>-tag:

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

After generating new index.html file your title should be set to whatever you have written into args[0].title option.

Hope this helps.

Upvotes: 1

Related Questions