I want to share my latest boilerplate. Its still in a very early stage, but it might be the ideal starting point for when you want to quickly build a dashboard / admin system. It uses Vue’s best practices combined with that of Meteor’s best practices. Some features:
Meteor Integration with Vuetify (Material Design components for Vue)
Registration & Login
Forgot Password flow
A vuex storage kept in sync with Meteor.user() via Tracker
Automatic redirects to the login on authenticated routes
Feel free to try it out and if you spot any difficulties, I will be quick to solve them
The boilerplate contains new updates. I’ve now done the following:
Implemented Vue + Meteor linting
Implemented a user management page (for now just viewing and removing users)
Added toast functionality to allow triggering one or multiple messages via a Vuex action
Did some simplification of the code and added a bit more documentation
Added a NPM install check for Meteor command existence. If it doesn’t exist it will attempt to install it
There are some todo’s on the README.md, but I’m eager for feedback from you all since I want this admin boilerplate to be ideal for both Meteor and Vue fans.
Some thoughts / plans
Creating a way to make this pluggable
Make it ideal to connect it to multiple frontend sites, maybe by providing a rest plugin and an apollo plugin.
How are you debugging vue/meteor apps? The client side debugging in Chrome dev tools seems to be totally broken in .vue files. I see people discussing working on vue/meteor apps but not being able to set a breakpoint in a .vue file seems like it would be a dealbreaker to me. This project is a very nice starting point for a vue/meteor app but no breakpoints is maddening.
To be honest. I almost never have to use breakpoints. So I don’t have issues with it. I can imagine it must be annoying. Can you file a github issue on the @akryumvue-components repo?
Great Project.
So needed!
I loved the fact you went to lengths to make it easy to start.
Unfortunately Im on windows ; ( --but i did get it to boot by
cd /src/
meteor npm install
meteor
It didnt see any css much, probably because of the start method
I validated the first users email as (owner) Fantastic!
I registered the next user in another browser.
However still seemed to see the user button and list.
again possibly my odd startup method.
There is probably heaps of great stuff there I haven’t seen.
Would be a dream if it could eventually be applied to
Regarding debugging in Meteor/Vue.js - I’ve never really used breakpoints much either, but I always found the sourcemap line numbers to be completely wrong which made it difficult to find the location of an error. However, since upgrading to Meteor 1.9 and the lastest @akryum meteor/vue packages all the line numbers seem to match up now, yay!
Regarding Vuex - I know that a central store and mutations and everything are best-practice, but I personally always found it a sledgehammer to crack a nut. Particularly when we already have minimongo as our central-source-of-truth and meteor.methods to mutate it - I always found putting Vuex on top of that to be unnecessary. I’ve never thought I needed ‘time travel’.
Instead I’m sometimes naughty and store a few globally useful variables on $root e.g $root.currentUser, $root.isCordova, etc, and everything else I try to subscribe to locally within components (using vue-meteor-tracker) and give children access via props & events.
I even use the $root instance as an event bus sometimes. Eg. @cloudspider, you said you implemented a shared Toast comonent using a Vuex action - instead I just call $root.$emit('toast', data) anywhere I want, and listen for that event in my toast component. Simple and out-of-the-box.
