Nascent Plasticine Materialist


    3.0.0-rc.10 • Public • Published


    pwa plugin for vue-cli


    Configuration is handled via the pwa property of either the vue.config.js file, or the "vue" field in package.json.

    • pwa.workboxPluginMode

      This allows you to the choose between the two modes supported by the underlying workbox-webpack-plugin.

      • 'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app.

      • 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it.

      The "Which Plugin to Use?" guide can help you choose between the two modes.

    • pwa.workboxOptions

      These options are passed on through to the underlying workbox-webpack-plugin.

      For more information on what values are supported, please see the guide for GenerateSW or for InjectManifest.


      • Default: "name" field in package.json

        Used as the value for the apple-mobile-web-app-title meta tag in the generated HTML. Note you will need to edit public/manifest.json to match this.

    • pwa.themeColor

      • Default: '#4DBA87'
    • pwa.msTileColor

      • Default: '#000000'
    • pwa.appleMobileWebAppCapable

      • Default: 'no'

        This defaults to 'no' because iOS before 11.3 does not have proper PWA support. See this article for more details.

    • pwa.appleMobileWebAppStatusBarStyle

      • Default: 'default'
    • pwa.assetsVersion

      • Default: ''

        This option is used if you need to add a version to your incons and manifest, against browser’s cache. This will append ?v=<pwa.assetsVersion> to the URLs of the icons and manifest.

    • pwa.manifestPath

      • Default: 'manifest.json'

        The path of app’s manifest.

    • pwa.iconPaths

      • Defaults:

          favicon32: 'img/icons/favicon-32x32.png',
          favicon16: 'img/icons/favicon-16x16.png',
          appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
          maskIcon: 'img/icons/safari-pinned-tab.svg',
          msTileImage: 'img/icons/msapplication-icon-144x144.png'

        Change these values to use different paths for your icons.

    Example Configuration

    // Inside vue.config.js
    module.exports = {
      // ...other vue-cli plugin options...
      pwa: {
        name: 'My App',
        themeColor: '#4DBA87',
        msTileColor: '#000000',
        appleMobileWebAppCapable: 'yes',
        appleMobileWebAppStatusBarStyle: 'black',
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
          // swSrc is required in InjectManifest mode.
          swSrc: 'dev/sw.js',
          // ...other Workbox options...

    Installing in an Already Created Project

    vue add @vue/pwa

    Injected webpack-chain Rules

    • config.plugin('workbox')



    npm i @vue/cli-plugin-pwa@3.0.0-rc.10





    Unpacked Size

    103 kB

    Total Files


    Last publish


    • akryum
    • yyx990803
    • soda