Appearance

Plugins Documentation ​

Overview ​

Plugins in Nuxt.js are JavaScript files that run before the Vue application is instantiated. They allow you to add functionality globally, inject dependencies, and configure third-party libraries. The Admin Frontend uses plugins for HTTP client configuration, notifications, utilities, event buses, form validation, and more.

Plugin Location ​

All plugins are located in the plugins/ directory and are automatically registered by Nuxt.js based on the nuxt.config.js configuration.

Available Plugins ​

Axios Plugin ​

  • File: plugins/axios.js
  • Purpose: HTTP client configuration with request/response interceptors, error handling, and rate limiting

Helper Plugin ​

  • File: plugins/helper.js
  • Purpose: Injects utility functions globally, workspace management, and resource sorting

Snackbar Plugin ​

  • File: plugins/snackbar.js
  • Purpose: Global notification system with success, error, warning, and info messages

Event Bus Plugin ​

  • File: plugins/event-bus.js
  • Purpose: Standalone Vue instance for event bus functionality

Vuelidate Plugin ​

  • File: plugins/vuelidate.js
  • Purpose: Form validation library integration

Vue Async Computed Plugin ​

  • File: plugins/vue-async-computed.js
  • Purpose: Async computed properties support

Vue Audio Visual Plugin ​

  • File: plugins/vue-audio-visual.js
  • Purpose: Audio visualization components

Vue Recaptcha 3 Plugin ​

  • File: plugins/vue-recaptcha-3.js
  • Purpose: Google reCAPTCHA v3 integration

Disable Inspect Plugin ​

  • File: plugins/disable-inspect.js
  • Purpose: Disables right-click context menu in production
  • File: plugins/pwa-links.client.js
  • Purpose: Handles link navigation in PWA standalone mode

Streamsaver Plugin ​

  • File: plugins/streamsaver.client.js
  • Purpose: StreamSaver library for file downloads

Amplitude Plugin ​

  • File: plugins/amplitude.js
  • Purpose: Initialises Amplitude analytics; registers $trackEvent on Vue.prototype; normalises event properties; integrates with session replay plugin

Amplitude Session Replay Plugin ​

  • File: plugins/amplitude-session-replay.js
  • Purpose: Amplitude Session Replay SDK; sampling rate controlled by AMPLITUDE_SESSION_REPLAY_SAMPLE_RATE env var; syncs device/session ID from main Amplitude instance

Branding Plugin ​

  • File: plugins/branding.js
  • Purpose: Registers the branding mixin globally via Vue.mixin; makes workspace branding helpers available on every component

Unregister Service Worker Plugin ​

  • File: plugins/unregister-sw.client.js
  • Purpose: Unregisters all service workers and clears caches on app load; prevents stale PWA cache from serving outdated assets

For the full reference table including mode and config details, see Admin-Frontend Plugins.

Plugin Types ​

Server-Side Plugins ​

Plugins that run on both server and client:

  • axios.js - HTTP client
  • helper.js - Utilities
  • snackbar.js - Notifications
  • vuelidate.js - Validation
  • branding.js - Workspace branding mixin (global Vue.mixin)

Client-Only Plugins ​

Plugins that run only on client (.client.js suffix):

  • pwa-links.client.js - PWA navigation
  • streamsaver.client.js - File downloads
  • disable-inspect.js - Dev tools blocking
  • amplitude.js - Analytics tracking
  • amplitude-session-replay.js - Session replay recording
  • unregister-sw.client.js - Service worker cleanup

Plugin Registration ​

Plugins are registered in nuxt.config.js:

javascript
export default {
  plugins: [
    '~/plugins/axios',
    '~/plugins/helper',
    '~/plugins/snackbar',
    { src: '~/plugins/pwa-links.client.js', mode: 'client' }
  ]
}

Using Plugins ​

Injected Properties ​

Plugins can inject properties that are available globally:

javascript
// In component
this.$axios.get('/api/endpoint')
this.$snackbar.success('Success message')

Helper Functions ​

javascript
// In component
this.$getWorkspaceId()
this.$_auth()
this.$setCurrentWorkspace(workspaceId)

Plugin Best Practices ​

  1. Client-Only Plugins: Use .client.js suffix for browser-only code
  2. Server-Safe: Ensure server-side code doesn't access browser APIs
  3. Injection: Use inject() for global properties
  4. Error Handling: Handle errors gracefully
  5. Performance: Keep plugins lightweight