refactor: migrate to vue composition api (#99)

Author: TheAlexLichter

components/Footer.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col lg:flex-row items-center">
         <div class="text-center leading-loose lg:text-left lg:leading-normal">
           <span>
-            &copy; 2015 - {{ $options.currentYear }}
+            &copy; 2015 - {{ currentYear }}
             <a
               href="/"
               class="no-underline text-developmint-500 hover:text-developmint-400"
@@ -31,14 +31,14 @@
           target="_blank"
           rel="noopener"
         >
-          <div>v{{ $options.version }}</div>
+          <div>v{{ version }}</div>
           <GitHubIcon class="block w-4 h-4 ml-1 fill-current" />
         </a>
       </div>
       <div class="py-4 lg:hidden" />
       <div class="flex items-center lg:inline">
         <NuxtLink
-          v-for="link in $options.links"
+          v-for="link in links"
           :key="link"
           :to="localePath(link)"
           no-prefetch
@@ -58,9 +58,13 @@ export default {
   components: {
     GitHubIcon: () => import('~/assets/img/icons/github.svg')
   },
-  links: ['legal', 'privacy', 'disclaimer'],
-  version,
-  currentYear: (new Date()).getFullYear()
+  setup () {
+    return {
+      links: ['legal', 'privacy', 'disclaimer'],
+      version,
+      currentYear: (new Date()).getFullYear()
+    }
+  }
 }
 </script>
 

components/about-us/TeamMember.vue

@@ -58,16 +58,13 @@
 </template>
 
 <script>
-import logClick from '~/mixins/logClick'
-
 export default {
   components: {
     GitHubIcon: () => import('~/assets/img/icons/github.svg'),
     GlobeIcon: () => import('~/assets/img/icons/team/globe.svg'),
     TwitterIcon: () => import('~/assets/img/icons/team/twitter.svg'),
     LinkedInIcon: () => import('~/assets/img/icons/team/linkedin.svg')
   },
-  mixins: [logClick],
   props: {
     slug: {
       type: String,
@@ -81,6 +78,17 @@ export default {
       type: Object,
       default: () => ({})
     }
+  },
+  setup ({ name }, context) {
+    const logClick = (eventName) => {
+      context.root.$ga.event({
+        eventCategory: 'click',
+        eventAction: `${name} - ${eventName}`
+      })
+    }
+    return {
+      logClick
+    }
   }
 }
 </script>

components/work/AnimatedNumber.js

@@ -0,0 +1,70 @@
+import { tween } from 'shifty/src/tweenable'
+import { ref, watch, createElement as h } from '@vue/composition-api'
+
+export default {
+  props: {
+    from: {
+      type: Number,
+      default: 0
+    },
+    to: {
+      type: Number,
+      required: true
+    },
+    duration: {
+      type: Number,
+      required: true,
+      validator: value => value > 0
+    },
+    easing: {
+      type: String,
+      default: 'easeOutQuad'
+    },
+    precision: {
+      type: Number,
+      default: 3
+    },
+    shouldStart: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup (props) {
+    const number = ref('0')
+    const isRunning = ref(false)
+    const updateNumber = (tweenState) => {
+      number.value = Number(tweenState.x).toFixed(props.precision).toLocaleString()
+    }
+
+    const startAnimation = async () => {
+      if (isRunning.value) {
+        return
+      }
+
+      isRunning.value = true
+
+      const options = {
+        from: { x: props.from, y: 0 },
+        to: { x: props.to, y: 0 },
+        duration: props.duration,
+        easing: props.easing,
+        step: updateNumber
+      }
+
+      await tween(options)
+
+      number.value = Number(number.value).toLocaleString()
+      isRunning.value = false
+    }
+
+    watch(() => props.shouldStart,
+      () => {
+        if (!props.shouldStart) {
+          return
+        }
+        startAnimation()
+      })
+
+    return () => h('span', number.value)
+  }
+}

components/work/AnimatedNumber.vue

@@ -8,9 +8,9 @@
       class="flex flex-col xl:justify-around md:mx-16 xl:p-16"
     >
       <a
-        v-bind="bindUrl"
+        v-bind="boundUrl"
         target="_blank"
-        rel="noopener"
+        :rel="rel"
         class="text-rains-500 flex justify-center group sm:mt-8 lg:my-8 md:w-1/2"
         @click="logClick('img')"
       >
@@ -28,9 +28,9 @@
       </a>
       <div class="my-6 xl:px-6 xl:w-1/2">
         <a
-          v-bind="bindUrl"
+          v-bind="boundUrl"
           target="_blank"
-          rel="noopener"
+          :rel="rel"
           class="block text-rains-500 no-underline mx-6 md:px-6 mt-4 hover:underline transition-all"
           @click="logClick('heading')"
         ><h2 v-t="`work.projects.${slug}.title`" class="text-2xl font-semibold" /></a>
@@ -42,10 +42,9 @@
 </template>
 
 <script>
-import logClick from '~/mixins/logClick'
+import { computed } from '@vue/composition-api'
 
 export default {
-  mixins: [logClick],
   props: {
     slug: {
       type: String,
@@ -62,18 +61,35 @@ export default {
     svg: {
       type: [Boolean, Function],
       default: false
+    },
+    shouldFollow: {
+      type: Boolean,
+      default: false
     }
   },
-  computed: {
-    bindUrl () {
-      // Looks weird, but is needed to disable links if empty url is provided, because no href will be bound then
-      return this.url.length ? { href: `${this.url}?ref=developmint.de` } : {}
-    },
-    imageSources () {
-      return {
-        src: require(`~/assets/img/work/${this.slug}.jpg`),
-        srcset: `${require(`~/assets/img/work/${this.slug}@2x.jpg`)} 2x`
-      }
+  setup (props, context) {
+    const logClick = (eventName) => {
+      context.root.$ga.event({
+        eventCategory: 'click',
+        eventAction: `work preview: ${props.slug} - ${eventName}`
+      })
+    }
+
+    // Looks weird, but is needed to disable links if empty url is provided, because no href will be bound then
+    const boundUrl = computed(() => props.url.length ? { href: `${props.url}?ref=developmint.de` } : {})
+
+    const rel = computed(() => `noopener${props.shouldFollow ? '' : ' nofollow'}`)
+
+    const imageSources = computed(() => ({
+      src: require(`~/assets/img/work/${props.slug}.jpg`),
+      srcset: `${require(`~/assets/img/work/${props.slug}@2x.jpg`)} 2x`
+    }))
+
+    return {
+      logClick,
+      boundUrl,
+      imageSources,
+      rel
     }
   }
 }

components/work/WorkPreview.vue

@@ -0,0 +1,17 @@
+import { onMounted, onUnmounted } from '@vue/composition-api'
+
+export const useInterval = (intervalInSeconds, intervalAction) => {
+  let intervalListener = null
+
+  onMounted(() => {
+    intervalListener = setInterval(intervalAction, intervalInSeconds * 1000)
+  })
+
+  onUnmounted(() => {
+    if (!intervalListener) {
+      return
+    }
+
+    clearInterval(intervalListener)
+  })
+}

compositions/useInterval.js

@@ -184,7 +184,7 @@ export default {
         title: 'Addism',
         shortDescription: 'Addissm ist ein moderner und intuitiver Taschenrechner für den Mac. Seine Hauptfunktion' +
         ' ist es, dem Nutzer die gesamte Berechnung auf einen Blick zu zeigen. Weiterhin werden verschiedene' +
-        ' Exportfunktionalitäten und ein Nachtmodus geboten'
+        ' Exportfunktionalitäten und ein Nachtmodus geboten.'
       },
       itexia: {
         title: 'Itexia',

i18n/de.js

@@ -180,7 +180,7 @@ export default {
       addism: {
         title: 'Addism',
         shortDescription: 'A beautiful, structured and modern calculator for macOS with useful features including' +
-        ' the opportunity to export the calculation history in several ways, global shortcuts and a night mode'
+        ' the opportunity to export the calculation history in several ways, global shortcuts and a night mode.'
       },
       itexia: {
         title: 'Itexia',
@@ -192,14 +192,14 @@ export default {
         title: 'Hochschulinitiative Deutschland',
         shortDescription: 'Hochschulinitiative Deutschland is a German platform that provides great offers for' +
         ' students, including giveaways, seminars, and other goodies. We have created huge parts of the initial' +
-          ' homepage and have developed new features of the platform for quite some time.'
+        ' homepage and have developed new features of the platform for quite some time.'
       },
       'lichter-io': {
         title: 'Lichter.io',
         shortDescription: 'The personal website of Alex which is used as CV and portfolio page. Want to know more' +
         ' about how the website was created? No problem, the code is <a href="https://github.com/manniL/lichter.io"' +
         ' target="_blank" rel="noopener" class="text-developmint-500 hover:text-developmint-400 no-underline">open' +
-        ' source</a>'
+        ' source</a>.'
       },
       'nuxt': {
         title: 'Nuxt.js',

i18n/en.js

@@ -129,6 +129,7 @@ export default {
    * Nuxt plugins
    */
   plugins: [
+    '~/plugins/composition-api',
     '~/plugins/vue-prototype-extensions',
     '~/plugins/vue-scroll-directive.client',
     '~/plugins/vue-observe-visibility-directive.client'