A journey into Meteor + Vue


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


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