After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet
<title><%= htmlWebpackPlugin.options.title %></title>Can you guide me on how to change and customize the htmlWebpackPlugin.options.title in a vue cli 3 project?
After noticing the high interest in this question, I made the decision to provide a comprehensive answer with references to enhance its authenticity and thoroughness. Additionally, I have written an article on this subject and covered it in both this and this courses.
Although the question specifically focuses on setting htmlWebpackPlugin.options.title, the ultimate result is changing the title of the web-page.
The most straightforward approach is to directly modify the public/index.html file and manually input the desired 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 snippet shows the default public/index.html generated by vue cli. All you need to do is change
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
to
<title>Title of your choice</title>
name Field in package.jsonAnother quick fix is to alter the
"name": "your-project-name"name field in package.json. More information on this can be found here. Essentially, the package.json must contain a lowercase single-word name, which may include hyphens and underscores.
pages Field in vue.config.jsAdd a vue.config.js file in the root directory - where your package.json resides - to provide additional configurations to Vue CLI. According to the Vue documentation, you can specify the title using the pages field even for single-page apps. Your vue.config.js should look like this:
module.exports = {
pages: {
index: {
entry: 'src/main.js',
title: 'My Title',
},
}
}
Keep in mind that any changes made here won't reflect instantly if the development server is already running. You'll need to stop and restart the server to see the changes applied.
You can use the Webpack chaining feature within your vue.config.js as illustrated below:
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "My Vue App";
return args;
})
}
}
Note that similar to previous solution, a server restart is required for these changes to take effect if the development server is already active.
An alternative approach involves utilizing JavaScript to dynamically adjust the title. This can be achieved within the mounted lifecycle hook of your root component or specific components for individual routes to customize the titles accordingly.
<script>
export default {
data() {
return {
//
};
},
mounted() {
document.title = 'new title'
}
}
</script>
Lastly, you can incorporate Vue Meta to manage all metadata, including the title, for your Vue application. Add Vue Meta to your project and utilize the metaInfo field as shown below to configure metadata for your pages or routes:
{
metaInfo: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'My title'}
]
}
}
The first four solutions entail static methods for modifying the title, meaning real-time adjustments are not possible through these approaches. Furthermore, none of these options support hot reload capabilities. In contrast, the latter two methods involve dynamic title manipulation using JavaScript, allowing runtime modifications.
To start, make sure to create a file named vue.config.js in the root directory of your project.
//vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "My Vue App";
return args;
})
}
}
For more information on customizing webpack options for your Vue app, check out https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
Make sure to update the name attribute within 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 method mentioned above will specifically work if a URL friendly title is used.
There are also alternative ways to achieve this:
.env (or any .env.[mode])
VUE_APP_NAME=Application flexible name
This is how you would reference it in different sections of 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 %>
Fixing a script that has the green approval mark
<script>
export default {
data() {
return {
//
};
}
mounted() {
document.title = 'updated title'
}
}
</script>
When utilizing the vue-pwa plugin, remember that the name attribute is configured in the site.webmanifest file.
I set the value of htmlWebpackPlugin.options.title to 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcb5b3b2b5bfb3b2af9ce9f2e9f2ee">[email protected]</a>/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86efe9e8efe5e9e8f5c6b3a8b3a8b4">[email protected]</a>/dist/ionicons/ionicons.js"></script>
</body>
</html>
One straightforward method that I believe is the most effective is to modify the name field within the packer.json file, followed by restarting your application.
package.json excerpt:
{
"name": "my title app",
}
When utilizing vue router, you have the ability to update the document title through the router's index file. By simply adjusting the document.title within the router.beforeEach method, you can customize the title for each of your routes.
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;
}
I stumbled upon an interesting jquery script that allows for a collapsible sub menu within a list. After implementing this code: $('.menu-item-has-children').prepend('<a id="fa-menu" href="#"><i class="fa fa-plus"></i>< ...
While working on front-end development, I decided to use json-server to mimic some API calls. However, I encountered an issue with adding a middleware: { "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "serve": "concurrentl ...
I'm grappling with understanding z-index and positioning, despite reading various questions and articles on the topic. Currently, I'm attempting to incorporate a Jquery Plugin called 'Particleground': https://github.com/jnicol/particle ...
I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...
I have designed a webpage optimized for retina display, but I don't own a monitor with that capability. Is there a simulation tool available to test websites on retina displays? Alternatively, are there non-Apple monitors comparable to Apple's ...
Despite the abundance of questions and resources related to "Javascript: The Good Parts," I am struggling to comprehend a specific sentence in the book. On pages 41-42, the author defines the serial_maker function as follows: var serial_maker = function ( ...
After installing node.js, I found myself at a loss on how to run applications. Despite the lack of instructions, I was determined to test if it was working by executing a script named hello.js: console.log('hello world'); I couldn't help b ...
I'm currently using a React Material UI Autocomplete component, similar to the one in the official documentation. For example, let's consider a list of countries: import * as React from 'react'; import Box from '@mui/material/Box& ...
It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...
One of the components in my project is called flow.component.ts and here is a snippet of the code: var rsi_result: number[]; @Component({ selector: 'flow-home', templateUrl: './flow.component.html', styleUrls: ['./flow.comp ...
I am currently implementing a route that involves downloading Sentinel data. Below is the code snippet for the route: app.get('/downloadSentinel', function (req,res){ var promObj = {}; var data = req.query.data; var Name = req.query.name; namesA ...
I need help with adding a value to an array in the 2nd component when a button in the 1st component is clicked. I am working on Angular 4. How can I achieve this? @Component({ selector: 'app-sibling', template: ` {{message}} <butt ...
Currently, I am in the process of developing a simple toggle feature for a FAQ section. The idea is that when a user clicks on an icon associated with a specific question, only that question's answer should be displayed. Although the function is oper ...
How can I extract a text-only content from a td tag like 'Zubr Polish Lager 6%'? <td width="35%">Amber Storm Scotch Ale 6% <br/>SIZE/LIFE: 330ml <b>CASE</b> <br/>UOS ...
I am currently working on integrating the javascript widget from addtocalendar.com into my website. The code example provided by them is displayed below. Everything functions as expected when I place it on a regular page. However, I am facing an issue wher ...
Is it common to experience a brief delay after setting the innerHTML with xmlhttp.responseText? Approximately 1 second delay occurs after xmlhttp.readyState reaches 4. This issue is observed when using Firefox 3.0.10. ...
My JSP page has a JavaScript function called loadData() that is triggered when the page loads. This function makes an AJAX request to a servlet in order to retrieve data and return the necessary HTML content to display on the page. I am trying to call thi ...
I am struggling with a hover effect on my webpage. I have three visible elements and three hidden elements, and I want each visible element to display only one hidden element when hovered over. However, the issue is that currently, hovering over a visible ...
One aspect of jQuery that I find impressive is its ability to chain methods like .animate() and .css(). This is made possible by utilizing the special variable "this" in the backend code. I am interested in implementing a similar method chaining mechanism ...
For my current project, I am utilizing Material UI and React. Each TextField in the project has a button next to it, and when the button is clicked, I want it to retrieve the value of its corresponding TextField and set that value as the input for another ...