A Simple Way to Set Meta Tags Using Vue.js

description, jquery, keywords, meta, meta attributes, title, vue, vue.js, web programming

Thread Tools Search this Thread
# 1  
Old 11-04-2018
A Simple Way to Set Meta Tags Using Vue.js

Did a lot of searching on the net and found a lot of tricky ways and Vue.js libs to set meta tags, but I wanted sometime simpler.

So, given this standard HTML:

  <title>Page Title</title>
  <meta name="description" content="Page Description">
  <meta name="keywords" content="Page Keywords (Now Obsolete)"> 

I originally used jQuery to change these header tags as follows:

$(document).ready(function() {
  $("title").text("Page Title with jQuery");
  $('meta[name="description"]').attr("content","Page Description with jQuery");
  $('meta[name="keywords"]').attr("content", "Page  Keywords (Obsolete) with jQuery");

But then I used Vue.js to do the same.

Here is the HTML:

   <meta name="description" :content="desc">
   <meta name="keywords" :content="keywords"> 
   <script src="/neovue/js/neoheadvue.js"></script>

And the Vue.js code:

var title = new Vue({
  el: "title",
  data: {
    title: "Page Title with Vue.js"
var meta_desc = new Vue({
  el: 'meta[name="description"]',
  data: {
    desc: "Page Description with Vue.js"
var meta_keywords = new Vue({
  el: 'meta[name="keywords"]',
  data: {
    keywords: "My Obsolete Keywords with Vue.js"

So, you can see that Vue.js can be used like jQuery to easily bind to elements in the header of an HTML file using jQuery type selectors.

This is a very simply example but since I could not find this example on the net, I posted it here.

I tried combining multiple elements (el:) in one new Vue() instance but I could not get it to work as expected; so I assume that only one element could be "binded or bound" in a single Vue directive; but will need to confirm this later.

So, after thinking about this, I simplified my Vue.js code to select the <head> element for the Vue instance:

var vm = new Vue({
  el: "head",
  data: {
    title: "Vue.js - The UNIX and Linux Forums",
    desc: "My Vue.js - The UNIX and Linux Forums",
    keywords: "My (Obsolete) Keywords"

I've been slow to learn new Javascript web development frameworks over the years (my bad).

Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Some Thoughts on Vue.js at UNIX.com Neo Web Programming 0 11-18-2018 05:19 AM
Turning jQuery Code into Vue.js Neo Web Programming 19 11-11-2018 10:34 PM
A simple UNIXtime component in Vue.js Neo Web Programming 1 11-07-2018 09:30 PM
Meta charcters Phaneendra G Homework & Coursework Questions 1 11-16-2012 07:56 PM
Meta charcters Phaneendra G UNIX for Dummies Questions & Answers 0 11-16-2012 07:49 PM
Capture two set of data to same line...simple elbombillo Shell Programming and Scripting 3 11-28-2008 10:24 AM
What is Meta Database ? tlee Solaris 3 07-04-2008 09:52 AM
Xclient with xming on MSW to HPUX X11 / VUE 10.20 dlanor HP-UX 1 10-11-2007 01:50 PM
HPUX 10.20 and fx5 which patches for vue dlanor HP-UX 0 10-11-2007 01:33 PM
HP VUE Messaginbg system could not be started inquirer HP-UX 2 12-19-2005 10:41 PM
Meta Devices ozzmosiz Solaris 8 05-17-2005 12:43 AM