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

Bus Plugin ​

  • File: plugins/bus.js
  • Purpose: Vue instance-based event bus for component communication

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

Plugin Types ​

Server-Side Plugins ​

Plugins that run on both server and client:

  • axios.js - HTTP client
  • helper.js - Utilities
  • snackbar.js - Notifications
  • bus.js - Event bus
  • vuelidate.js - Validation

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

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')
this.$bus.$emit('event-name', data)

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