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 Selection ​

  • File: mixins/fileSelection.js
  • Purpose: File selection and multi-select functionality

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

Value Model ​

  • File: mixins/ValueModel.js
  • Purpose: Form value model utilities

Version File Type ​

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

Zip Shot ​

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

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)