$ amplify init
$ amplify add auth
$ amplify add api
$ amplify push

type Chatty @model {
  id: ID!
  user: String!
  message: String!
  createdAt: AWSDateTime
}

import { DataStore } from "@aws-amplify/datastore";
import { Chatty } from "./models";

await DataStore.save(new Chatty({
  user: "gsans",
  message: "Hi everyone!👋",
  createdAt: new Date().toISOString()
}))

import { DataStore, Predicates } from "@aws-amplify/datastore";
import { Chatty } from "./models";

const msg = await DataStore.query(Chatty, Predicates.ALL);

$ vue add @vue/pwa

src/main.js (Updated)
> + import './registerServiceWorker'

src/registerServiceWorker.js (Added)

$ yarn build

└── dist
  ├── css
  │   └── app.<version>.css
  ├── img/icons
  │   ├── android-chrome-<size>.png
  │   └── ...
  ├── js
  │   ├── app.<version>.png
  │   └── ...
  ├── favicon.ico
  ├── index.html
  ├── manifest.json
  ├── precache-manifest.<version>.json
  ├── robots.txt
  └── service-worker.js

// vue.config.js
const manifest = require('./public/manifest.json')
module.exports = {
  pwa: {
    name: manifest.short_name,
    themeColor: manifest.theme_color,
    msTileColor: manifest.background_color,
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/service-worker.js',
    }

// src/service-worker.js
workbox.core.setCacheNameDetails({ prefix: 'amplify-datastore' })

workbox.core.skipWaiting()
workbox.core.clientsClaim()

const cacheFiles = [{
 "revision": "e653ab4d124bf16b5232",
 "url": "https://aws-amplify.github.io/img/amplify.svg"
}]

self.__precacheManifest = cacheFiles.concat(self.__precacheManifest || [])
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

// <div v-if="offline">You are offline.</div>

// App.vue
import { Hub } from 'aws-amplify';

export default {
  data() {
    return { offline: undefined };
  },
  created() {
    this.listener = Hub.listen('datastore', {payload:{event}} => {
      if (event === 'networkStatus') {
        this.offline = !data.active;
      }
    })
  }
}