requirejs-vue

An AMD loader for Vue components 🤘🏽. Pug 🐶 supported.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
requirejs-vue
4231.1.55 years ago5 years agoMinified + gzip package size for requirejs-vue in KB

Readme

requirejs-vue
ECMAScript 5.1 Github file size
A Vue.js Single File Components loader plugin for RequireJS. One-file, browser or server, no additional fats, es5+ compatible, no babels, gluten-free.
On browser-side it uses XMLHttpRequest to fetch the .vue files, so you can only fetch files that are on the same domain as the html page. Most browsers place restrictions on using XMLHttpRequest from local file URLs, so use a web server to serve your ``.vue`` files.
The server-side building with RequireJS Optimizer r.js also available and works well.
Plugin supports pug templates. Provide pug parser via module config. Tested with browser-side pug renderer.
Since another templating engines or css preprocessors (like less/sass) not available as maintained AMD modules there are no plans to support them. Feel free to write your own 😉

Install

Via package manager

To install with Bower:
bower install requirejs-vue

With yarn
yarn add requirejs-vue

Or good ol' ``npm``:
npm install --save requirejs-vue

Manual download

Download the latest version.

Usage

Setup loader in RequireJS path like this:
...
    paths: {
        'Vue': 'path to Vue.js',
        'vue': 'path to requirejs-vue'
    },
    config: {
        'vue': {
            'pug': 'browser-pug',
            'css': 'inject'
            'templateVar': 'template'
        }
    }
...
Reference Vue file via the ``vue!``. For example, to load the component.vue file that is in your ``baseUrl`` directory:
require(['vue!component'], function (component) {
		//
});
You can specify any alias for loader but update paths alias too.

Configuration

Inside loaded file reference template by templateVar variable. Stylesheets controlled by css configuration value. Currently only global styles supported. Content of template will be cleared from whitespaces and comments. Nested template tags supported.
Loader support ``.vue` and `.html`` files.

css

String | Function, default: inject
Strategy to deal with component stylesheets. Variants:
* `inject` - appending styles in new `<style>` tag to `document.body`
* `skip` - do not process component css. Default action for r.js build mode.
* `fn(style, option{name})` - callback function for css aggregation. `style` contains actual component
	style content, `option.name` hold component file reference

pug

String, default: <none>
Module name for Pug template rendering.

templateVar

String, default: template
Represent component template as templateVar variable in script closure.

Basic usage

Sample .vue file supported by loader:
<template>
    <div v-cloak>Vue-demo component root</div>
</template>
<style>
    /* global styles */
    [v-cloak] {
        display: none;
    }
</style>
<script>
define(['Vue'], function(vue){
  Vue.component('vue-demo', {
    template: template
  })
});
</script>

Pug templates

Using browser-pug it is possible to transpose basic pug markup as Vue template. To achieve do next steps:
  1. Install ``browser-pug`` plugin

yarn add browser-pug

  1. Setup module paths and configs in your RequireJS config:
...
	paths: {
	...
		Vue: 'node_modules/vue/dist/vue.min',
        	'vue-loader': 'node_modules/requirejs-vue/requirejs-vue',
		'browser-pug': 'mode_modules/browser-pug/browser-pug'
	...
	},
	config: {
            'vue-loader': {
                pug: 'browser-pug'
            }
        }
    ...
  1. Mark template as pug-able in your Vue component:

<template lang="pug">
div
	p Here comes the magic
	a(v-bind:href="dummyLink") Follow us
</template>
<script>
  define(['Vue'], function(Vue){
    new Vue({
      template: template,
      data: {
        dummyLink: 'http://bit.ly/naked_truth_about_javascript'
      }
    }).$mount('#app');
  });
</script>

Note: be aware of using this heavily in production may slow down your app initialization due client-side .pug rendering

Server-side building with r.js

Plugin supports RequireJS Optimizer. Follow the usual r.js workflow: specify build config in ``build.js`` like:
{
	baseUrl: './',
	name: 'init',
	out: './dist.js',
	findNestedDependencies: true,
	optimize: 'none',
	paths: {
	  Vue: 'node_modules/vue/dist/vue.min',
	  vue: 'node_modules/requirejs-vue/requirejs-vue',
	  app: 'your-entry-point'
}
  }

and then run builder:
r.js -o build.js

For advanced usage see demo project
.

License

MIT © 2017 vikseriq