{"id":21424137,"url":"https://github.com/linhntaim/vue-define","last_synced_at":"2026-05-18T22:04:47.447Z","repository":{"id":36505974,"uuid":"227865047","full_name":"linhntaim/vue-define","owner":"linhntaim","description":"Manage environment variables \u0026 configurations in Vue application.","archived":false,"fork":false,"pushed_at":"2023-03-03T11:20:08.000Z","size":781,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-11T02:33:09.255Z","etag":null,"topics":["application","configuration","configuration-management","definition","dotenv","dotenv-conversion","environment-variables","management","plugin","vue","vue-js","vue-plugin","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linhntaim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-12-13T15:09:00.000Z","updated_at":"2021-04-06T06:23:09.000Z","dependencies_parsed_at":"2023-01-17T02:15:47.733Z","dependency_job_id":"da817336-e77d-4bdb-b805-3d9238d41fb9","html_url":"https://github.com/linhntaim/vue-define","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":"0.16666666666666663","last_synced_commit":"1e5bc84cf4943fb1b58887c6ecee876f91ee7575"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linhntaim%2Fvue-define","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linhntaim%2Fvue-define/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linhntaim%2Fvue-define/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linhntaim%2Fvue-define/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linhntaim","download_url":"https://codeload.github.com/linhntaim/vue-define/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243801676,"owners_count":20350108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["application","configuration","configuration-management","definition","dotenv","dotenv-conversion","environment-variables","management","plugin","vue","vue-js","vue-plugin","vuejs"],"created_at":"2024-11-22T21:19:52.606Z","updated_at":"2026-05-18T22:04:42.403Z","avatar_url":"https://github.com/linhntaim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-define\n\n[![NPM version](https://img.shields.io/npm/v/vue-define.svg?style=flat-square)](https://www.npmjs.com/package/vue-define)\n[![Travis (.org)](https://img.shields.io/travis/linhntaim/vue-define?style=flat-square)](https://travis-ci.org/linhntaim/vue-define)\n[![Coveralls github](https://img.shields.io/coveralls/github/linhntaim/vue-define?style=flat-square)](https://coveralls.io/github/linhntaim/vue-define)\n[![NPM](https://img.shields.io/npm/l/vue-define?style=flat-square)](https://github.com/linhntaim/vue-define/blob/master/LICENSE)\n\nManage environment variables \u0026 configurations in Vue application.\n\nPowered by [dotenv-conversion](https://github.com/linhntaim/dotenv-conversion).\n\n## Install\n\n```bash\nnpm install vue-define\n```\n\n## Usage\n\nCreate Vue application:\n\n```javascript\nimport Vue from 'vue'\nimport VueDefine from 'vue-define'\n\n...\n\n// Without options\nVue.use(VueDefine)\n\n// With options\nVue.use(VueDefine, options)\n\n...\n\nnew Vue({...}).$mount('#app')\n```\n\n**Options**\n\n- **`options`**\n\n  *(optional)* Must be an object.\n  \n  Has attributes of `defines` and `dotenvConversionConfigOptions`.\n\n- **`options.defines`**\n\n  *(optional)* Must be an object.\n  \n  To define some pre-configurations if wanted. \n  \n  Eg: `{APP_TITLE: 'My Website', APP_DESCRIPTION': 'A sample page of mine'}`.\n  \n- **`options.dotenvConversionConfigOptions`**\n\n  *(optional)* Must be an object.\n  \n  To use with features of `dotenv-conversion`.\n  \n  Eg: `{specs: { ... }, override: { ... }, prevents: { ... }}`.\n\n  See [`dotenv-conversion`](https://github.com/linhntaim/dotenv-conversion#features).\n\n## Features\n\n### Get or Set Configuration\n\nExample of .env file in Vue application:\n\n```dotenv\n# .env file\nVUE_APP_TITLE='My Website'\nVUE_APP_DEBUG=true\nVUE_APP_DATA='{\"foo\":\"bar\"}'\n```\n\nThose environment variables above will be automatically set in configuration after creating Vue application with `vue-define`.\n\n#### Used in Vue components\n\n```vue\n// .vue file\n\n\u003ctemplate\u003e\n   ...\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    name: 'MyComponent',\n    created() {\n\n        // **Configuration**\n\n        // Getting\n\n        console.log(this.$defineManager.get('VUE_APP_TITLE')) // (string) 'My Website'\n        console.log(this.$define.VUE_APP_TITLE) // (string) 'My Website'\n\n        console.log(this.$defineManager.get('VUE_APP_DEBUG')) // (boolean) true\n        console.log(this.$define.VUE_APP_DEBUG) // (boolean) true\n\n        console.log(this.$defineManager.get('VUE_APP_DATA')) // (object) {foo: 'bar'}\n        console.log(this.$define.VUE_APP_DATA) // (object) {foo: 'bar'}\n        console.log(this.$defineManager.get('VUE_APP_DEBUG.foo')) // (string) 'bar'\n        console.log(this.$define.VUE_APP_DATA.foo) // (string) 'bar'\n        \n        console.log(this.$defineManager.get('VUE_APP_NOT_SET')) // null\n        console.log(this.$defineManager.get('VUE_APP_NOT_SET', 'default_value')) // (string) 'default_value'\n        console.log(this.$define.VUE_APP_NOT_SET) // undefined\n\n        // Setting\n\n        this.$defineManager.set('VUE_APP_DATA.animals.dog', 'dog')\n        this.$defineManager.set('VUE_APP_DATA.animals.cat', 'cat')\n        console.log(this.$defineManager.get('VUE_APP_DATA.animals')) // (object) {dog: 'dog', cat: 'cat'}\n        console.log(this.$define.VUE_APP_DATA.animals) // (object) {dog: 'dog', cat: 'cat'}\n    \n        this.$define.VUE_APP_DATA.vehices = {\n            car: 'car',\n            bike: 'bike',\n        }\n        console.log(this.$defineManager.get('VUE_APP_DATA.vehicles')) // (object) {car: 'car', bike: 'bike'}\n        console.log(this.$defineManager.get('VUE_APP_DATA.vehicles.car')) // (string) 'car'\n        console.log(this.$defineManager.get('VUE_APP_DATA.vehicles.bike')) // (string) 'bike'\n        \n        this.$defineManager.set('custom.value', 'value')\n        console.log(this.$define.custom) // (object) {value: 'value'}\n\n    }\n}\n\u003c/script\u003e\n```\n\n#### Used in anywhere\n\n```javascript\nimport {Define, DefineManager, getenv} from 'vue-define'\n\n...\n\n// **Environment variables**\n\nconst env = getenv()\n\nconsole.log(env)\n// output:\n// {\n//    VUE_APP_TITLE: 'My Website',\n//    VUE_APP_DEBUG: true,\n//    VUE_APP_DATA: {\n//       foo: 'bar',\n//    },\n// }\n\n// **Configuration**\n\n// Getting\n\nconsole.log(DefineManager.get('VUE_APP_TITLE')) // (string) 'My Website'\nconsole.log(Define.VUE_APP_TITLE) // (string) 'My Website'\n\nconsole.log(DefineManager.get('VUE_APP_DEBUG')) // (boolean) true\nconsole.log(Define.VUE_APP_DEBUG) // (boolean) true\n\nconsole.log(DefineManager.get('VUE_APP_DATA')) // (object) {foo: 'bar'}\nconsole.log(Define.VUE_APP_DATA) // (object) {foo: 'bar'}\nconsole.log(DefineManager.get('VUE_APP_DEBUG.foo')) // (string) 'bar'\nconsole.log(Define.VUE_APP_DATA.foo) // (string) 'bar'\n\nconsole.log(DefineManager.get('VUE_APP_NOT_SET')) // null\nconsole.log(DefineManager.get('VUE_APP_NOT_SET', 'default_value')) // (string) 'default_value'\nconsole.log(Define.VUE_APP_NOT_SET) // undefined\n\n// Setting\n\nDefineManager.set('VUE_APP_DATA.animals.dog', 'dog')\nDefineManager.set('VUE_APP_DATA.animals.cat', 'cat')\nconsole.log(DefineManager.get('VUE_APP_DATA.animals')) // (object) {dog: 'dog', cat: 'cat'}\nconsole.log(Define.VUE_APP_DATA.animals) // (object) {dog: 'dog', cat: 'cat'}\n\nDefine.VUE_APP_DATA.vehices = {\n    car: 'car',\n    bike: 'bike',\n}\nconsole.log(DefineManager.get('VUE_APP_DATA.vehicles')) // (object) {car: 'car', bike: 'bike'}\nconsole.log(DefineManager.get('VUE_APP_DATA.vehicles.car')) // (string) 'car'\nconsole.log(DefineManager.get('VUE_APP_DATA.vehicles.bike')) // (string) 'bike'\n\nDefineManager.set('custom.value', 'value')\nconsole.log(Define.custom) // (object) {value: 'value'}\n```\n\n### Custom Configuration from Files\n\nExample of configuration files:\n\n```javascript\n// config.app.js file\nexport const LOG_ENABLED = true\nexport const LOG_METHOD = 'console'\n```\n\n```javascript\n// config.locale.js file\nexport default {\n    LOCALES: {\n        en: 'English',\n        vi: 'Tiếng Việt',\n    },\n    DEFAULT_LOCALE: 'en',\n    FALLBACK_LOCALE: 'en',\n}\n```\n\n```json\n// config.lang.en.json file\n{\n    \"LANG\": {\n        \"en\": {\n            \"hello\": \"Hello\"\n        }\n    }\n}\n```\n\n```json\n// config.lang.vi.json file\n{\n    \"LANG\": {\n        \"vi\": {\n            \"hello\": \"Xin chào\"\n        }\n    }\n}\n```\n\nLoad from those configuration files above:\n\n```javascript\nimport {Define, DefineManager} from 'vue-define'\n\nDefineManager.import(\n    import('./config.app'),\n    import('./config.locale'),\n    import('./config.lang.en.json'),\n    import('./config.lang.vi.json')\n).then(() =\u003e {\n    console.log(Define.LOG_ENABLED) // (boolean) true\n    console.log(Define.LOG_METHOD) // (string) 'console'\n    console.log(Define.LOCALES) // (object) {en: 'English', vi: 'Tiếng Việt'}\n    console.log(Define.DEFAULT_LOCALE) // (string) 'en'\n    console.log(Define.FALLBACK_LOCALE) // (string) 'en'\n    console.log(Define.LANG) // (object) {en: {hello: 'Hello'}, vi: {hello: 'Xin chào'}\n})\n```\n\n### Custom Configuration from Inline\n\n```javascript\nimport {Define, DefineManager} from 'vue-define'\n\nDefineManager.append({\n    LOG_ENABLED: true,\n    LOG_METHOD: 'console',\n}, {\n    LOCALES: {\n        en: 'English',\n        vi: 'Tiếng Việt',\n    },\n    DEFAULT_LOCALE: 'en',\n    FALLBACK_LOCALE: 'en',\n}, {\n    LANG: {\n        en: {\n            hello: 'Hello',\n        }   \n    }\n}, {\n    LANG: {\n        vi: {\n            hello: 'Xin chào',\n        }   \n    }\n})\n\nconsole.log(Define.LOG_ENABLED) // (boolean) true\nconsole.log(Define.LOG_METHOD) // (string) 'console'\nconsole.log(Define.LOCALES) // (object) {en: 'English', vi: 'Tiếng Việt'}\nconsole.log(Define.DEFAULT_LOCALE) // (string) 'en'\nconsole.log(Define.FALLBACK_LOCALE) // (string) 'en'\nconsole.log(Define.LANG) // (object) {en: {hello: 'Hello'}, vi: {hello: 'Xin chào'}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinhntaim%2Fvue-define","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinhntaim%2Fvue-define","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinhntaim%2Fvue-define/lists"}