A Simple Way to Set Meta Tags Using Vue.js

Applications Web Development
1

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:

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

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:

<head>
 <title>{{title}}</title>
   <meta name="description" :content="desc">
   <meta name="keywords" :content="keywords"> 
   <script src="/neovue/js/neoheadvue.js"></script>
</head?

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).