Appearance

Mixins Documentation ​

Overview ​

Mixins are reusable Vue component options that can be shared across multiple components. The Admin Frontend uses mixins to provide common functionality, reduce code duplication, and maintain consistency.

Mixin Location ​

All mixins are located in the mixins/ directory and can be imported and used in any Vue component.

Available Mixins ​

Common Functions ​

  • File: mixins/common-functions.js
  • Purpose: General utility functions and analytics

Current Workspace ​

  • File: mixins/currentWorkspace.js
  • Purpose: Workspace management functions

File Type ​

  • File: mixins/fileType.js
  • Purpose: File type detection and utilities

Upload Common ​

  • File: mixins/upload-common.js
  • Purpose: Common upload functionality

Upload Queue ​

  • File: mixins/uploadQueue.js
  • Purpose: Upload queue management

Search Common Functions ​

  • File: mixins/search-common-functions.js
  • Purpose: Search-related utility functions

Route Params ​

  • File: mixins/routeParams.js
  • Purpose: Route parameter utilities

Image Style ​

  • File: mixins/imageStyle.js
  • Purpose: Image styling utilities

View Mode Cache ​

  • File: mixins/view-mode-cache.js
  • Purpose: View mode preference caching

Subscription Functions ​

  • File: mixins/subscription-functions.js
  • Purpose: Subscription and billing utilities

DAM Share URL ​

  • File: mixins/damShareUrl.js
  • Purpose: Share URL generation and management

External Uploads ​

  • File: mixins/external-uploads.js
  • Purpose: External user upload functionality

Shift Selection ​

  • File: mixins/shiftSelection.js
  • Purpose: Shift-click multi-select functionality

Version File Type ​

  • File: mixins/versionFileType.js
  • Purpose: Version file type handling

Zip Shot ​

  • File: mixins/zipShot.js
  • Purpose: ZIP file handling utilities

Branding ​

  • File: mixins/branding.js
  • Purpose: Registers workspace branding (logo, favicon, brand name) globally via Vue.mixin; falls back to Collage defaults

Amplitude Analytics ​

  • File: mixins/amplitude-analytics.js
  • Purpose: Provides $trackAmplitude helper; normalises event properties before sending to Amplitude

Column Visibility Cache ​

  • File: mixins/column-visibility-cache.js
  • Purpose: Persists and restores visible column selections per view type via $auth.$storage

Sort Preference Cache ​

  • File: mixins/sort-preference-cache.js
  • Purpose: Persists and restores sort field/direction per view type via $auth.$storage

Thumbnail Size Cache ​

  • File: mixins/thumbnail-size-cache.js
  • Purpose: Persists and restores thumbnail size preference per view type via $auth.$storage

Draggable Bar ​

  • File: mixins/draggable-bar.js
  • Purpose: Makes the bulk action bar draggable; persists last position in localStorage

Marquee Selection ​

  • File: mixins/marqueeSelection.js
  • Purpose: Rubber-band (marquee) multi-select on list views with pixel-threshold guard and auto-scroll

For the full reference table including usage details, see Admin-Frontend Mixins.

Using Mixins ​

Import and Use ​

javascript
import commonFunctions from '~/mixins/common-functions'

export default {
  mixins: [commonFunctions],
  // ... component options
}

Global Mixin ​

Mixins can also be registered globally in nuxt.config.js:

javascript
plugins: [
  { src: '~/mixins/common-functions.js', mode: 'client' }
]

Mixin Best Practices ​

  1. Single Responsibility: Each mixin should have a focused purpose
  2. No Side Effects: Mixins should not have side effects on component lifecycle
  3. Documentation: Document all methods and properties provided
  4. Naming: Use descriptive names for mixin methods
  5. Conflicts: Be aware of method name conflicts when using multiple mixins

Common Patterns ​

Analytics Mixin ​

javascript
// In component
this.dispatchAnalytics({
  action: 'view_asset',
  asset_id: asset.id
})

File Selection Mixin ​

javascript
// In component
this.toggleSelect(file)
this.toggleSelectAll()
this.clearSelection()

Upload Mixin ​

javascript
// In component
this.startUpload(files)
this.pauseUpload(uploadId)
this.resumeUpload(uploadId)