{"id":3295,"date":"2021-01-17T22:39:10","date_gmt":"2021-01-18T03:39:10","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=3295"},"modified":"2021-01-17T22:39:13","modified_gmt":"2021-01-18T03:39:13","slug":"vue-js-how-to-make-an-identicon-generator","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2021\/01\/17\/vue-js-how-to-make-an-identicon-generator\/","title":{"rendered":"Vue.js: How to make an identicon generator"},"content":{"rendered":"\n

In this article, I will show how to create an identicon generator using Vue.js<\/code> in codepen. First of all, an identicon is a graphical image that is generated by text input. This is useful as a substitute for photo images for site users.<\/p>\n\n\n\n

For example, when I type “Chris Nielsen Code Walk”, the identicon generator creates the image seen here:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The identicon is generated via an external library called “jdenticon”. In codepen, we first need to go to the JS settings and pull in two libraries:<\/p>\n\n\n\n

https:\/\/cdn.rawgit.com\/dmester\/jdenticon\/5bbdf8cb\/dist\/jdenticon.min.js<\/a>
and
https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.6.11\/vue.min.js<\/a><\/p>\n\n\n\n

These can be found by clicking the settings icon next to JS and typing in “jdenticon” or “vue” and selecting one of the CDN results. For example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Starting with the HTML section in codepen, all we need for this Vue.js app is a single div with the id of the app. For example:<\/p>\n\n\n\n

<div id=\"app\"><\/div><\/pre>\n\n\n\n
The rest of the code will be in the JavaScript section. First we need a new Vue constructor:<\/p>\n\n\n\n
new Vue({\n\n});<\/pre>\n\n\n\n
Then we need to tell Vue what div in the HTML to target. This can be done with an el: 'target'<\/code>. For example:<\/p>\n\n\n\n
new Vue({\n  el: '#app',\n\n});<\/pre>\n\n\n\n
In the Vue constructor, we can set up our data object, methods, computed section, and template. For example:<\/p>\n\n\n\n
new Vue({\n  el: '#app',\n  data: { \/\/ key-value pairs\n    textInput: ''\n  },\n  computed: { \/\/ Turn our data into viewable values with these functions\n    identicon: function() {\n      return jdenticon.toSvg(this.textInput, 200);\n    }\n  },\n  methods: { \/\/ Use these functions to change data\n    onInput: function(event) {\n      \/\/ console.log(event.target.value);\n      this.textInput = event.target.value;\n    }\n  },\n  template: `\n    <div>\n      <h3>Identicon Generator<\/h3>\n      <div>\n        Input: \n        <input v-on:input=\"onInput\"\/>\n        <!-- The above line is a vue \"directive\" -->\n        <!-- v-on = event handler -->\n        <!-- The event is input -->\n        <!-- onInput is the vue method that is called -->\n      <\/div>\n\n      <div>\n        Output: \n        <!-- {{ identicon }} -->\n        <div v-html=\"identicon\"><\/div>\n      <\/div>\n    <\/div>\n  `\n});<\/pre>\n\n\n\n
The complete app can be seen in my codepen:<\/p>\n\n\n
\nSee the Pen Vue Identicon Generator by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
In this article, I will show how to create an identicon generator using Vue.js in codepen. First of all, an identicon is a graphical image that is generated by text input. This is useful as a substitute for photo images for site users. For example, when I type “Chris Nielsen Code Walk”, the identicon generator … Continue reading Vue.js: How to make an identicon generator<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,221],"tags":[45,61],"class_list":["post-3295","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-vue-js","tag-javascript","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=3295"}],"version-history":[{"count":11,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3295\/revisions"}],"predecessor-version":[{"id":3380,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3295\/revisions\/3380"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=3295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=3295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=3295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}