Fix #44

Author: Akryum

.meteor/.gitignore

@@ -1 +1,2 @@
 local
+dev_bundle

.meteor/versions

@@ -2,7 +2,6 @@ accounts-base@1.2.8
 akryum:npm-check@0.0.3
 akryum:vue@1.0.3
 akryum:vue-apollo@0.0.6
-akryum:vue-app@0.0.1
 akryum:vue-coffee@0.0.2
 akryum:vue-component@0.6.2
 akryum:vue-component-dev-client@0.0.6

README.md

@@ -9,7 +9,7 @@ This project contains new meteor packages to help build [meteor](http://meteor.c
 ## Examples
 
 - [Simple example project](https://github.com/Akryum/meteor-vue-example)
-- [Blaze example project](https://github.com/Akryum/meteor-vue-blaze)
+- [Blaze example project](https://github.com/Akryum/meteor-vue-blaze) [2](https://github.com/Akryum/meteor-vue-blaze/tree/render-blaze)
 - [Routing example project](https://github.com/Akryum/meteor-vue-example-routing)
 - [i18n example project](https://github.com/Akryum/meteor-vue-example-i18n)
 - [Vuex example project](https://github.com/Akryum/meteor-vuex-example)
@@ -33,6 +33,7 @@ Currently supported and possible future features (in no particular order) are:
  - [x] Easy routing with vue-router out-of-the-box integration & fast-render
  - [x] Easy localization with vue-i18n out-of-the-box integration, auto-detection, server-side injection and key-in-hand ui
  - [x] Easy state management with vuex integration
+ - [x] Use Blaze templates in your vue app
  - [ ] *Typescript official integration in .vue files*
 
 Track the project progress [here](https://github.com/Akryum/meteor-vue-component/milestones).
@@ -98,6 +99,14 @@ Manage the state of your app with a centralized data store with [vuex](https://g
 
 [Example app](https://github.com/Akryum/meteor-vuex-example)
 
+### Embed Blaze template
+
+Use Blaze templates inside your vue components.
+
+[See Installation & Usage in akryum:vue-blaze-template](https://github.com/Akryum/meteor-vue-component/tree/master/packages/vue-blaze-template)
+
+[Example app](https://github.com/Akryum/meteor-vue-blaze/tree/render-blaze)
+
 ## Get involved
 
 This project is very much a work-in-progress, so your help will be greatly appreciated!  

packages/vue-blaze-template/README.md

@@ -0,0 +1,33 @@
+# Use Blaze templates in Vue components
+
+## Installation
+
+    meteor add akryum:vue-blaze-template
+
+## Usage
+
+The `v-blaze` directive allow you to use any Blaze template in your Vue component. It expect an expression.
+
+Static template name (**don't forget the single quote**):
+
+```html
+<div v-blaze="'loginButtons'"></div>
+```
+
+Dynamic template name (will switch the template reactively):
+
+```html
+<template>
+  <div v-blaze="templateName"></div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    templateName: 'loginButtons'
+  })
+}
+</script>
+```
+
+[Example app](https://github.com/Akryum/meteor-vue-blaze/tree/render-blaze)

packages/vue-blaze-template/package.js

@@ -0,0 +1,14 @@
+Package.describe({
+  name: 'akryum:vue-blaze-template',
+  version: '0.0.1',
+  summary: 'Render Blaze templates in vue components',
+  git: 'https://github.com/Akryum/meteor-vue-component',
+  documentation: 'README.md'
+});
+
+Package.onUse(function(api) {
+  api.versionsFrom('1.3.4.1');
+  api.use('ecmascript');
+  api.use('akryum:vue@1.0.3')
+  api.mainModule('vue-render-blaze.js', 'client');
+});

packages/vue-blaze-template/vue-render-blaze.js

@@ -0,0 +1,22 @@
+import { Vue } from 'meteor/akryum:vue';
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+
+Vue.directive('blaze', {
+  bind() {
+  },
+  update(newValue, oldValue) {
+    const templateName = newValue;
+    const template = Template[templateName];
+    if(!template) {
+      throw new Error(`Blaze template '${templateName}' not found.`);
+    }
+    if(this.blazeView) {
+      Blaze.remove(this.blazeView);
+    }
+    this.blazeView = Blaze.render(template, this.el);
+  },
+  unbind() {
+    Blaze.remove(this.blazeView);
+  }
+});