Meteor Vue.js: Development to Deployment

In this article, we are going to learn how to use the awesomeness of vue.js as the front-end of meteor to build the “world’s most powerful TODO application”. We will cover meteor vue integration, vuetify, publication and subscription, server and client unit testing and finally deployment to web and mobile.

For use to build our “world’s most powerful TODO application” we will need the following: A text editor (Webstorm, VSCode), your Brain and two cups of coffee. That’s the good thing about meteor, installs all you need out of the box.

Installing Meteor on OSX / LINUX

Run the following command in your terminal to install the latest official Meteor release:

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

Installing Meteor on Windows

First, install Chocolatey :

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Then run this command using an Administrator command prompt:

choco install meteor

Creating Meteor App

Now that meteor is installed we can create a new meteor project by running:

meteor create the-todos-app

this will create a new meteor project with Blaze as the default frontend. to use Vue, we have to install Vue.js using:

meteor npm install --save vue
meteor add akryum:vue-component

The akryum:vue-component meteor package allows the use of Vue’s Single File Components with the .vue file extensions in your meteor app just like a traditional Vue project.

Now let's create and modify these three files:/client/App.vue The root component of your app /client/main.js Initializing the Vue app in Meteor startup/client/main.html containing the body with the #app div We need a base HTML document that has the app id.

To run your new app:

cd the-todos-app

meteor