{"id":19122889,"url":"https://github.com/digitalbazaar/bedrock-vue","last_synced_at":"2025-05-05T18:26:39.200Z","repository":{"id":31064142,"uuid":"126761278","full_name":"digitalbazaar/bedrock-vue","owner":"digitalbazaar","description":"Vue frontend framework running on Bedrock","archived":false,"fork":false,"pushed_at":"2024-03-01T15:44:55.000Z","size":92,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-23T13:41:37.303Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digitalbazaar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-26T02:14:28.000Z","updated_at":"2022-03-03T15:32:57.000Z","dependencies_parsed_at":"2024-01-03T17:24:51.471Z","dependency_job_id":"ff40e198-bd9e-4e00-8e51-44ba07d49442","html_url":"https://github.com/digitalbazaar/bedrock-vue","commit_stats":{"total_commits":150,"total_committers":5,"mean_commits":30.0,"dds":"0.32666666666666666","last_synced_commit":"321645566e5d770032d2212135873cd85f3ac322"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalbazaar%2Fbedrock-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalbazaar%2Fbedrock-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalbazaar%2Fbedrock-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalbazaar%2Fbedrock-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitalbazaar","download_url":"https://codeload.github.com/digitalbazaar/bedrock-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252329587,"owners_count":21730644,"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":[],"created_at":"2024-11-09T05:23:25.917Z","updated_at":"2025-05-05T18:26:39.177Z","avatar_url":"https://github.com/digitalbazaar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bedrock-vue\n\n[Vue][] frontend framework running on [Bedrock][].\n\n## Bundling\n\nTODO: This section needs to be updated for Vue 3 changes.\n\nSpecial constants are available to setup the [Vue Global Config][] at bundle\ntime. If unset, the config values are left at their defaults.\n\n- `VUE_DEVTOOLS`: [Vue.config.devtools](https://vuejs.org/v2/api/#devtools)\n- `VUE_PERFORMANCE`: [Vue.config.performance](https://vuejs.org/v2/api/#performance)\n- `VUE_PRODUCTIONTIP`: [Vue.config.productionTip](https://vuejs.org/v2/api/#productionTip)\n\nWhen using the [webpack][] [DefinePlugin][], these can be directly set to a\nJSON truthy value. A [Bedrock][] command line option can also be used:\n\n```sh\nnode app.js --webpack-define VUE_PERFORMANCE=true\n```\n\n## Migration from Vue 2.x to 3.x\n\nSome of the important architectural changes that are new in Vue 3.x include\nthe support for multiple Vue apps and a better conceptual separation of Vue\napps and Vue components.\n\nThese changes mean that there is not a single global application that is\nbuilt into the Vue library; instead, one or more Vue applications need to\nbe created via the Vue 3.x `createApp` API. Many of the changes listed in\nthis migration section are the result of this architectural difference.\n\n### Do not call Vue.use(brVue)\n\nPreviously, users of this library needed register it as a plugin with\nVue. This must no longer be done.\n\n### Call initialize() instead of setRootVue()\n\nThis library will automatically create a root Vue app instance, handling the\ncommon boilerplate found in most Vue Web applications -- similar to how it\npreviously configured the global Vue app for Vue 2.x.\n\nPreviously, users would call `setRootVue()`, passing a function that would\nreturn an instance of the `br-app` Vue component. The `br-app` Vue component\nwas the root Vue component and it doubled as the global root Vue App. Once\n`setRootVue()` returned the `br-app` Vue component, the global root Vue App\nwould be mounted.\n\nNow, users of this library must instead call `initialize` and pass a\n`beforeMount` function in order to cause the root Vue app to mount. The\n`beforeMount` function must return the root Vue component to be rendered in the\nroot Vue app (it may return it as a Promise if asynchronous behavior is\nrequired).\n\nNote that the returned Vue component is no longer an instance (do not call\nthe component as a constructor, which will now fail in Vue 3.x), and it is\nno longer the `br-app` Vue component (or an override of it). This has been made\npossible because the root Vue app and the root Vue component have been\nseparated. This enables this library to create the root Vue app and the\ndeveloper to provide the full root Vue component (customizing it however they\nsee fit).\n\nIf `initialize` is not called, the root Vue app will never be mounted,\nmirroring similar behavior to calling `setRootVue(false)` in the older version.\n\nThe `initialize` function can be called at any time during the life of the\nWeb application (which is different from how `setRootVue` needed to be called\nearly or extra coordination was required to delay bedrock-web's `ready`\npromise). It should, of course, generally still be called early to prevent any\nflash of content or delay for the end user.\n\n### Create your own BrApp (BrApp and other default components removed)\n\nThis library no longer needs to create the root Vue component, since it\ncan create the root Vue app separately. Therefore, users of this library now\nhave more freedom to customize the root Vue component. This also means that\nthe root Vue component they provide must include more elements in its template.\nFor example, if a developer wants router support, they must include the\n`\u003crouter-view /\u003e` element -- and anything else, as there is no default\ntemplate nor is any root Vue component provided by this library. The Vue\ncomponent returned from `beforeMount` is the root Vue component.\n\nSo, in order to recreate the behavior that previous versions of library\nprovided, developers can add a `BrApp.vue` (or use any other name of their\nchoosing) root Vue component like this:\n\n```html\n\u003ctemplate\u003e\n  \u003cbr-root\u003e\n    \u003cbr-header /\u003e\n    \u003crouter-view /\u003e\n    \u003cbr-footer /\u003e\n  \u003c/br-root\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'BrApp'\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n\nThen, it can be imported and returned from `beforeMount`:\n\n```js\nimport {initialize} as brVue from '@bedrock/vue';\nimport BrApp from '../components/BrApp.vue';\n\ninitialize({\n  async beforeMount({app}) {\n    return BrApp;\n  }\n})\n```\n\nNote that any other components like `br-header` and `br-footer` (again,\ndifferent app-specific / library-specific names for these compnoents are\nrecommended now that these are no longer provided by this library) would\nneed to be defined by the developer as well.\n\n### Import and create your router\n\nVue 3.x uses a new router. This router needs to be created via an imported\nfunction now, instead of installing a Vue plugin and then using a constructor.\n\nPreviously:\n\n```js\nimport {setRootVue} from '@bedrock/vue';\nimport VueRouter from 'vue-router';\n\nsetRootVue(async () =\u003e {\n  const router = new VueRouter({\n    mode: 'history',\n    routes: []\n  });\n\n  const BrApp = Vue.component('br-app');\n  return new BrApp({router});\n});\n```\n\nNow:\n\n```js\nimport {initialize, augmentRouter} from '@bedrock/vue';\nimport {createRouter, createWebHistory} from 'vue-router';\nimport MyApp from '../components/MyApp.vue';\n\ninitialize({\n  async beforeMount({app}) {\n    const router = createRouter({\n      history: createWebHistory(),\n      routes: []\n    });\n    // adds common functionality like \"not found\" route\n    // and page title setter\n    augmentRouter({app, router});\n    app.use(router);\n\n    return MyApp;\n  }\n})\n```\n\n## License\n\n[Apache License, Version 2.0](LICENSE) Copyright 2011-2024 Digital Bazaar, Inc.\n\nOther Bedrock libraries are available under a non-commercial license for uses\nsuch as self-study, research, personal projects, or for evaluation purposes.\nSee the\n[Bedrock Non-Commercial License v1.0](https://github.com/digitalbazaar/bedrock/blob/main/LICENSES/LicenseRef-Bedrock-NC-1.0.txt)\nfor details.\n\nCommercial licensing and support are available by contacting\n[Digital Bazaar](https://digitalbazaar.com/) \u003csupport@digitalbazaar.com\u003e.\n\n[Bedrock]: https://github.com/digitalbazaar/bedrock\n[DefinePlugin]: https://webpack.js.org/plugins/define-plugin/\n[Vue Global Config]: https://vuejs.org/v2/api/#Global-Config\n[Vue]: https://vuejs.org/\n[webpack]: https://webpack.js.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalbazaar%2Fbedrock-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitalbazaar%2Fbedrock-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalbazaar%2Fbedrock-vue/lists"}