{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/8106","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/8106/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/8106/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/8106/events","html_url":"https://github.com/vuejs/vue/issues/8106","id":318756939,"number":8106,"title":"Dynamic Component Factory","user":{"login":"rhengles","id":8967,"avatar_url":"https://avatars2.githubusercontent.com/u/8967?v=4","gravatar_id":"","url":"https://api.github.com/users/rhengles","html_url":"https://github.com/rhengles","followers_url":"https://api.github.com/users/rhengles/followers","following_url":"https://api.github.com/users/rhengles/following{/other_user}","gists_url":"https://api.github.com/users/rhengles/gists{/gist_id}","starred_url":"https://api.github.com/users/rhengles/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rhengles/subscriptions","organizations_url":"https://api.github.com/users/rhengles/orgs","repos_url":"https://api.github.com/users/rhengles/repos","events_url":"https://api.github.com/users/rhengles/events{/privacy}","received_events_url":"https://api.github.com/users/rhengles/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-04-29T22:47:42Z","updated_at":"2018-04-30T06:15:19Z","closed_at":"2018-04-30T06:15:19Z","author_association":"NONE","body":"### What problem does this feature solve?\r\nI have a problem that, in the architecture of my apps, I want to load all the components of my application asynchronally. But in Vue, to declare a async component, I must define a constructor function for each one, thus I need to have a list of each and every component name that exists in my app, even if it isn't loaded.\r\n\r\nThis is how my first app works, you can see in this file, I have an array called `componentsList`:\r\n\r\nhttps://www.portaldorevendedorraizen.com.br/js/index.js\r\n\r\nI want to have a function, a **Dynamic Component Factory,** that receives the name of a component encountered in a template or render function, and tries to load this component dynamically. This is mostly useful with Async Components, which then tries to load the component definition over the network, and resolve with a component constructor.\r\n\r\nI already have a modified version of Vue with these changes, and I successfully use this technique to build and ship three different web apps. Currently, this dynamic component factory is injected by a mixin into the $options object.\r\n\r\nI want to define the lowest-level interface possible, designed to be implemented by a plugin which can be customized further with more options and provide a high-level interface.\r\n\r\n### What does the proposed API look like?\r\n```javascript\r\nMyPlugin.install = function (Vue, options) {\r\n  Vue.prototype._dynamicComponent = function (id) {\r\n    // if the \"id\" matches some expected pattern,\r\n    // return a component constructor - probably an async constructor.\r\n    // otherwise, return nothing and the normal process continues\r\n  }\r\n}\r\n\r\nVue.use(MyPlugin, { someOption: true })\r\n```\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/385319937","html_url":"https://github.com/vuejs/vue/issues/8106#issuecomment-385319937","issue_url":"https://api.github.com/repos/vuejs/vue/issues/8106","id":385319937,"user":{"login":"posva","id":664177,"avatar_url":"https://avatars0.githubusercontent.com/u/664177?v=4","gravatar_id":"","url":"https://api.github.com/users/posva","html_url":"https://github.com/posva","followers_url":"https://api.github.com/users/posva/followers","following_url":"https://api.github.com/users/posva/following{/other_user}","gists_url":"https://api.github.com/users/posva/gists{/gist_id}","starred_url":"https://api.github.com/users/posva/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/posva/subscriptions","organizations_url":"https://api.github.com/users/posva/orgs","repos_url":"https://api.github.com/users/posva/repos","events_url":"https://api.github.com/users/posva/events{/privacy}","received_events_url":"https://api.github.com/users/posva/received_events","type":"User","site_admin":false},"created_at":"2018-04-30T06:15:19Z","updated_at":"2018-04-30T06:15:19Z","author_association":"MEMBER","body":"Looking at your `componentsList` array, you can perfectly create a function that loads an array of components with names decided at runtime using webpack's `import()` (and probably others too).\r\nVue can handle promises that return component descriptors as per https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components\r\nIf you prefer that factory API, feel free to create a plugin that leverages Vue's async api and release it as a plugin 🙂 \r\nClosing as this is more of a question.\r\nBTW you can (and should) use the official forum and the discord server for questions"}}
{"actor":{"display_login":"posva"}}