Vue Js Add Meta Description Dynamically: Vue.js is a popular front-end JavaScript framework that allows developers to create reactive and dynamic user interfaces. To create an app that updates the page’s meta description tag based on user input, we can use Vue.js’s data binding and DOM manipulation features.
When the user inputs a new description in the input field, Vue.js will automatically update the data property, triggering a re-render of the view and updating the meta description tag in the process.
Overall, creating a Vue.js app that updates the page’s meta description tag based on user input is a straightforward process that leverages Vue.js’s reactive data binding and DOM manipulation capabilities.
How To Change Metadata (description) in Vue.js?
This code is a basic Vue.js app that allows the user to enter a description in an input field, and updates the page’s meta description tag accordingly.
The app listens for changes to the input field using the v-model directive, and updates the meta description tag in the head of the document using JavaScript.
The code uses Vue.js to create a new app instance with a data property for the description, a mounted method to create a new meta tag with the initial description value, and a watch method to update the meta tag whenever the description changes.
Overall, the code is a simple example of how Vue.js can be used to create reactive web applications.
Vue Js add Dynamic meta-tags(Description) | Example
<div id="app">
<label for="description">Enter description:</label>
<input id="description" v-model="description" type="text">
<pre v-if="description">Update Meta Description: {{description}}</pre>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
description: ''
};
},
mounted() {
const meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', this.description);
document.head.appendChild(meta);
},
watch: {
description(newDescription) {
const metaDescription = document.querySelector('meta[name="description"]');
metaDescription.setAttribute('content', newDescription);
}
}
});
app.mount('#app');
</script>
Output of above example
![](https://danatec.vn/wp-content/uploads/2024/07/2-10.webp)