VuePress 1.x Import Vue.js Component: Vue Toasted

June 1, 2019

Edit docs/.vuepress/enhanceApp.js

// import Toasted from 'vue-toasted';

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  /*
  Vue.use(Toasted, {
    duration: 6000
  });
   */

  import('vue-toasted').then(module => {
    Vue.use(module.default, {
      duration: 6000
    });
  }).catch(error => {

  });
}

Without .catch(error => { ... }), the following warning shall appear during build (yarn docs:build)

(node:7226) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
    at Object.<anonymous> (15.server-bundle.js:7:52389)
    at e (15.server-bundle.js:7:185)
    at Object.<anonymous> (15.server-bundle.js:7:20076)
    at e (15.server-bundle.js:7:185)
    at Object.<anonymous> (15.server-bundle.js:7:2540)
    at e (15.server-bundle.js:7:185)
    at Object.<anonymous> (15.server-bundle.js:7:18822)
    at e (15.server-bundle.js:7:185)
    at 15.server-bundle.js:7:574
    at 15.server-bundle.js:7:583
    at exports.modules.203.n (15.server-bundle.js:7:39)
    at Object.203 (15.server-bundle.js:7:62)
    at __webpack_require__ (server-bundle.js:27:30)
    at module.exports.__webpack_require__.t (server-bundle.js:84:33)
    at <anonymous>
(node:7226) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

In component file

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  mounted () {
    this.$toasted.shoe('Hello');
  }
}
</script>

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.