I would like to use vue-router directly.
I tried, but don’t work.
@laosb, thanks for the Medium post on VueJS + Meteor.
The thing, you gave two options for using VueJS within Meteor:
-
Vue components within a Blaze template
-
Blaze template within a Vue components.
But I’m now trying a third way:
- Use Vue with FlowRouter without mixing the two. For example a pure VueJS component/template and then a pure Blaze template without mixing the two.
For example:
Say I have a Blaze template that has a route like this:
FlowRouter.route( '/some-template-name', {
action: function() {
BlazeLayout.render( 'dashboardLayoutFlex', { main: 'the_template' } );
},
name: 'template.name'
});
and the
<template name="theTemplate">
... do stuff
</template>
AND THEN a TOTALLY SEPARATE Vue “template” (component) within the SAME meteor project:
FlowRouter.route( '/some-vue-component', {
action: function() {
BlazeLayout.render( 'dashboardLayoutFlex', { main: 'widget' } );
},
name: 'template.name'
});
<template>
<div class="widget">
<div>Hello {{name}}!</div>
<input v-model="name" placeholder="Enter your name" />
<div>
You've pressed the button {{counter}} times (inside vue component).
</div>
</div>
</template>
<script>
import {Session} from 'meteor/session';
export default {
data() {
return {
name: 'world',
counter: 0
}
},
meteor: {
data: {
counter() {
return Session.get("counter");
}
}
}
}
</script>
And then layout for both Blaze and Vue templates/components:
<template name="dashboardLayoutFlex">
<div class="flex-layout">
<div class="navigation">
<!--navigation-->
{{#if isAdmin}}
{{> adminNavigation}}
{{/if}}
{{#if isUser}}
{{#if showDefault}}
{{> defaultSidebar}}
{{/if}}
{{/if}}
</div>
<div class="body">
<div class="header">
<!--header-->
{{#if isInRole 'admin'}}
{{> adminHeader}}
{{else}}
{{> userDashboardHeader}}
{{/if}}
</div>
<div class="content">
<div class="main">
{{> Template.dynamic template=main}}
{{> Template.dynamic template=rightSide}}
</div>
</div>
</div>
</div>
</template>
I installed the following into my existing Meteor project in terms of Vue:
meteor npm install --save vue-meteor-tracker
meteor npm install --save vue
meteor add akryum:vue akryum:vue-component
for the router I’ve been using the following with Blaze for a long time:
meteor add kadira:blaze-layout
meteor add kadira:blaze-layout
Can this be done properly? I don’t use parameters on the route or nested routes. What else do I need to call a pure Vue component (not mixed with Blaze) within a Meteor project?
1 Like
Actually what you want, is embedding Vue components in Blaze templates (given the impression that you want to use a Blaze layout). In the Medium post I said that you can’t really embed Vue in Blaze seamlessly without some efforts. I didn’t played a lot with that, but the solution @akryum given in his README just doesn’t work as well as his v-blaze for embedding Blaze templates into Vue components. That’s why I chose to work with a Vue layout.
1 Like
I didn’t play with that because I went for the “keep the apps that can stay Blaze+Viewmodel as Blaze+Viemwmodel and rewrite the frontend for the apps that you want to be Vue from the scratch” way. But I wish you luck.
1 Like
@akryum will you speak to this comment with the aim of helping with get this going?
I’d like to run Blaze on some screens and then Vue on others (independent of each other), and use FlowRouter (I have no nested routes or params on the routes) as the unifying router between the two – but this is looking less likely to be an option.
I’m able to get Vue up and running in Meteor on a new project just fine. But I would also like to use Vue on an existing project that has hundreds of existing Blaze screens I simply cannot immigrate to Vue right now. But for new screens I add to that old system, I’d like to use Vue instead of Blaze.
In my Medium post I mentioned the way for using Vue alongside with Blaze templates - but you will need to migrate your existing Blaze layout to Vue.
I know you did @laosb, and it was a good Medium post too. My problem is I have way too many Blaze templates to rewrite all at once – probably 300 screens at this point. Unless there was a super easy way to convert them over quickly (like a cut and paste operation), I couldn’t do it all at once. Which leaves me no choice but to stick with Blaze unfortunately.
Maybe if I posted a Gist of my template with all the supporting infrastructure, and we figured out a way for me to convert it over in a way I can replicate to all my similar templates quickly and easily (a lot of my templates have use the same pattern). Could we try that?
Do you really have 300+ layouts for now? In the way I mentioned in my post, only the layout template (the one you put {{Template.dynamic}} in) need to be migrated to Vue. At Immortal.Work we are actually still in the stage of mixed template engine. Blaze pages works fine alongside with new Vue pages, under the same Vue layout.
But if you really have so many layouts, it can be really hard. We can try it.
2 Likes
Yeah it’s hardly believable you have 300 root Blaze templates. 
Have you guys moved to Vue 2.2.0? No issues for Meteor integration so far?
1 Like
Wait, what? I think we have our wires crossed. I’ll come up with a ghist tomorrow so we all get on the same page.
1 Like
FYI: I’m almost done building out a sample project as a starting point for conversation.
Here is the github repo: https://github.com/aadamsx/vue-blaze-integration-demo
I’ll post back on here later to explain further.
Remember to explain your current approach to this rewrite and which of these folders in particular contains these +/- 300 hundreds of templates (which role in your structure they serve).
This is NOT my current project. It’s just a small replica that serves to demonstrate some of the folder structure and tech I use to build that 300+ Blaze views.
I have 300+ Blaze templates inside the client/blaze-views folder in the original project (it’s actually a little further broken down in the original, like client/views/user & client/views/admin, but it’s similar). In this demo, I only have one. But this one does actually use a lot of the tech – namely, autoform, simple-schema, collection2,etc.
Also, the saving of data from this form is similar. I dynamically change the “type” of the form from insert to update once data has been saved to the database. And I use method calls to insert and update the form data.
Further the client/layouts contains a similar layout to the one I’m using in my large Blaze application. Of course there is no code behind it to show and hide portions based on logins and roles and the navigation structure is super simplified, yet uses named portions of the layout to fill in Blazes views where needed.
The lib folder contains schemas for the Blazes views just as my real project does. And the routes in this demo are very similar.
This is an extremely scaled down version of my larger project with similar folder structure. Notice I make almost no use of npm packages here, because my main project does not either.
What I’d like to do next with this demo project (and with you-alls help) is add Vue and build out another form with Vue components. But most importantly (with you-guys help), I’d like to come up with a way I can “convert” my entire Blaze template base to use Vue while still keeping the main Blaze related code intact (or with minimal changes). I’ll take what I learn from this, and apply it to my main project – this is the goal.
1 Like
Going back over this question now, and looking at my code here: https://github.com/aadamsx/vue-blaze-integration-demo are we talking about the same thing? I think there is only one layout in my demo code (and in my real project two), but ~300 Blaze screens similar to the (only) one I have in this project.
What I think you’re saying is, only this layout here: https://github.com/aadamsx/vue-blaze-integration-demo/blob/master/client/layouts/main-layout.html#L4 needs to be migrated to Vue in order to use Vue with all my Blaze templates (similar to this one: https://github.com/aadamsx/vue-blaze-integration-demo/blob/master/client/blaze-views/name.html#L1)?
Will you or someone show me what you mean?
Sorry for my late reply.
What I think you’re saying is, only this layout here: https://github.com/aadamsx/vue-blaze-integration-demo/blob/master/client/layouts/main-layout.html#L41 needs to be migrated to Vue in order to use Vue with all my Blaze templates (similar to this one: https://github.com/aadamsx/vue-blaze-integration-demo/blob/master/client/blaze-views/name.html#L1)?
Absolutely.
But unfortunately I didn’t find a way to convert Blaze templates. In fact, packages like autoform is not intended for Vue, so you may need to roll your own replacement. It can be hard.
At Immortal.Work, we’re actually trying to move our frontend out of Meteor. We are trying to integrate with Nuxt.js, for we need SSR (@akryum don’t let us down by rolling out SSR so we can stick to Meteor!).
I tried to rewrite accounts-ui into Vue. But accounts-ui template and files structure was so bloated that in the middle of the task I had enough.
But does Meteor actually allow traditional SSR?
This is one of the things that will come to vue-meteor soon.
2 Likes
Will you also provide an example of using vue-supply in the context of Meteor soon? 
I also see that this package is by design ommiting a function to wrap Meteor.call in a promise for the purpose of returning it to the component from Vuex actions. Do you actually use that function in your own code and handle the response or errors in the template or keep it in Vuex?
Wow, so in order to migrate my existing project from Blaze to Vue, I’m going to have to rewrite the entire front end – and roll my own forms too – oh man that’s going to take a large amount of work.
The main obstacle is simple schema – I have a lot of validation logic and of course it dictates the shape of the data going into Mongo. Can I use simple schema and all it’s goodness with Vue?
Would switching to React be an easier “upgrade” path?