AWS Amplify JS with Quasar Framework

README.md

Notes

This assumes you already have Amplify CLI installed and configured.

1. Create a new Vue project (cli 3.0): vue create sampleProject
2. Add Quasar to your project via its plugin while inside the project folder: vue add quasar
3. Follow Amplify Vue Configuration instructions
4. Initialize a new Amplify project: amplify init
5. Add Authentication to your project via AWS Cognito: amplify add auth
6. Create AWS Cognito Resources by pushing local changes: amplify push
7. Add the Authenticator drop-in component in your HelloWorld component: <amplify-authenticator v-bind:authConfig="authConfig"></amplify-authenticator>
8. Profit!

This should show how to use both Quasar as an UI Framework and AWS Amplify to boost productivity when developing Web/Mobile/PWA apps.

NOTE: Authenticator drop-in component will handle SignUp/SignIn/MFA/Password Reset out of the box and you only start paying at 50K MAU for Cognito

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

<script>
import { components } from "aws-amplify-vue";
export default {
  name: "app",
  components: {
    ...components
  }
};
</script>

HelloWorld.vue

<template>
  <div>
    <amplify-authenticator></amplify-authenticator>
  </div>
</template>

<script>
export default {
  name: "HelloWorld"
};
</script>

<style scoped>
</style>

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "./styles/quasar.styl";
import "quasar-extras/animate";
import "quasar-extras/material-icons";
import Quasar from "quasar";

import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

Vue.use(AmplifyPlugin, AmplifyModules);

Vue.use(Quasar, {
  config: {}
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

What about the hosted UI? I already added a subdomain for it. Do we have to navigate to that url?