@/app/plugins/

Here are the projects in house and third-party plugins. "Plugins" is used loosely. The project information hierarchy/file organization needs to be revisited.

@/app/plugins/vue-apollo/

At the time of this writing, we have still not been able to wire upload functionality with the API. If we can solve this problem without using vue-apollo then we can remove it. Vuex handles state management.

This is a separate Vue instance to serve as a GQL dev helper. Once mounted, it creates a connection with the beta GQL server and enables the Apollo Chrome extension explorer. The extension's Explorer shows you all the available query fields and mutations on the beta GQL server. Use this as a way to test and fine-tune queries/mutations.

Vuex is still our preferred approach for state management at this time.

To enable, place any truthy value in the VUE_APP_APOLLO_DEV_HELPER= .env variable.

• Apollo Chome Extension

• vue-apollo
• graphql-tag
• vue-cli-plugin-apollo

@/app/plugins/exception-handler.js

This is a simple exception handler which provides more Vue specific info. It is essential only to use this during development to avoid conflict with Sentry.

if (environment === 'development') {
  Vue.config.errorHandler = (err, vm, info) => {
    logger.logToServer({ err, vm, info })
  }

  window.onerror = function (message, source, lineno, colno, error) {
    logger.logToServer({
      message,
      source,
      lineno,
      colno,
      error
    })
  }
}

@/app/plugins/network-status.js

Used to update the UI when the user's network connection is lost. Visit the Offline section for more info about Progressive Web Apps.

if (!navigator.onLine) {
  store.dispatch(globalAppActions.NETWORK_STATUS, 'offline')
} else {
  store.dispatch(globalAppActions.NETWORK_STATUS, 'online')
}

window.addEventListener('offline', function (e) {
  store.dispatch(globalAppActions.NETWORK_STATUS, 'offline')
})

window.addEventListener('online', function (e) {
  store.dispatch(globalAppActions.NETWORK_STATUS, 'online')
})

@/app/plugins/random-id.js

Used to generate unique IDs for newly created resources.

Vue.prototype.$randomId = nanoid(
  21,
  '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
)

• nanoid

@/app/plugins/sentry.js

Error monitoring / logging for production environments with Sentry.io.

• @sentry/browser
• @sentry/integrations

@/app/plugins/vue-check-view.js

A custom Vue Directive used to load below the fold content like rapids and comments dynamically. It checks to see if the element is in the viewport then trigger an API call.

//
@/app/views/river-detail/main-tab/components/rapids-section/rapids-section.vue

<section v-view.once="loadRapids"> ... </section>

• vue-check-view

@/app/plugins/vue-gtag.js

This package installs and configures Google analytics.

• vue-gtag

@/app/plugins/vue-sanitize.js

Use vue-sanitize for cleaning up HTML markup in river descriptions, news articles, and other user-generated content. The old rich text editor was very loose with what users could do. To keep page content styling consistent, we use vue-sanitize to remove inline CSS styles and replace headline tags that do not fit within our typographic hierarchy.

• vue-sanitize

@/app/plugins/vue-social-sharing.js

Used for handling all social media sharing functionality. Currently only used in news articles.

• vue-social-sharing