A journey into Meteor + Vue

Featuring:

NOTE: This list is expected to grow as I try and integrate more packages to the experimental app.


Installing meteor (curl https://install.meteor.com/ | sh )


Peeking into package.json


Packages are already installed


Fire up the meteor app as-is

Out of the box meteor app


After interacting (see 9 clicks have been recorded)

Starting to add vue support

More packages from akryum


Finished installation

Let’s try stylus for this app (Vuetify was written using stylus too)


Stylus installation done


Router (we may replace this package in the future)


Router installation done


Out of the box Blaze app

Removing Blaze support

From https://github.com/Akryum/meteor-vue-example:

Adding more packages to make Vue work


Extra packages installation done


Removing the Blaze “demo” app


Installing Vue through npm


Main.js file that implements Vue

App.vue component


Firing up meteor

Firing up meteor

Firing up meteor.. continued...


Can’t remember what (if) I changed >.< but server restarted apparently

Imported the wrong Vue version


Using akryum’s version instead


Changing how we bootstrap the app


Fixed!


Removing npm’s Vue


Recreating the Blaze app (to some extent)


Firing meteor once more


It works! But with a warning :/


Let’s try the npm version once more...


And try again with this instead of the atmosphere package


No errors ...


But not quite working …


Removing the {}


That worked!


Along vue-devtools :)


Time to work on the tooling for this project

Adding Prettier extension to my editor

Configs for prettier...


Configs for eslint


Adding stylus


Adding eslint


Eslint configs


Eslint “working” (see red highlighted files on the left)


Installing eslint-plugin-vue (from npm)


Updating the eslint config file


Adding Stylus Supremacy for some better stylus support


Configuring more stylus options


Stylus working on a SFC


Error on the eslint-plugin-vue


“Have you tried turning it off and on again?”


Yep, I’m sure


Clean slate


Install all the node packages again


Reload Window


ESLint working as expected


Vue router setup: configuring the router

Changing the main html to accomodate for the router


Installing and using the router

Defining the routes

Adding the router-view component

Moving the app to a Home component


Creating a 404 route component

Installing Vuetify from npm

Adding it to our main Vue instance


Adding the related styles


Moving it to its own “config file”


Let’s see if this works… (notice we mount on the `app`element)

No errors, fingers crossed...

It’s alive!!!


Markup for the 404 route


404 :)


Vue app still works


Installing Vuex


Adding a “config file” for Vuex, also accounts-password


Auth logic


Vuex store


Note: you are using a pure-JavaScript….


Something is wrong with our syntax

Maybe has to do with auto-publish?


Sweet! This even enforces best practices for Vue code!

[eslint] Attribute "v-model" should go before "name". (vue/attributes-order)


Getting rid of the bcrypt error


A peek into the code implemented so far...

After tweaking the code a bunch, and using code from: https://github.com/gustogummi/vuex-accounts-example

Also see https://forums.meteor.com/t/vue-meteor-accounts/32695


Console shows different actions taken in the UI


Incorrect password (this comes with meteor-accounts)


Welcome ax!


Some changes introduced to get that result

No need for the Logout component from gusto


Or maybe I actually need it :p (also adding .meteorignore file)


Installing material icons locally

I could not work on this while _not having internet connection_ so I need to make sure these fonts are available.

After downloading the font from the official material icons website: https://google.github.io/material-design-icons/#downloading-everything


I extracted the zip and copied the iconfont folder


Also the material-icons.css file not highlighted in here, this is important!


To a newly created /public/fonts/material-icons path in the meteor project


So that I could later add a link tag and use that font-face


This is the material-icons.css file I was referring to


Then I was able to use the material-icons class as per the font docs


Et voilà! (notice the user icon on the top right)

Note: this was very painful. I had to try a lot of different ideas like importing the css file from within main.js, installing an npm package for the font… but to no avail. This was the only solution I could make work and this is why it is depicted in here.

I’d love to be corrected but I think somehow the Vue build toolchain (webpack?)  clashes with the meteor build and thus we can’t simply import the css file from within js. Else we face a “Failed to decode downloaded font “ error on the browser window.

Commit link: https://github.com/ackzell/meteor-vuetify/commit/c6e5b6cf12eee983d958655bb46655ccde414f4a

Refactoring the auth vuex module

Hiding the app’s content when no user is logged in


Starting to work with data

Commit: https://github.com/ackzell/meteor-vuetify/commit/b0322bf2f617e76df8aee575c2426c3cb3effbd9

Creating a collection

Rendering it in a list component