What's the best practice to move from Blaze to Vue and have them co-exist for the time being?

help
1

Couldn’t find much on this topic but would like to summarize what I’ve found so far and hopefully get some indication/help as to what the current best practice is.

The plan is migrate to Vue in the following steps:

  1. Keep FlowRouter for the time being (only switch when all Blaze code is gone)

  2. Install Vue as an NPM dependency and install the vue-meteor-tracker package from NPM

  3. Integrate Blaze and Vue in Meteor with the Vue + Meteor package. Is this still considered the best solution?

  4. Embed Blaze templates into Vue component

  5. Do all new components in Vue only

  6. Migrate Blaze templates into complete Vue components

  7. Eliminate jQuery and Underscore as we go along

This is based on Why & how we migrated to Vue from Blaze and Meteor Vue guide

Thanks in advance!

2 Likes
2

Seems no one here has moved from Blaze to Vue yet

At least some must have considered this step or maybe even tried. Am I asking in the right forum?

3

We had experience with Blaze -> React transition. So, your plan seems ok.

  1. We use FlowRouter via facade (thanks to react’s hooks). So we work with params and navigation like const familyId = useRouteParameter('familyId');
    and
    const goToFamily = useRoute('FamilyPage', { familyId: ... }); ... goToFamily();
  2. We allow to use react in blaze, but not blaze in react.

Some components exist in two implementations(react, blaze) for a while.

An example:

//userTime/index.html
<template name=UserTime>{{ time }}</template>

//userTime/index.js
import './index.html';

export { UserTime } from './userTime'; // a little hack

Template.UserTime.helpers({ time() { return new Date(); } });

//userTime/userTime.tsx (React component)
import React from 'react';
export const UserTime () => (<div>{ new Date() }</div>);

And use case:

//someComponent/index.js
import '../userTime'; // <- it works for Blaze
import { UserTime } from '../userTime'; // <- it works for React

//you don't need to change paths. Later, then you remove blaze, you just rename userTime.tsx to index.tsx

Also, you should decide to use vue’s state manager or leave meteor’s (session, reactive-var collection etc.). Maybe combine both.

2 Likes
4

We’ve thought about this so many times, both from Blaze->Vue and Blaze->React, so really interested to hear about other people’s experiences. We once actually started down the React path but customers complained about the new DateTimePicker (we had used AntD). It had been a bit painful so we just reverted. We’re back thinking about it again now though so will read those links :+1:

5

Thanks for your comments and even posting some code examples. I do think it’s the best approach indeed to only allow one of the two possible ways when it comes for the period of change until Blaze is completely eliminated.

If I do read this comment correctly, you chose a different path than what I have posted above (Embed Blaze templates into Vue component).

Could you explain your reasoning behind that decision so that I and others understand the pros and cons?

Thanks in advance!

6

The main reason - we don’t want to rewrite React code to remove blaze from it.

Thus, we need to create a copy for Blaze component, but written with React( it is down side, because you need to write code twice, DRY doesn’t work:)).

In my example, there are two copies of one component - UserTime(React and Blaze).

For old Blaze code, we use old Blaze component and don’t touch it(if we want to refactor it, we can use new React component via {{> React component=UserTime ...}}).
For new React code, we use new React component.

Sorry for my pure English)