{"id":1363,"date":"2023-10-31T22:04:55","date_gmt":"2023-10-31T12:04:55","guid":{"rendered":"https:\/\/moneystock.net\/wp_e\/?p=1363"},"modified":"2023-10-31T22:13:09","modified_gmt":"2023-10-31T12:13:09","slug":"how-to-use-static-config-file-in-vue-js","status":"publish","type":"post","link":"https:\/\/moneystock.net\/wp_e\/2023\/10\/31\/how-to-use-static-config-file-in-vue-js\/","title":{"rendered":"How to use static config file in Vue JS"},"content":{"rendered":"

Why use a static config file in Vue<\/strong><\/p>\n

If the config is inside Vue, the value in the config needs to be defined before the Vue compile. This means it’s not possible to change the config after the Vue site is deployed to a web server. To flexibly update config values, it can be helpful to have a static config file outside of Vue components.<\/p>\n

 <\/p>\n

How to set up a static config file in Vue<\/strong><\/p>\n

1.Create config.json file in the public folder<\/p>\n

\n
{\r\n  \u00a0 \"title\": \"Static Config!\"\r\n}<\/pre>\n<\/div>\n
2. Load config.json file before mounting the Vue app at main.js. The config value can be added to<\/p>\n
\n
app.config.globalProperties.YourVariableName<\/div>\n<\/div>\n
\n
\n
import '.\/assets\/main.css'\r\n\r\nimport { createApp } from 'vue'\r\n\r\nimport App from '.\/App.vue'\r\n\r\nconst app = createApp(App);\r\n\r\nfetch('\/config.json?' + Date.now())\r\n\r\n\u00a0 \u00a0 .then(response => response.json())\r\n\r\n\u00a0 \u00a0 .then(config => {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 app.config.globalProperties.pageTitle = config.title;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 app.mount('#app');\r\n\r\n\u00a0 \u00a0 });<\/pre>\n<\/div>\n<\/div>\n
3. Read YourVariableName globally in Vue templates or scripts.<\/p>\n
\n
<script>\r\n\r\nexport default {\r\n\r\n\u00a0 data() {\r\n\r\n\u00a0 \u00a0 return {\r\n\r\n\u00a0 \u00a0 \u00a0 pageTitle: this.pageTitle,\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 }\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<template>\r\n\r\n\u00a0 <div class=\"greetings\">\r\n\r\n\u00a0 \u00a0 <h2>Config called in template: {{ this.pageTitle }}<\/h2>\r\n\r\n\u00a0 \u00a0 <br>\r\n\r\n\u00a0 \u00a0 <h2>Config called in script: {{ pageTitle }}<\/h2>\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/template><\/pre>\n<\/div>\n
<\/div>\n
Sample Code: rocker8942\/vue-static-config (github.com)<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
Why use a static config file in Vue If the config is inside Vue, the value in the config needs to be defined before the Vue compile. This means it’s not possible to change the config after the Vue site is deployed to a web server. To flexibly update config values, it can be helpful… Continue reading How to use static config file in Vue JS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[666,79],"tags":[],"class_list":["post-1363","post","type-post","status-publish","format-standard","hentry","category-vue","category-web-development","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/comments?post=1363"}],"version-history":[{"count":3,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1363\/revisions"}],"predecessor-version":[{"id":1366,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1363\/revisions\/1366"}],"wp:attachment":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/media?parent=1363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/categories?post=1363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/tags?post=1363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}