{"id":15024806,"url":"https://github.com/edgardleal/require-vuejs","last_synced_at":"2025-04-07T09:19:26.576Z","repository":{"id":57354333,"uuid":"84136445","full_name":"edgardleal/require-vuejs","owner":"edgardleal","description":"RequireJS plugin to async and dynamic load and parse .vue components ","archived":false,"fork":false,"pushed_at":"2023-04-03T16:39:38.000Z","size":485,"stargazers_count":149,"open_issues_count":13,"forks_count":30,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-31T06:06:11.397Z","etag":null,"topics":["amd","async","dynamic","javascript","require","requirejs","requirejs-plugin","vue","vue-components","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://edgardleal.github.io/require-vuejs/","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/edgardleal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-07T00:47:47.000Z","updated_at":"2024-05-07T18:18:15.000Z","dependencies_parsed_at":"2024-01-02T23:49:59.126Z","dependency_job_id":null,"html_url":"https://github.com/edgardleal/require-vuejs","commit_stats":{"total_commits":86,"total_committers":10,"mean_commits":8.6,"dds":"0.33720930232558144","last_synced_commit":"edbb055e05477e1fc97f875bd175d5c95ce1097a"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgardleal%2Frequire-vuejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgardleal%2Frequire-vuejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgardleal%2Frequire-vuejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgardleal%2Frequire-vuejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edgardleal","download_url":"https://codeload.github.com/edgardleal/require-vuejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247622983,"owners_count":20968575,"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":["amd","async","dynamic","javascript","require","requirejs","requirejs-plugin","vue","vue-components","vuejs","vuejs2"],"created_at":"2024-09-24T20:00:59.998Z","updated_at":"2025-04-07T09:19:26.550Z","avatar_url":"https://github.com/edgardleal.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","积分","Components \u0026 Libraries","Integrations","Integrations [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","付款","Integrations","Payment"],"readme":"# require-vuejs\n\u003e RequireJS plugin to async and dynamic load and parse .vue single file components \n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/e431a6e1ba314ba7a4b3debfc9643503)](https://www.codacy.com/app/edgardleal/require-vuejs?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=edgardleal/require-vuejs\u0026utm_campaign=badger)\n[![Build Status](https://travis-ci.org/edgardleal/require-vuejs.svg?branch=master)](https://travis-ci.org/edgardleal/require-vuejs)\n[![codecov](https://codecov.io/gh/edgardleal/require-vuejs/branch/master/graph/badge.svg)](https://codecov.io/gh/edgardleal/require-vuejs)\n[![Code Climate](https://codeclimate.com/github/edgardleal/require-vuejs/badges/gpa.svg)](https://codeclimate.com/github/edgardleal/require-vuejs)\n\n[![NPM](https://nodei.co/npm/require-vuejs.png)](https://nodei.co/npm/require-vuejs/)\n\nThis library has only 4Kb ( minified ).\n\n## What this library can do\n\n* Real time integration \n* Don't need build to use\n* Used as RequireJS plugin \n* You can use syntax detection from your IDE\n* Suport for [single file component](https://vuejs.org/v2/guide/single-file-components.html)\n* Work with or without extension\n* Support .html and .vue files \n* CSS inside component file\n\n## What this library can't do\n* Parse Jade and other templates \n* Scoped css \n\n## CDN \nDevelopment ( last version )\n\n\n    https://raw.githack.com/edgardleal/require-vuejs/master/dist/require-vuejs.js\n\n\nFor production usage: ( Fast CDN, long age cache and minified )\n\n    https://raw.githack.com/edgardleal/require-vuejs/master/dist/require-vuejs.min.js\n\n## Installation from [NPM repository](https://www.npmjs.com/package/require-vuejs)\n\n`npm install require-vuejs`\n\n\n## Usage \n\nThis example on [Codepen](http://codepen.io/edgardleal/pen/XMaeNP/)\n\n### File structure\n\n    app.js\n    component.vue\n    index.html\n\n### Source code example\n\nindex.html\n\n```html\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n        \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n            \u003ctitle\u003eRequire Vue\u003c/title\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n            \u003cdiv id=\"app\"\u003e\n                \u003cmy-component\u003e\u003c/my-component\u003e\n        \u003c/div\u003e\n            \u003cscript data-main=\"app\" src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js\" \u003e\u003c/script\u003e\n        \u003c/body\u003e\n    \u003c/html\u003e\n```\n---\n\nCreate your component:  ( component.vue )\n```html\n    \u003ctemplate\u003e\n      \u003cdiv\u003e\n          {{text}}\n      \u003c/div\u003e\n    \n    \u003c/template\u003e\n    \n    \u003cscript\u003e\n      define([\"Vue\"], function(Vue) {\n          Vue.component(\"my-component\", {\n              template: template, // the variable template will be injected \n              data: function() {\n                  return {\"text\": \"Ok\"};\n              }\n          });\n        });\n    \u003c/script\u003e\n```\n---\n\nCreate your app code: ( app.js )\n```js\n    requirejs.config({\n        paths: {\n            \"Vue\": \"https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min\",\n            \"vue\": \"https://rawgit.com/edgardleal/require-vue/master/dist/require-vuejs\"\n        },\n        shim: {\n            \"Vue\": {\"exports\": \"Vue\"}\n        }\n    });\n    \n\t// to use component in your code with RequireJS: \n\t// put a reference to your component file with or without extencion after 'vue!' \n    require([\"Vue\", \"vue!component\"], function(Vue){\n        var app = new Vue({\n            el: \"#app\"\n        });\n    });\n```\n\n## Optimize ( r.js )\n\nCreate a build file to `r.js`. In this example we are using a file named `build.js`:\n\n```js\n    ({\n        baseUrl: \".\",\n        paths: {\n            \"Vue\": \"https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue\",\n            \"vue\": \"require-vuejs\" // full path to require-vuejs library file \n        },\n        name: \"app\",\n        out: \"main-built.js\"\n    })\n```\n\nAfter create the file `build.js` with your build configuration execute this command: \n\n```bash\n    r.js -o build.js\n```\n\n## Contributing\n\n[CONTRIBUTING](https://github.com/edgardleal/require-vuejs/blob/master/CONTRIBUTING.md)\n\n## License  \n\n[MIT](https://github.com/edgardleal/require-vuejs/blob/master/LICENSE)\n\n## Code of Conduct  \n\n[https://js.foundation/conduct/](https://js.foundation/conduct/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgardleal%2Frequire-vuejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedgardleal%2Frequire-vuejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgardleal%2Frequire-vuejs/lists"}