{"id":13536073,"url":"https://github.com/FranckFreiburger/http-vue-loader","last_synced_at":"2025-04-02T02:32:14.244Z","repository":{"id":37359295,"uuid":"80741549","full_name":"FranckFreiburger/http-vue-loader","owner":"FranckFreiburger","description":"load .vue files from your html/js","archived":true,"fork":false,"pushed_at":"2021-08-05T04:07:27.000Z","size":94,"stargazers_count":1475,"open_issues_count":42,"forks_count":273,"subscribers_count":38,"default_branch":"master","last_synced_at":"2024-05-28T18:36:17.256Z","etag":null,"topics":["http","http-vue-loader","loader","promise","vue","vue-files","vue-loader","vuejs2"],"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/FranckFreiburger.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}},"created_at":"2017-02-02T16:01:15.000Z","updated_at":"2024-05-27T17:43:49.000Z","dependencies_parsed_at":"2022-07-20T12:02:27.014Z","dependency_job_id":null,"html_url":"https://github.com/FranckFreiburger/http-vue-loader","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fhttp-vue-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fhttp-vue-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fhttp-vue-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fhttp-vue-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FranckFreiburger","download_url":"https://codeload.github.com/FranckFreiburger/http-vue-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743877,"owners_count":20826624,"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":["http","http-vue-loader","loader","promise","vue","vue-files","vue-loader","vuejs2"],"created_at":"2024-08-01T09:00:34.413Z","updated_at":"2025-04-02T02:32:13.969Z","avatar_url":"https://github.com/FranckFreiburger.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["Testing","资产管理","Utilities","Asset Management"],"readme":"### :tada: **http-vue-loader** evolved into [**vue3-sfc-loader**](https://github.com/FranckFreiburger/vue3-sfc-loader) that supports Vue2 and Vue3 :tada:\n### (see the [announcement](https://github.com/FranckFreiburger/http-vue-loader/issues/127))\n\n\n\n\n# http-vue-loader\nLoad .vue files directly from your html/js. No node.js environment, no build step.\n\n## examples\n\n`my-component.vue`\n```vue\n\u003ctemplate\u003e\n    \u003cdiv class=\"hello\"\u003eHello {{who}}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nmodule.exports = {\n    data: function() {\n        return {\n            who: 'world'\n        }\n    }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.hello {\n    background-color: #ffe;\n}\n\u003c/style\u003e\n```\n\n`index.html`\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/http-vue-loader\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv id=\"my-app\"\u003e\n      \u003cmy-component\u003e\u003c/my-component\u003e\n    \u003c/div\u003e\n\n    \u003cscript type=\"text/javascript\"\u003e\n      new Vue({\n        el: '#my-app',\n        components: {\n          'my-component': httpVueLoader('my-component.vue')\n        }\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## More examples\nusing `httpVueLoader()`  \n\n```html\n...\n\u003cscript type=\"text/javascript\"\u003e\n\n    new Vue({\n        components: {\n            'my-component': httpVueLoader('my-component.vue')\n        },\n        ...\n```\n\nor, using `httpVueLoader.register()`\n\n```html\n...\n\u003cscript type=\"text/javascript\"\u003e\n\n    httpVueLoader.register(Vue, 'my-component.vue');\n\n    new Vue({\n        components: [\n            'my-component'\n            ]\n        },\n        ...\n```\n\nor, using `httpVueLoader` as a plugin\n\n```html\n...\n\u003cscript type=\"text/javascript\"\u003e\n\n    Vue.use(httpVueLoader);\n\n    new Vue({\n        components: {\n            'my-component': 'url:my-component.vue'\n        },\n        ...\n```\n\nor, using an array\n```\n    new Vue({\n        components: [\n            'url:my-component.vue'\n            ]\n        },\n        ...\n```\n\n## Features\n* `\u003ctemplate\u003e`, `\u003cscript\u003e` and `\u003cstyle\u003e` support the `src` attribute.\n* `\u003cstyle scoped\u003e` is supported.\n* `module.exports` may be a promise.\n* Support of relative urls in `\u003ctemplate\u003e` and `\u003cstyle\u003e` sections.\n* Support custom CSS, HTML and scripting languages, eg. `\u003cscript lang=\"coffee\"\u003e` (see VueLoader.langProcessor).\n\n\n## Browser Support\n\n![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Internet_Explorer_10_logo.svg/48px-Internet_Explorer_10_logo.svg.png) |\n--- | --- | --- | --- | --- | --- |\nLatest ✔ | Latest ✔ | ? | ? | Latest ✔ | 9+ ✔ |\n\n\n## Requirements\n* [Vue.js 2](https://vuejs.org/) ([compiler and runtime](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds))\n* [es6-promise](https://github.com/stefanpenner/es6-promise) (optional, except for IE, Chrome \u003c 33, FireFox \u003c 29, [...](http://caniuse.com/#search=promise) )\n* webserver (optional)...\n\nSince some browsers do not allow XMLHttpRequest to access local files (Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https),\nyou can start a small express server to run this example.\n\nRun the following commands to start a basic web server:\n```\nnpm install express\nnode -e \"require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)\"\n```\n\n## API\n\n##### httpVueLoader(`url`)\n\n`url`: any url to a .vue file\n\n\n##### httpVueLoader.register(`vue`, `url`)\n\n`vue`: a Vue instance  \n`url`: any url to a .vue file\n\n\n##### httpVueLoader.httpRequest(`url`)\n\nThis is the default httpLoader.  \n\nUse axios instead of the default http loader:\n```Javascript\nhttpVueLoader.httpRequest = function(url) {\n    \n    return axios.get(url)\n    .then(function(res) {\n        \n        return res.data;\n    })\n    .catch(function(err) {\n        \n        return Promise.reject(err.status);\n    });\n}\n```\n\n##### httpVueLoader.langProcessor\n\nThis is an object that contains language processors related to the `lang` attribute of the `\u003cscript\u003e` section.  \nThe language is a simple function that accepts a script source as argument and returns a javascript script source.  \n\nExample - CoffeeScript:\n\n```JavaScript\n\u003cscript src=\"http://coffeescript.org/v1/browser-compiler/coffee-script.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"httpVueLoader.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n\nhttpVueLoader.langProcessor.coffee = function(scriptText) {\n\n    return window.CoffeeScript.compile(scriptText, {bare: true});\n}\n\n\u003c/script\u003e\n```\n\nThen, in you `.vue` file:\n\n```CoffeeScript\n...\n\u003cscript lang=\"coffee\"\u003e\n\nmodule.exports =\n    components: {}\n    data: -\u003e\n        {}\n    computed: {}\n    methods: {}\n\n\u003c/script\u003e\n...\n\n```\n\n\nExample - Stylus:\n\n```JavaScript\n\u003cscript src=\"//stylus-lang.com/try/stylus.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"httpVueLoader.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n\nhttpVueLoader.langProcessor.stylus = function(stylusText) {\n\n    return new Promise(function(resolve, reject) {\n        \n        stylus.render(stylusText.trim(), {}, function(err, css) {\n\n            if (err) reject(err);\n            resolve(css);\n        });\n    })\n}\n\n\u003c/script\u003e\n```\n\n```stylus\n...\n\u003cstyle lang=\"stylus\"\u003e\n\n    border-radius()\n        -webkit-border-radius: arguments\n        -moz-border-radius: arguments\n        border-radius: arguments\n\n    form input\n        padding: 5px\n        border: 1px solid\n        border-radius: 5px\n\n\u003c/style\u003e\n...\n```\n\nSass (SCSS) example. Since `sass.compile()` is asynchronous, a promise needs to be returned:\n\n```JavaScript\n\u003cscript src=\"sass.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"httpVueLoader.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    httpVueLoader.langProcessor.scss = function (scssText) {\n        return new Promise(function(resolve, reject) {\n            sass.compile(scssText, function (result) {\n                if ( result.status === 0 )\n                    resolve(result.text)\n                else\n                    reject(result)\n            });\n        });\n    }\n// ....\n```\n\n```scss\n...\n\u003cstyle lang=\"scss\"\u003e\n$font-stack:    Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n\u003c/style\u003e\n```\n\n## How it works\n\n1. http request the vue file\n1. load the vue file in a document fragment\n1. process each section (template, script and style)\n1. return a promise to Vue.js (async components)\n1. then Vue.js compiles and cache the component\n\n\n## Notes\n\nThe aim of http-vue-loader is to quickly test .vue components without any compilation step.  \nHowever, for production, I recommend to use [webpack module bundler](https://webpack.github.io/docs/) with [vue-loader](https://github.com/vuejs/vue-loader), \n[webpack-simple](https://github.com/vuejs-templates/webpack-simple) is a good minimalist webpack config you should look at.  \nBTW, see also [why Vue.js doesn't support templateURL](https://vuejs.org/2015/10/28/why-no-template-url/).  \n\n\n## Caveat\n\nDue to the lack of suitable API in Google Chrome and Internet Explorer, syntax errors in the `\u003cscript\u003e` section are only reported on FireFox.\n\n\n## Credits\n\n[Franck Freiburger](https://www.franck-freiburger.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranckFreiburger%2Fhttp-vue-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFranckFreiburger%2Fhttp-vue-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranckFreiburger%2Fhttp-vue-loader/lists"}