Basics: Running Blaze + VueJS side-by-side

VueJS
1

Continuing the discussion from Basics: Component building in Meteor + VueJS:

@webkit, you have blaze and vue with tracker side by side with HMR? Will you show us your meteor list (meteor installs) and package.json (npm installs)?

What router are you using? And can you provide an example of using the two side by side?

2

Sure, I’m using Blaze currently exclusively for the accounts package, the rest are vue components…
Router is vue-router, store is Vuex.

My client/main.html:

<head>
  <title>My app</title>
  <script src="https://apis.google.com/js/api.js"></script>
</head>

<body>
  {{> cartapp }}
</body>


<template name="cartapp">
  {{> account }}
  <app></app>
  
</template>


<template name="account">
 {{#if unsigned}}
  	{{> atForm }}
{{else}}
	<div class="profile">
		<span class="user">{{ currentUser.profile.name }}</span><button class="logout-btn">LOG OUT</button>
	</div>
{{/if }}
</template>

My meteor list:
accounts-facebook 1.0.11
accounts-password 1.3.3
accounts-ui 1.1.9
akryum:vue-component 0.8.1
akryum:vue-stylus 0.0.4
babel-runtime 1.0.1
blaze-html-templates 1.1.0
ecmascript 0.6.1
erasaur:meteor-lodash 4.0.0
es5-shim 4.6.15
fortawesome:fontawesome 4.7.0
http 1.2.10
johnantoni:meteor-normalize 0.0.1
jquery 1.11.10
juliancwirko:postcss 1.2.0
meteor-base 1.0.4
minimongo 1.0.19
mobile-experience 1.0.4
mongo 1.1.14
mrt:rupture 0.1.0
msavin:mongol 2.0.1
ostrio:files 1.7.6
promise 0.8.8
reactive-var 1.0.11
service-configuration 1.0.11
session 1.1.7
shell-server 0.2.1
standard-minifier-js 1.2.1
stylus 2.513.8
tracker 1.1.1
useraccounts:core 1.14.2
useraccounts:unstyled 1.14.2

My package.json:

{
  "name": "cartiv.io",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-runtime": "^6.18.0",
    "meteor-node-stubs": "~0.2.0",
    "vue": "^2.1.8",
    "vue-router": "^2.0.0-rc.5",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.6.1",
    "kouto-swiss": "^1.0.0",
    "lost": "^8.0.0",
    "rucksack-css": "^0.9.1",
    "rupture": "^0.6.2"
  },
  "vue": {
    "use": {
      "lost": {}
    },
    "import": [
      "lost"
    ]
  },
  "postcss": {
    "plugins": {
      "rucksack-css": {},
      "lost": {},
      "autoprefixer": {
        "browsers": [
          "last 2 versions"
        ]
      }
    }
  }
}
2 Likes
3

Thanks, is the > atForm a “Vue” template in your example? Meaning, you’re able to embed a Vue template within a Blaze template?

4

{{> atForm }} is a main Blaze template of useraccounts library.

useraccounts:core            1.14.2 
useraccounts:unstyled        1.14.2
5

Thanks, I never used it that way before.

I’m trying to locate the Vue code in his example, to see how they “intermingle” with each-other (if they do at all).

6

There’s no Vue code there, there’s just main <app></app> component.

It’s easy to use Blaze templates in Vue components, but there’s no way to pass the props from Vue to Blaze for now. The workaround is to use Sessions, but that won’t work with 3rd party packages depending on props. (see two posts below for better workaround)

meteor add akryum:vue-blaze-template

<template>
  <div v-blaze="'BlazeTemplateNameAsString'"></div>
  <div v-blaze="DynamicPropertyWithBlazeTemplateName"></div>
</template>

If you’re looking for example of how to use Vue components in Blaze templates, Akryum made an example project: https://github.com/Akryum/meteor-vue-blaze. It seems the way is to create a wrapper component around single file component. Clever. And yes, you can pass props this way.

1 Like
7

Since I’m only using Blaze for Accounts, I don’t really have a need to pass props so as @gusto said, I’m injecting my Vue app into <app></app> inside the Blaze template… from there its purely Vue. In my main.js I just check to see if someone is logged in, then I $mount(app) like normal…

2 Likes
8

There actually is an easy solution I didn’t think of earlier. Create a wrapper Blaze template, inject the data from Vue through Session and then, pass them as props from the wrapper to 3rd party template like f.e. user-accounts package.

1 Like
9

Could you give an example of where you would need to pass props from Vue to a blaze accounts template?

10

Well, I see you have user-accounts package in your project, so I took it as an example. If you’re asking for particular use case, let’s take this one:

{{> atForm state='changePwd'}}

let’s you to lock up the template to register view, as explained in the user-accounts guide template chapter.

To be honest, I took this example from a vue-component issue, so it is a real life use case.

That’s just a basic example, as other 3rd party libraries like Autoform depend on the props much more.

1 Like