Meteor + Vue + Vuetify + Auth0 Authentication + Vuex + Vue Router ...

All you need to start your Real Time Web App

Installation (Dev mode):

Install meteor (if is not installed yet).
Clone repository git clone https://github.com/Hernanm0g/meteor_vuetify.git
Navigate to directory cd meteor_vuetify
Edit the settings file: cp settings.example.json settings.json , with your own params.
Install node_modules: meteor npm install
run Meteor: npm start
Open in browser (http://localhost:3000)
Follow instructions to set Auth0 credentials.

Idea

Back-end: Meteor and it's DDP + Optimistic UI is wonderful for a rapid deployment and server-side js programming.
Front-end: Vuejs and Vuetify are great for full-stack developers that want to learn and deliver software fast and continuosly. Even more, vuetify components give the ui an amazing look.
Vuetify's A La Carte is an essential feature to reduce the first bundle size and give users a fast page load. We have developed a Meteor package: meteor-vuetify-loader, that makes Meteor's default bundler load vuetify components on the fly. Check it out!, this boilerplate has this package already, so you dont need to install it. Just add cpl="vuetify" to your script tag in the .vue file.

 <template>
    <v-button> <!-- The VButton component will be loaded on the fly-->   
      Anything
    </v-button>    
  <template>    
  <script cpl="vuetify"> //  <--- the magic goes here.
    export default {
      name:"ComponentName",
      data: ()=>({
        someData: ""
      })
    }
  </script>

User Authentication: Auth0 is a reliable authorization platform that allows several types of authentication, including social media, without having to write a line of code, and with instant results. Auth0 interacts in this boilerplate with meteor-accounts so you might want to use Meteor.user() and Meteor.userId() in both, client and server side.
Vuex for state management.
VueRouter for route management.
EventBus for event listening across components.
SSR for fast page load and Vue-meta for easy SEO management.

Check out the Meteor-Vuetify's Performance

thanks to SSR, dynamic Async imports and meteor-vuetify-lodaer, we can now have >60 performance score in lighthouse

What you will find here.

METEOR@2.2 + vue@2.6.12 + vuetify@2.4.7

Vuetify A La Carte and Treeshaking.

A la carte!

Authentication with Auth0 Universal Login and Meteor-accounts

You can easily access methods login and logout in any component via vuex action: this.$store.dispatch('login') or this.$store.dispatch('logout')
Dont forget to set your auth0 credentias

Page Router and State Management (VueRouter and Vuex)

Profile Page with avatar.

We are using the awesome OstrioFiles package to manage uploads. Go to settings.json and set the path you want to store the uploaded files. Enjoy!!

Internationalization (i18n)

Translating your site to different languages is optional. Or you can easily translate your site to multiple langagues.

In the settings.json file, there are several settings for language translation (i18n). There's a public portion that lists the languages your site supports and a setting for defaultLocale (the default language of the site plus the source file if other translations are going to be automated)

The language files are located under the public/locales folder in this project. A default language file needs to be created (see public/locales/en.json). If desired, it can be translated into other languages.

Automting translation from your defaultLocale to other Languages defined in your settings.json

You'll need to get a Google Cloud Translate API key. Add that key to the settings.json file.

To translate from your defaultLocale file, you'll run

npm run translate

That will convert your original (defaultLocale file) into all of the languages defined in your settings.json

Notes

if you only have one language defined in your settings.json file, the options to change language are unavailable in your web app.

API creation based on templates

Now you can create your collections via Script.

Simple Collection

If you want to create a simple Books Collection just type:

API_NAME=books npm run createApi

You'll see your new collection methods and subscriptions inside /imports/api/collections/books.

And you can import your collections from server:

  import {Books} from '/imports/api/collections/books/server

or from client:

  import {Books} from '/imports/api/collections/books/client

File Collection

If you want to create a File Collection just type: MEDIA_API_NAME=booksMedia npm run createApi

And you can import them the same way you did for simple collections

SSR

Now you can have faster page loading thanks to akryum:vue-ssr. Check the /imports/startup/server/index.js

vueMeta for SEO

Thanks to vueMeta, and its integration with vue-ssr and vueRouter, you can declare meta tags, title, and more in your .vue files, and they will be loaded on server side, letting your differents pages to be scanned easily by search engines.

Testing

Now you can test your app, just by typing:

npm run test

You'll see that all your collections' created with the Api Templates have already test files that are executed during the test.

Code coverage

After running the test script, you can go to http://localhost:3000/coverage and check the code coverage results.

Deployment to production

Read this

Contribute

Commit, make PR's, dont hesitate to submit issues. Enjoy!!

Hernanm0g/meteor_vuetify