---
title: Mixins (Vue 2)
description: 'Sinnvolle Mixins'
---

## Usefull mixins for reuse 

### Datumsmanipulationen

#### Mixin

```js{1,3-5}[./tailwind.config.js]
import { format, utcToZonedTime } from 'date-fns-tz'
import de from 'date-fns/locale/de'
export default {
  methods: {
    formatDateToTimezone(date=null, timeZone='Europe/Berlin', formatString='yyyy-MM-dd HH:mm:ssXXX'){
      if(date && date instanceof Date){
        const dateInTimezone = utcToZonedTime(date, timeZone)
        const formattedDate = format(dateInTimezone, formatString, { timeZone, locale: de, })
        return formattedDate
      }
      return null
    }
  }
}
```

#### Benutzung

Innerhalb einer Komponente kann das Mixin nach dem Import benutzt werden. Idealerweise wird in der Komponente selbst eine Funktion geschrieben, die auf die Funktionen innerhalb des Mixins zugreift und sie somit quasi namespaced.

Standardmäßig ist die TimeZone auf `Europe/Berlin` gesetzt und erwartet einen DateTimeString im UTC Format.

Das Format verfügt ebenfalls über ein default. `yyyy-MM-dd HH:mm:ssXXX`. Er kann innerhalb der Funktion überschrieben werden.

```js{1,3-5}[@components/ExampleWithTimeZone.vue]
import { TimezoneMixin } from '@zuckersalzundpfeffer/sugar-ui/mixins'
...

export default {
  mixins:[TimezoneMixin],
  ...
  methods:{
    formatDate(date){
      return this.formatDateToTimezone(date)
    }
  }
}
```