{"id":8707,"date":"2023-09-28T07:38:21","date_gmt":"2023-09-28T07:38:21","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=8707"},"modified":"2023-10-26T11:56:39","modified_gmt":"2023-10-26T11:56:39","slug":"environment-variables-with-vue-js","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/environment-variables-with-vue-js","title":{"rendered":"Using Environment Variables with Vue.js"},"content":{"rendered":"

In Vue.js, you can use environment variables for storing sensitive data or configuration settings<\/strong> that may change between deployments.<\/p>\n

To use environment variables in Vue.js, follow these steps:<\/p>\n

1. Create .env file in your project at root level
\n2. An env file simply contains key=value pairs of environment variables:<\/p>\n

VUE_APP_NOT_SECRET_CODE=some_value\r\n<\/pre>\n
Prefixing<\/strong> your variables with VUE_APP_<\/strong> is necessary to make them available within your Vue.js application.<\/p>\n
Now you can access env variables in your application code:<\/p>\n
console.log(process.env.VUE_APP_NOT_SECRET_CODE)\r\n<\/pre>\n
Example:<\/strong><\/p>\n
<template>\r\n  <div>\r\n    <p>API Base URL: {{ apiBaseUrl }}<\/p>\r\n    <p>API Key: {{ apiKey }}<\/p>\r\n  <\/div>\r\n<\/template>\r\n\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      apiBaseUrl: process.env.VUE_APP_API_BASE_URL,\r\n      apiKey: process.env.VUE_APP_API_KEY,\r\n    };\r\n  },\r\n};\r\n<\/script><\/pre>\n
Note:<\/b> Remember to keep your .env<\/b> files in the root of your project and exclude them from version control (e.g., using .gitignore)<\/b> to avoid accidentally exposing sensitive information<\/b>.<\/p>\n
You can have computed env vars in your vue.config.js<\/b> file. They still need to be prefixed with VUE_APP_<\/b>. This is useful for version info<\/p>\n
process.env.VUE_APP_VERSION = require('.\/package.json').version\r\n\r\n\r\nmodule.exports = {\r\n\/\/ config\r\n}\r\n<\/pre>\n
For More info visit: cli.vuejs.org<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In Vue.js, you can use environment variables for storing sensitive data or configuration settings that may change between deployments. To use environment variables in Vue.js, follow these steps: 1. Create .env file in your project at root level 2. An env file simply contains key=value pairs of environment variables: VUE_APP_NOT_SECRET_CODE=some_value Prefixing your variables with VUE_APP_ […]<\/p>\n","protected":false},"author":1,"featured_media":8913,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-8707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8707"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8707"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8707\/revisions"}],"predecessor-version":[{"id":8708,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8707\/revisions\/8708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8913"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}