{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/313","labels_url":"https://api.github.com/repos/vuejs/Discussion/issues/313/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/Discussion/issues/313/comments","events_url":"https://api.github.com/repos/vuejs/Discussion/issues/313/events","html_url":"https://github.com/vuejs/Discussion/issues/313","id":97354479,"number":313,"title":"Solution: how to load templates dynamically","user":{"login":"swift1","id":1919950,"avatar_url":"https://avatars.githubusercontent.com/u/1919950?v=3","gravatar_id":"","url":"https://api.github.com/users/swift1","html_url":"https://github.com/swift1","followers_url":"https://api.github.com/users/swift1/followers","following_url":"https://api.github.com/users/swift1/following{/other_user}","gists_url":"https://api.github.com/users/swift1/gists{/gist_id}","starred_url":"https://api.github.com/users/swift1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/swift1/subscriptions","organizations_url":"https://api.github.com/users/swift1/orgs","repos_url":"https://api.github.com/users/swift1/repos","events_url":"https://api.github.com/users/swift1/events{/privacy}","received_events_url":"https://api.github.com/users/swift1/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-07-26T22:17:19Z","updated_at":"2015-07-27T09:03:51Z","closed_at":null,"body":"This took me several hours to figure out, so I thought I'd share the solution with you, since this is quite a common question when peoples' applications get large.\r\n\r\nFirst, make sure you include the http resource loader:\r\n`````html\r\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js\"></script>\r\n````\r\n\r\nThen, make a html file and put all your template markup there. For example async-component.html.\r\n\r\n***DO NOT*** wrap the html inside a script tag like this:\r\n````html\r\n<script id=\"someAsyncTemplate\" type=\"text/x-template\"></script>\r\n````\r\n\r\nIn the javascript, (which could be yet another external file with ````<script src=\"some-file.js\"></script>````) write the component exactly as you normally would, but wrap the whole thing inside the following code:\r\n\r\n````javascript\r\nVue.component('async-component', function (resolve, reject) {\r\n\tvue.$http.get('async-component.html', function(data, status, request){\r\n\t\tvar parser = new DOMParser();\r\n\t\tvar doc = parser.parseFromString(data, \"text/html\");\r\n\t\tresolve({\r\n\t\t\ttemplate: doc\r\n\t\t});\r\n\t});\r\n});\r\n````\r\n\r\nso basically, the whole component code must be inside the resolve-callback, like this:\r\n````resolve({ <data, props, mixins, methods, computeds, directives...> })````.\r\n\r\n***Note:***\r\n*a) This code assumes that you have created a reference to Vue called ````vue````, like this:*\r\n````\r\nvar vue = new Vue({\r\n    ...\r\n});\r\n````\r\n*b) In order to prevent weird side-effects with international characters not being rendered correctly when rendering the html from the external file, make sure the html file is saved as \"UTF-8 without BOM\".*"},"comment":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/comments/125135751","html_url":"https://github.com/vuejs/Discussion/issues/313#issuecomment-125135751","issue_url":"https://api.github.com/repos/vuejs/Discussion/issues/313","id":125135751,"user":{"login":"PavelPolyakov","id":839290,"avatar_url":"https://avatars.githubusercontent.com/u/839290?v=3","gravatar_id":"","url":"https://api.github.com/users/PavelPolyakov","html_url":"https://github.com/PavelPolyakov","followers_url":"https://api.github.com/users/PavelPolyakov/followers","following_url":"https://api.github.com/users/PavelPolyakov/following{/other_user}","gists_url":"https://api.github.com/users/PavelPolyakov/gists{/gist_id}","starred_url":"https://api.github.com/users/PavelPolyakov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PavelPolyakov/subscriptions","organizations_url":"https://api.github.com/users/PavelPolyakov/orgs","repos_url":"https://api.github.com/users/PavelPolyakov/repos","events_url":"https://api.github.com/users/PavelPolyakov/events{/privacy}","received_events_url":"https://api.github.com/users/PavelPolyakov/received_events","type":"User","site_admin":false},"created_at":"2015-07-27T09:03:51Z","updated_at":"2015-07-27T09:03:51Z","body":"Good to know, thanks"}}