@twentyfourg/g-components

24G Vue Template

Env	FE URL	API URL	Assets URL
Dev
QA
Prod

Project setup

npm install

PWA Project setup

npm install -g @vue/cli
vue add pwa

Fix the syntax error that appears in src/registerServiceWorker.js. Likely, on line 9, remove ' + '

Update public/site.webmanifest with the following:

• Ensure it has a valid name and short_name.
• Add a property with the following: "start_url": "index.html",
• Ensure the icons exist

In vue.config.js, add the follwing before the final };:

  pwa: {
    name: 'SleepScore',
    themeColor: '#000000',
    msTileColor: '#000000',
    appleMobileWebAppCache: 'yes',
    manifestOptions: {
      background_color: '#42b983',
    },
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/service-worker.js',
      exclude: [/\.map$/, /site\.manifest$/],
    },
  },

Double check src/service-worker.js for any additional requirements.

Compiles and hot-reloads for development

npm run serve

Compiling and building

This template is set up to compile and build for three environments:

• Dev: npm run build-dev
• QA: npm run build-qa
• Production: npm run build

All builds run in Vue's modern mode.

Lints and fixes files

When using VS Code, this template is set up to automatically lint and format on save using both eslint and prettier. The following command will allow you to lint and format all files:

npm run lint

Customize

App Title

The title of the app can be set in vue.config.js

pages: {
  index: {
    title: 'Vue Template',
  }
}

See Vue Configuration Reference.

Environments

• Prod: https://example.com
• QA: https://qa.example.com
• Dev: https://dev.example.com

Browsers Supported

Latest unless stated otherwise

• Edge
• Safari
• Firefox
• Chrome (+/-1)

Read More

Componenents