├── README.md
├── bower.json
├── demo
    ├── README.md
    ├── app.build.js
    ├── app.dist.html
    ├── bower.json
    ├── index.html
    └── lib
    │   ├── clock.html
    │   ├── component-head.vue
    │   └── main.js
├── package.json
└── requirejs-vue.js


/README.md:
--------------------------------------------------------------------------------
  1 | # requirejs-vue
  2 | 
  3 | ![ECMAScript 5.1](https://img.shields.io/badge/es-5-brightgreen.svg)
  4 | ![Github file size](https://img.shields.io/github/size/vikseriq/requirejs-vue/requirejs-vue.js.svg)
  5 | 
  6 | A Vue.js [Single File Components](https://vuejs.org/v2/guide/single-file-components.html) loader plugin for
  7 | [RequireJS](https://github.com/requirejs/requirejs).
  8 | One-file, browser or server, no additional fats, es5+ compatible, no babels, gluten-free.
  9 | 
 10 | ## Demo on [Plunker](https://plnkr.co/edit/Y2cEa3)
 11 | 
 12 | On browser-side it uses XMLHttpRequest to fetch the .vue files, so you can only fetch files
 13 | that are on the *same domain as the html page*. Most browsers place restrictions on using
 14 | XMLHttpRequest from local file URLs, so use a web server to serve your ```.vue``` files.
 15 | 
 16 | The server-side building with RequireJS Optimizer [r.js](https://github.com/requirejs/r.js) also available and works well.
 17 | 
 18 | Plugin supports `pug` templates. Provide pug parser via module config. Tested with [browser-side pug renderer](https://github.com/vikseriq/browser-pug).
 19 | 
 20 | Since another templating engines or css preprocessors (like [less](https://github.com/guybedford/require-less)/sass)
 21 | not available as maintained AMD modules there are no plans to support them. Feel free to write your own 😉
 22 | 
 23 | ## Install <a name="install"></a>
 24 | 
 25 | ### Via package manager
 26 | 
 27 | To install with [yarn](https://github.com/yarnpkg/yarn)
 28 | 
 29 | ```
 30 | yarn add requirejs-vue
 31 | ```
 32 | 
 33 | Or good ol' ```npm```:
 34 | ```
 35 | npm install --save requirejs-vue
 36 | ```
 37 | 
 38 | And [Bower](http://bower.io/):
 39 | 
 40 | ```
 41 |   bower install requirejs-vue
 42 | ```
 43 | 
 44 | ### Manual download
 45 | 
 46 | Download the [latest version](https://rawgit.com/vikseriq/requirejs-vue/master/requirejs-vue.js).
 47 | 
 48 | ## Usage <a name="usage"></a>
 49 | 
 50 | Setup loader in RequireJS path like this:
 51 | 
 52 |     ...
 53 |         paths: {
 54 |             'Vue': 'path to Vue.js',
 55 |             'vue': 'path to requirejs-vue'
 56 |         },
 57 |         config: {
 58 |             'vue': {
 59 |                 'pug': 'browser-pug',
 60 |                 'css': 'inject'
 61 |                 'templateVar': 'template'
 62 |             }
 63 |         }
 64 |     ...
 65 | 
 66 | 
 67 | Reference Vue file via the ```vue!```.
 68 | For example, to load the `component.vue` file that is in your ```baseUrl``` directory:
 69 | 
 70 |     require(['vue!component'], function (component) {
 71 | 		//
 72 |     });
 73 | 
 74 | You can specify any alias for loader but update paths alias too.
 75 | 
 76 | 
 77 | ### Configuration
 78 | 
 79 | Inside loaded file reference template by `templateVar` variable.
 80 | Stylesheets controlled by `css` configuration value. Currently only global styles supported.
 81 | Content of template will be cleared from whitespaces and comments. Nested `template` tags supported.
 82 | 
 83 | Loader support ```.vue``` and ```.html``` files.
 84 | 
 85 | 
 86 | #### `css`
 87 | `String | Function`, default: `inject`
 88 | 
 89 | Strategy to deal with component stylesheets. Variants:
 90 | 	* `inject` - appending styles in new `<style>` tag to `document.body`
 91 | 	* `skip` - do not process component css. Default action for r.js build mode.
 92 | 	* `fn(style, option{name})` - callback function for css aggregation. `style` contains actual component
 93 | 		style content, `option.name` hold component file reference
 94 | 
 95 | 
 96 | #### `pug`
 97 | `String`, default: `<none>`
 98 | 
 99 | Module name for Pug template rendering.
100 | 
101 | 
102 | #### `templateVar`
103 | `String`, default: `template`
104 | 
105 | Represent component template as `templateVar` variable in script closure.
106 | 
107 | 
108 | ### Basic usage
109 | Sample .vue file supported by loader:
110 | 
111 | ```vue
112 | <template>
113 |     <div v-cloak>Vue-demo component root</div>
114 | </template>
115 | <style>
116 |     /* global styles */
117 |     [v-cloak] {
118 |         display: none;
119 |     }
120 | </style>
121 | <script>
122 | define(['Vue'], function(vue){
123 |   Vue.component('vue-demo', {
124 |     template: template
125 |   })
126 | });
127 | </script>
128 | ```
129 | 
130 | ### Pug templates
131 | 
132 | Using [browser-pug](https://github.com/vikseriq/browser-pug) it is possible to transpose
133 | basic `pug` markup as Vue template. To achieve do next steps:
134 | 
135 | 1. Install ```browser-pug``` plugin
136 | 
137 | ```bash
138 | yarn add browser-pug
139 | ```
140 | 
141 | 2. Setup module paths and configs in your RequireJS config:
142 | 
143 | 	...
144 | 		paths: {
145 | 		...
146 | 			Vue: 'node_modules/vue/dist/vue.min',
147 |         	'vue-loader': 'node_modules/requirejs-vue/requirejs-vue',
148 | 			'browser-pug': 'mode_modules/browser-pug/browser-pug'
149 | 		...
150 | 		},
151 | 		config: {
152 |             'vue-loader': {
153 |                 pug: 'browser-pug'
154 |             }
155 |         }
156 |     ...
157 | 
158 | 
159 | 3. Mark template as pug-able in your Vue component:
160 | 
161 | ```html
162 | <template lang="pug">
163 | div
164 | 	p Here comes the magic
165 | 	a(v-bind:href="dummyLink") Follow us
166 | </template>
167 | <script>
168 |   define(['Vue'], function(Vue){
169 |     new Vue({
170 |       template: template,
171 |       data: {
172 |         dummyLink: 'http://bit.ly/naked_truth_about_javascript'
173 |       }
174 |     }).$mount('#app');
175 |   });
176 | </script>
177 | ```
178 | 
179 | ***Note: be aware of using this heavily in production may slow down your app initialization due client-side `.pug` rendering***
180 | 
181 | ### Server-side building with r.js
182 | 
183 | Plugin supports RequireJS Optimizer. Follow the usual r.js workflow: specify build config in ```build.js``` like:
184 | 
185 | ```js
186 | {
187 | 	baseUrl: './',
188 | 	name: 'init',
189 | 	out: './dist.js',
190 | 	findNestedDependencies: true,
191 | 	optimize: 'none',
192 | 	paths: {
193 | 	  Vue: 'node_modules/vue/dist/vue.min',
194 | 	  vue: 'node_modules/requirejs-vue/requirejs-vue',
195 | 	  app: 'your-entry-point'
196 | }
197 |   }
198 | ```
199 | 
200 | and then run builder:
201 | 
202 | ```
203 | r.js -o build.js
204 | ```
205 | 
206 | For advanced usage see [demo project](/demo/).
207 | 
208 | ## License
209 | 
210 | MIT &copy; 2017 vikseriq


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "requirejs-vue",
 3 |   "description": "An AMD loader for Vue components 🤘🏽",
 4 |   "main": "requirejs-vue.js",
 5 |   "authors": [
 6 |     "Wiktor Serow <vikseriq@gmail.com>"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "javascript",
11 |     "vuejs",
12 |     "requirejs",
13 |     "loader",
14 |     "vue"
15 |   ],
16 |   "homepage": "https://github.com/vikseriq/requirejs-vue",
17 |   "ignore": [
18 |     "node_modules",
19 |     "bower_components"
20 |   ],
21 |   "dependencies": {
22 |     "requirejs": "^2.3.5",
23 |     "vue": "^2.5.9"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # requirejs-vue Sample
 2 | 
 3 | This sample demonstrates way to load Vue components with RequireJS
 4 | 
 5 | ## Prepare
 6 | 
 7 | Run ```bower install```
 8 | 
 9 | This will download necessary libraries into `bower_components`.
10 | 
11 | ## Run
12 | 
13 | Due to browser's XMLHttpRequest CSRF limitations use a local server to serve files from current directory, 
14 | for example with Python built-in module:
15 | 
16 | ```bash
17 | python -m SimpleHTTPServer 8008 & open http://localhost:8008/index.html
18 | ```
19 | 
20 | ## Build with r.js
21 | 
22 | To create production-ready js bundle we suggest to use [r.js optimizer](http://requirejs.org/docs/optimization.html).
23 | 
24 | 0. Install r.js optimizer:
25 | 	
26 | 	```bash
27 | 	npm install -g requirejs
28 | 	```
29 | 
30 | 1. Make `app.dist.js` by calling
31 | 	
32 | 	```bash
33 | 	r.js -o app.build.js
34 | 	```
35 | 	
36 | 	The combined and minified bundle will be generated for standalone usage.
37 | 
38 | 2. And then simply open `app.dist.html`.
39 | 
40 | Note: *currently Vue-component's styles will omitted during build – use standard css instead*.
41 | 


--------------------------------------------------------------------------------
/demo/app.build.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 |   return {
 3 |     baseUrl: "./lib",
 4 |     // load config from app main file
 5 |     mainConfigFile: 'lib/main.js',
 6 |     // name of initial file - like `data-main` attr
 7 |     name: "main",
 8 |     // force include requirejs into bundle
 9 |     include: ['requirejs'],
10 |     // relative path to requirejs src
11 |     paths: {
12 |       'requirejs': '../bower_components/requirejs/require'
13 |     },
14 |     // strip comments
15 |     preserveLicenseComments: false,
16 |     // lookup nested - like require component inside component
17 |     findNestedDependencies: true,
18 |     // output file
19 |     out: "app.dist.js"
20 |   }
21 | })();


--------------------------------------------------------------------------------
/demo/app.dist.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Vue SFC Loader Demo - single build</title>
 5 | 	<script src="app.dist.js"></script>
 6 | </head>
 7 | <body>
 8 | <div id="app">
 9 | 	<v-head level="1" text="Эники"></v-head>
10 | 	<v-head level="2" text="Беники"></v-head>
11 | 	<v-head level="3" text="Ели"></v-head>
12 | 	<v-head level="4" text="Вареники"></v-head>
13 | </div>
14 | <p>This is <i>production-ready</i> app with combined js into one file</p>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/demo/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "requirejs-vue-demo",
 3 |   "authors": [
 4 |     "vikseriq"
 5 |   ],
 6 |   "description": "",
 7 |   "main": "",
 8 |   "license": "MIT",
 9 |   "homepage": "",
10 |   "private": true,
11 |   "ignore": [
12 |     "**/.*",
13 |     "bower_components"
14 |   ],
15 |   "dependencies": {
16 |     "vue": "^2.2.0",
17 |     "requirejs": "^2.3.0",
18 |     "requirejs-vue": "^1.1.5"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Vue SFC Loader Demo</title>
 5 |     <script data-main="lib/main" src="bower_components/requirejs/require.js"></script>
 6 | </head>
 7 | <body>
 8 | <div id="app">
 9 |     <v-head level="1" text="Prima"></v-head>
10 |     <v-head level="2" text="Doua"></v-head>
11 |     <v-head level="3" text="Treia"></v-head>
12 |     <v-head level="4" text="Patra"></v-head>
13 | </div>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/demo/lib/clock.html:
--------------------------------------------------------------------------------
 1 | <!-- clock sample on vue -->
 2 | <script>
 3 |     define(['Vue'], function(Vue){
 4 |       return new Vue({
 5 |         template: __template__,
 6 |         filters: {
 7 |           digits: function(value){
 8 |             return +(value) < 10 ? '0' + value : value;
 9 |           }
10 |         },
11 |         data: {
12 |           now: new Date()
13 |         },
14 |         mounted: function(){
15 |           var self = this;
16 |           window.setInterval(function(){
17 |             self.now = new Date()
18 |           }, 1000)
19 |         },
20 |         computed: {
21 |           hour: function(){
22 |             return this.now.getHours();
23 |           },
24 |           minute: function(){
25 |             return this.now.getMinutes();
26 |           },
27 |           second: function(){
28 |             return this.now.getSeconds()
29 |           }
30 |         }
31 |       })
32 |     });
33 | </script>
34 | <style>
35 |     body {
36 |         background: slategray;
37 |     }
38 |     .clock {
39 |         font-size: 200%;
40 |         color: white;
41 |         text-align: center;
42 |     }
43 | </style>
44 | <template>
45 |     <div class="clock">
46 |         <span>{{hour | digits}}</span>:<span>{{minute | digits}}</span>:<span>{{second | digits}}</span>
47 |     </div>
48 | </template>


--------------------------------------------------------------------------------
/demo/lib/component-head.vue:
--------------------------------------------------------------------------------
 1 | <!-- Component without template -->
 2 | <style>
 3 |     h1, h2, h3, h4 {
 4 |         font-weight: normal;
 5 |     }
 6 |     h1 {
 7 |         color: cyan;
 8 |     }
 9 |     h2 {
10 |         color: maroon;
11 |     }
12 |     h3 {
13 |         color: yellow;
14 |     }
15 |     h4 {
16 |         color: black;
17 |     }
18 |     /* comment will stripped */
19 | </style>
20 | <!-- Comment will stripped -->
21 | <script>
22 |   define(['Vue'], function(Vue){
23 |     Vue.component('v-head', {
24 |       //template: template, // yup, there are no template
25 |       props: {
26 |         level: {
27 |           type: String
28 |         },
29 |         text: {
30 |           type: String
31 |         }
32 |       },
33 |       render: function(){
34 |         return this.$createElement('h' + this.level, this.text);
35 |       }
36 |     });
37 |   });
38 | </script>


--------------------------------------------------------------------------------
/demo/lib/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A sample usage of requirejs-vue
 3 |  */
 4 | require(
 5 |   {
 6 |     paths: {
 7 |       'Vue': '../bower_components/vue/dist/vue',
 8 |       'vue': '../bower_components/requirejs-vue/requirejs-vue'
 9 |     },
10 |     config: {
11 |       // vue loader configuration
12 |       'vue': {
13 |         'css': 'inject',
14 |         'templateVar': '__template__'
15 |       }
16 |     }
17 |   },
18 |   ['Vue', 'vue!clock.html', 'vue!component-head.vue'],
19 |   function(Vue, clock){
20 |     // init whole vue app
21 |     // component-head placed automatically because of component's pre-registered tag names will found in app template
22 |     var app = new Vue({
23 |       el: '#app'
24 |     });
25 |     // create DOM node for clock
26 |     clock.$mount();
27 |     // dynamically insert
28 |     app.$el.appendChild(clock.$el);
29 |   }
30 | );
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "requirejs-vue",
 3 |   "version": "1.1.5",
 4 |   "description": "An AMD loader for Vue components 🤘🏽. Pug 🐶 supported.",
 5 |   "main": "requirejs-vue.js",
 6 |   "keywords": [
 7 |     "javascript",
 8 |     "vuejs",
 9 |     "requirejs",
10 |     "loader",
11 |     "single file component",
12 |     "vue",
13 |     "pug",
14 |     "jade"
15 |   ],
16 |   "files": [],
17 |   "repository": "https://github.com/vikseriq/requirejs-vue",
18 |   "author": "Wiktor Serow <vikseriq@gmail.com>",
19 |   "license": "MIT",
20 |   "dependencies": {
21 |     "requirejs": "^2.3.0",
22 |     "vue": "^2.2.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/requirejs-vue.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Vue loader for RequireJS
  3 |  *
  4 |  * module config: {
  5 |  *    pug: String           requirejs module id for `pug` template parser (usually 'browser-pug')
  6 |  *    css: String|Function  css transformation strategy
  7 |  *    templateVar: String   template name for closure
  8 |  * }
  9 |  *
 10 |  * @version 1.1.5
 11 |  * @author vikseriq
 12 |  * @license MIT
 13 |  */
 14 | define(['module'], function(module){
 15 |   'use strict';
 16 | 
 17 |   var fetchContent = null,
 18 |     moduleVersion = '1.1.5',
 19 |     masterConfig = {
 20 |       isBuild: false,
 21 |       currentImport: ''
 22 |     },
 23 |     buildMap = {};
 24 | 
 25 |   if (typeof window !== 'undefined' && window.document){
 26 |     // browser-side
 27 |     if (typeof XMLHttpRequest === 'undefined')
 28 |       throw new Error('XMLHttpRequest not available');
 29 | 
 30 |     fetchContent = function(url, callback){
 31 |       var xhr = new XMLHttpRequest();
 32 |       xhr.open('GET', url, true);
 33 |       xhr.onreadystatechange = function(){
 34 |         if (xhr.readyState === 4 && this.status < 400)
 35 |           callback(xhr.responseText);
 36 |       };
 37 |       xhr.send();
 38 |     };
 39 |   } else {
 40 |     // probably server-side
 41 |     var fs = require.nodeRequire('fs');
 42 |     if (!fs || !fs.readFileSync)
 43 |       throw new Error(module.id + ': Unsupported platform');
 44 | 
 45 |     fetchContent = function(url, callback){
 46 |       try {
 47 |         var file = fs.readFileSync(url, 'utf8');
 48 |         // remove BOM 😜
 49 |         if (file[0] === '\uFEFF'){
 50 |           file = file.substring(1);
 51 |         }
 52 |         callback(file);
 53 |       } catch (e) {
 54 |         throw new Error(module.id + ': Can not load file ' + url);
 55 |       }
 56 |     };
 57 |   }
 58 | 
 59 |   var extractor = {
 60 |     /**
 61 |      * Extract content surrounded by tag
 62 |      */
 63 |     _wrapped_content: function(text, tagname, options){
 64 |       options = options || {whitespaces: false};
 65 |       var start = text.indexOf('<' + tagname);
 66 |       if (start < 0)
 67 |         return '';
 68 |       start = text.indexOf('>', start) + 1;
 69 |       var end = text.indexOf('</' + tagname + '>', start);
 70 |       if (options.lastIndex)
 71 |         end = text.lastIndexOf('</' + tagname + '>');
 72 | 
 73 |       text = text.substring(start, end);
 74 | 
 75 |       if (!options.whitespaces)
 76 |         text = text.replace(/\n/g, ' ').replace(/\s{2,}/g, ' ');
 77 | 
 78 |       if (options.escape)
 79 |         text = text.replace(/(['\\])/g, '\\$1');
 80 | 
 81 |       return text;
 82 |     },
 83 | 
 84 |     /**
 85 |      * Cleanup HTML
 86 |      */
 87 |     cleanup: function(text){
 88 |       return text.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*|<!--[\s\S]*?-->$/, '');
 89 |     },
 90 | 
 91 |     /**
 92 |      * Vue template extractor
 93 |      */
 94 |     template: function(text){
 95 |       var start = text.indexOf('<template');
 96 |       if (start < 0)
 97 |         return '';
 98 |       var content;
 99 |       // `pug` support requires template mark + loader in config
100 |       // check for `pug` template engine mark
101 |       if (/^<template\s+lang="(pug|jade)"/.test(text.substring(start))){
102 |         if (module.config().pug){
103 |           var pug = require(module.config().pug);
104 |           content = this._wrapped_content(text, 'template', {lastIndex: true, escape: false, whitespaces: true});
105 |           content = pug.render(content);
106 |         } else {
107 |           console.warn(module.id + ': missing `pug` in module config');
108 |         }
109 |       } else {
110 |         // generic html
111 |         content = this._wrapped_content(text, 'template', {lastIndex: true, escape: true})
112 |           .trim();
113 |       }
114 | 
115 |       return content;
116 |     },
117 | 
118 |     /**
119 |      * Component source code extractor
120 |      */
121 |     style: function(text){
122 |       return this._wrapped_content(text, 'style');
123 |     },
124 | 
125 |     /**
126 |      * Styles extractor
127 |      */
128 |     script: function(text){
129 |       return this._wrapped_content(text, 'script', {whitespaces: true});
130 |     }
131 |   };
132 | 
133 |   /**
134 |    * Processing css style
135 |    * @param style
136 |    */
137 |   var processStyles = function(style){
138 |     if (!style || !style.trim().length)
139 |       return;
140 |     if (masterConfig.isBuild || typeof document === 'undefined')
141 |       return;
142 |     var cssStrategy = module.config().css || 'inject';
143 | 
144 |     if (cssStrategy === 'inject'){
145 |       // inject to DOM as script
146 |       var e = document.createElement('style');
147 |       e.type = 'text/css';
148 |       e.appendChild(document.createTextNode(style));
149 |       document.body.appendChild(e);
150 |     } else if (cssStrategy === 'skip'){
151 |       // do nothing
152 |     } else if (typeof cssStrategy === 'function'){
153 |       // call external handler
154 |       cssStrategy(style, {name: masterConfig.currentImport});
155 |     }
156 | 
157 |   };
158 | 
159 |   /**
160 |    * Rearrange .vue file to executable content
161 |    * @param text raw file content
162 |    * @returns {string} executable js
163 |    */
164 |   var parse = function(text){
165 |     text = extractor.cleanup(text);
166 | 
167 |     processStyles(extractor.style(text));
168 | 
169 |     return '(function(' + (module.config().templateVar || 'template') + '){'
170 |       + extractor.script(text)
171 |       + '})(\''
172 |       + extractor.template(text)
173 |       + '\');'
174 |   };
175 | 
176 |   return {
177 |     version: moduleVersion,
178 | 
179 |     load: function(name, require, load, config){
180 |       masterConfig.isBuild = !!config.isBuild;
181 |       masterConfig.currentImport = name;
182 | 
183 |       var fullName = name + (/\.(vue|html)$/.test(name) ? '' : '.vue');
184 |       var path = require.toUrl(fullName);
185 | 
186 |       fetchContent(path, function(text){
187 |         var data = parse(text);
188 |         buildMap[name] = data;
189 |         try {
190 |           load.fromText(data);
191 |         } catch (err){
192 |           if (typeof console !== 'undefined'){
193 |             console.warn(module.id + ': can not load module; check for typos in component', path);
194 |             console.error(err);
195 |           }
196 |         }
197 |       });
198 |     },
199 | 
200 |     write: function(plugin, module, write){
201 |       if (buildMap.hasOwnProperty(module)){
202 |         write.asModule(plugin + '!' + module, buildMap[module]);
203 |       }
204 |     }
205 |   }
206 | });


--------------------------------------------------------------------------------