The meteor framework is almost certainly one of the oldest JS frameworks that still attracts a lot of popularity and not hard to see why. The ability to have changes to the backend database instantly reflected on the front end is a major plus.

If Meteor is one of the oldest, Vue is still one of the new kids on the block, but it has now taken over from React in popularity on GitHub. When you bring Vue and Meteor together, you get something really special. If you enjoy developing in Vue, you are going to love its relationship with Meteor.

In this article, I will show you how you can add VueJS to Meteor and install and configure vue-router.

The full code

If you just want to view the code for this project or use it as a starter template, you will find the full code on GitHub

https://github.com/simonjcarr/meteor_vue_vue-router

Installing Meteor

Before we start you will need to install meteor on your system, I summarise this below, but you can find out more on the meteor web site.

If you’re on a Mac or Linux, open a terminal window and use this command

curl https://install.meteor.com/ | sh

On Windows

choco install meteor

Creating a new Meteor app

Before we get to Vue, we need to get a Meteor app up and running. At the command line enter

meteor create myapp

Then run the app to check everything is good to go with

cd myapp
meteor

You should see this in your terminal

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/

Go ahead and visit http://localhost:3000

Basic Meteor app

Installing Vue

Here is the app structure the meteor create command gave us

Initial app structure created by meteor

Add a new folder imports and imports/ui to the root of the app

mkdir imports
mkdir imports/ui

Now we will use NPM to install vue. At the root of your app, in a terminal issue the command

meteor npm install vue --save

It’s not important for this tutorial, but suffice to say that when using NPM in meteor, you should use meteor npm rather than just npm

To get Meteor and Vue working nicely together we need to install a few more packages and also remove one. Issue the following commands in the terminal at the root of your project.

meteor add static-html
meteor add akryum:vue-component
meteor remove blaze-html-templates

A basic meteor app uses it’s own templating engine called blaze. We are using vue so we need to add support for with the static-html and akryum:vue-component packages. Since we will not be using blaze, we remove it or we will get some conflicts.

#mongodb #web-development #vue-router #vuejs #meteorjs #vue