A Simple Way to Set Meta Tags Using Vue.js


 
Thread Tools Search this Thread
Top Forums Web Development A Simple Way to Set Meta Tags Using Vue.js
# 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).
Login or Register to Ask a Question

Previous Thread | Next Thread

8 More Discussions You Might Find Interesting

1. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

2. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

3. Web Development

A simple UNIXtime component in Vue.js

A shout out to Scott who gave me a helping hand to turn a simple sample Vue.js app I wrote yesterday into a Vue.js component: Vue.component("unix-time", { template: `<div class="time">{{unixtime}}</div>`, data() { return { unixtime: "" }; }, methods: { ... (1 Reply)
Discussion started by: Neo
1 Replies

4. Homework & Coursework Questions

Meta charcters

find out lines in a given file consisting of the following pattern BCAA, BCAAA, BCAAAA, BCAAAAA, BCAAAAAA (1 Reply)
Discussion started by: Phaneendra G
1 Replies

5. UNIX for Dummies Questions & Answers

Meta charcters

Find out lines in a given file consisting of the following pattern BCAA, BCAAA, BCAAAA, BCAAAAA, BCAAAAAA (0 Replies)
Discussion started by: Phaneendra G
0 Replies

6. Shell Programming and Scripting

Capture two set of data to same line...simple

I would like to capture output from two commands to a test file on the same line... I want to get a file with all Applications and the Version of it...here are the two commands I use to get the output. To get Application list I use ls -1 /Applications/ |grep .app >>... (3 Replies)
Discussion started by: elbombillo
3 Replies

7. Solaris

What is Meta Database ?

Hi Guys, what is a meta file system ? what is it use for? What is /etc/vfstab? What is the relationship between the "vfstab file and meta file system. (3 Replies)
Discussion started by: tlee
3 Replies

8. Solaris

Meta Devices

I have added a sun storage array from a faiulty server onto a new server and copied the md.conf files etc. I can now access the /dev/md/dsk file systems, but I want to delete some metadevices that do not exist (it still thinks the 0 and 1 (root /var /export) disk are mirrored. How do I do this? (8 Replies)
Discussion started by: ozzmosiz
8 Replies
Login or Register to Ask a Question