Notice: Function _load_textdomain_just_in_time was called <strong>incorrectly</strong>. Translation loading for the <code>wp-graphql</code> domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the <code>init</code> action or later. Please see <a href="https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called <strong>incorrectly</strong>. Translation loading for the <code>wordpress-seo</code> domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the <code>init</code> action or later. Please see <a href="https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called <strong>incorrectly</strong>. Translation loading for the <code>pods</code> domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the <code>init</code> action or later. Please see <a href="https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6114

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-includes/functions.php:6114) in /var/www/html/wp-includes/rest-api/class-wp-rest-server.php on line 1893
{"id":7,"date":"2019-10-05T09:14:56","date_gmt":"2019-10-05T09:14:56","guid":{"rendered":"http:\/\/site.sifars.com\/blog\/?p=1"},"modified":"2024-03-27T03:53:23","modified_gmt":"2024-03-27T03:53:23","slug":"vuejs-constants","status":"publish","type":"post","link":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/","title":{"rendered":"Vuejs: Constants from back end API"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Hardcoded values make a developer&#8217;s job hectic if these are repeated at several places in the codebase. That is why constants are an indispensable part of an application. It&#8217;s easy and intuitive to keep your application constants in a separate file and import them in other files to use.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.sifars.com\/blog\/wp-content\/uploads\/2019\/10\/Selection_012-300x210-1.png\" alt=\"Vue Js Constants\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted lang:javascript theme:sublime-text mark:1,2-4\">import constants from 'path_to_file\/constants.js'\n\n<\/pre>\n\n\n\n<p>But what when your constants reside on the backend and you need to get them by making an ajax request to the server. how would you make sure that these constants are available before any of your components get rendered? Should we write the received constants object into a file and then export it. It doesn&#8217;t sound like a real solution. Of course, it is not.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Object Prototype<\/h3>\n\n\n\n<p>So let&#8217;s approach it with a real-world solution. First, we need to understand function constructor and its prototype. In javascript, each object created using a function constructor has access to its prototype.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:javascript theme:sublime-text mark:1,2-4\">\/** \n * A function to create other objects. We captialize its name to distinguish \n * it from other normal functions.\n *\/\nfunction Person(firstname) {\n  this.firstname = firstname;\n}\n\n\n\/\/ Add a property to its prototype\nPerson.prototype.printFirstName = function() {\n  console.log(this.firstname);\n}\n\n\/\/ Create two different objects using the function as constructor\nlet person1 = new Person('Munish')\nlet person2 = new Person('John')\n<\/pre>\n\n\n\n<p>Since person1 and person2 are created using a function constructor so it has access to the printFirstName method.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:javascript theme:sublime-text mark:1,2-4\">person1.printFirstName()   \/\/ Munish\nperson2.printFirstName() \/\/ John\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Vue Instance Prototype<\/h3>\n\n\n\n<p>We will use the same concept by fetching our constants object from backend and then putting it into Vue prototype. So that each component in our application has access to this property.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:javascript theme:sublime-text mark:1,2-4\">axios.get('http:\/\/SERVER_ADDRESS\/getConstants')\n.then(function(res) {\n\n  Vue.prototype.$constants = res.body.data;\n  \/\/ Initialize the main instance once you receive the constants from backend\n  new Vue({\n    el: '#app'\n  })\n\n});\n<\/pre>\n\n\n\n<p>Now you can access this constant object in any of your Vue components using the following syntax<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:javascript theme:sublime-text mark:1,2-4\">this.$constants.someConstant\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Note:<\/h3>\n\n\n\n<p>Make sure your getConstants API doesn&#8217;t do any heavy lifting other than returning your constants. Because the front end application will not get bootstrapped until it responds back.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> Hardcoded values make a developer&#8217;s job hectic if these are repeated at several places in the codebase. That is why constants are an indispensable part of an application. It&#8217;s easy and intuitive to keep your application constants in a separate file and import them in other files to use. import constants from &#8216;path_to_file\/constants.js&#8217; But what [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1784,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[2,4],"class_list":["post-7","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vuejs","tag-javascript","tag-vuejs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vuejs: Constants from back end API - Sifars<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vuejs: Constants from back end API - Sifars\" \/>\n<meta property=\"og:description\" content=\"Reading Time: 2 minutes Hardcoded values make a developer&#8217;s job hectic if these are repeated at several places in the codebase. That is why constants are an indispensable part of an application. It&#8217;s easy and intuitive to keep your application constants in a separate file and import them in other files to use. import constants from &#039;path_to_file\/constants.js&#039; But what [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/\" \/>\n<meta property=\"og:site_name\" content=\"Sifars\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sifars.tech\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-05T09:14:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T03:53:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"210\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"sifars\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sifars1\" \/>\n<meta name=\"twitter:site\" content=\"@sifars1\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"sifars\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/\",\"url\":\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/\",\"name\":\"Vuejs: Constants from back end API - Sifars\",\"isPartOf\":{\"@id\":\"https:\/\/srafis.sifars.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png\",\"datePublished\":\"2019-10-05T09:14:56+00:00\",\"dateModified\":\"2024-03-27T03:53:23+00:00\",\"author\":{\"@id\":\"https:\/\/srafis.sifars.com\/#\/schema\/person\/6012251e6ccb25fb1aa2b058e3641da3\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/#primaryimage\",\"url\":\"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png\",\"contentUrl\":\"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png\",\"width\":300,\"height\":210},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/srafis.sifars.com\/#website\",\"url\":\"https:\/\/srafis.sifars.com\/\",\"name\":\"Sifars\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/srafis.sifars.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/srafis.sifars.com\/#\/schema\/person\/6012251e6ccb25fb1aa2b058e3641da3\",\"name\":\"sifars\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/srafis.sifars.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"sifars\"},\"url\":\"https:\/\/srafis.sifars.com\/index.php\/author\/sifars\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vuejs: Constants from back end API - Sifars","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/","og_locale":"en_US","og_type":"article","og_title":"Vuejs: Constants from back end API - Sifars","og_description":"Reading Time: 2 minutes Hardcoded values make a developer&#8217;s job hectic if these are repeated at several places in the codebase. That is why constants are an indispensable part of an application. It&#8217;s easy and intuitive to keep your application constants in a separate file and import them in other files to use. import constants from 'path_to_file\/constants.js' But what [&hellip;]","og_url":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/","og_site_name":"Sifars","article_publisher":"https:\/\/www.facebook.com\/sifars.tech","article_published_time":"2019-10-05T09:14:56+00:00","article_modified_time":"2024-03-27T03:53:23+00:00","og_image":[{"width":300,"height":210,"url":"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png","type":"image\/png"}],"author":"sifars","twitter_card":"summary_large_image","twitter_creator":"@sifars1","twitter_site":"@sifars1","twitter_misc":{"Written by":"sifars","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/","url":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/","name":"Vuejs: Constants from back end API - Sifars","isPartOf":{"@id":"https:\/\/srafis.sifars.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/#primaryimage"},"image":{"@id":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/#primaryimage"},"thumbnailUrl":"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png","datePublished":"2019-10-05T09:14:56+00:00","dateModified":"2024-03-27T03:53:23+00:00","author":{"@id":"https:\/\/srafis.sifars.com\/#\/schema\/person\/6012251e6ccb25fb1aa2b058e3641da3"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/srafis.sifars.com\/index.php\/2019\/10\/05\/vuejs-constants\/#primaryimage","url":"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png","contentUrl":"https:\/\/srafis.sifars.com\/wp-content\/uploads\/2023\/05\/Selection_012-300x210-1.png","width":300,"height":210},{"@type":"WebSite","@id":"https:\/\/srafis.sifars.com\/#website","url":"https:\/\/srafis.sifars.com\/","name":"Sifars","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/srafis.sifars.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/srafis.sifars.com\/#\/schema\/person\/6012251e6ccb25fb1aa2b058e3641da3","name":"sifars","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/srafis.sifars.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"sifars"},"url":"https:\/\/srafis.sifars.com\/index.php\/author\/sifars\/"}]}},"_links":{"self":[{"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":1,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":1821,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions\/1821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/media\/1784"}],"wp:attachment":[{"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/srafis.sifars.com\/index.php\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}