A Simple Way to Set Meta Tags Using Vue.js


Login or Register to Reply

 
Thread Tools Search this Thread
# 1  
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 Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series
Neo
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: ...... Web Development
0
Web Development
Simple Vue.js Component to Redirect to External Web Page Using Vue Router
Neo
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: ...... Web Development
0
Web Development
A simple UNIXtime component in Vue.js
Neo
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: { ...... Web Development
1
Web Development
Capture two set of data to same line...simple
elbombillo
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 >>...... Shell Programming and Scripting
3
Shell Programming and Scripting
UNIX and Linux

Unix (trademarked as the UNIX certification mark) is a very mature family of multitasking, multiuser computer operating systems that evolved from the original AT&T Unix. Unix development starting in the 1970s by legendary Bell Labs programmers Ken Thompson, Dennis Ritchie, and others. Unix was first targeted for the Bell System and AT&T licensed Unix to outside parties. In the 1970s time period, this lead to a variety of for-profit as well as not-for-profit Unix variants.
In the early days, this included the University of California, Berkeley (BSD), Microsoft (Xenix), IBM (AIX), and Sun Microsystems (Solaris). In the early 1990s, AT&T sold their Unix rights to Novell. In 1995 Novell sold their Unix business to the Santa Cruz Operation (SCO). The UNIX trademark was passed to The Open Group, a "neutral" industry consortium. The Open Group promoted the use of the UNIX trademark for certified operating systems that comply with the Single UNIX Specification (SUS). In 2014 Apple's macOS became the Unix version with the largest global install base and macOS remains the largest Unix-user base today.
Linux is a family of open source Unix-like operating systems based on the Linux kernel. The Linux kernel is an operating system kernel first released by Linus Torvalds on 17 September 1991. Linux distributions include the Linux kernel, system software and libraries. Popular free open source Linux distributions include Debian, Fedora, and Ubuntu. Commercial Linux distributions include Red Hat Enterprise Linux and SUSE Linux Enterprise Server. Linux may be freely modified and redistributed. Anyone on the planet may create a Linux distribution for any purpose.
Please enjoy and help our forum community by "showing your work" and posting your code, even when your code is not working as expected. To help others help you, please wrap your code blocks, sample input, sample output, error messages, and other data in CODE tags and wrap your short commands and short data objects in ICODE tags. We were all beginners in the beginning. If you have any questions about how to register or how to post, please contact us in Live Chat. Thank you and enjoy this "forever free" technical support community for UNIX, Linux and computer information technology in general.