A Simple Way to Set Meta Tags Using Vue.js

Tags
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:

Code:
<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:


Code:
$(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:

Code:
<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:

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:

Code:
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