feat(docs): rewrite VueBreakpointMixin extension page in TS (#407)

Rewrites the documentation for the VueBreakpointMixin extension in the
`src/pages/extensions/vuebreakpointmixin` folder in TypeScript. Also
includes overlooked Vue 2 → 3 migration.

In `example/ExVueBreakpointMixin.vue`:
- Imports `VueBreakpointMixin` as `any`, because it does not provide
  types. A newly introduced type `VueBreakpointMixinType` supplements
  the types of the computed values of `VueBreakpointMixin`.
- Adds the `onMounted` and `beforeUnmount` methods to
  `VueBreakpointMixin`, which are aliases of the `mounted` and
  `beforeDestroy` methods respectively, so that `VueBreakpointMixin`
  conforms to the Vue 3 API

In `VueBreakpointMixin.vue`:
- Wraps `ExVueBreakpointMixin` in `shallowRef` to address the warning
  about making a component reactive

A tip for TypeScript migration:
- Explicitly import and register Buefy components so that they are
  type-checked. Note that no type-checking is performed for globally
  registered components.

packages/docs/src/pages/extensions/vuebreakpointmixin/VueBreakpointMixin.vue

@@ -19,15 +19,26 @@
   </div>
 </template>
 
-<script>
-import ExVueBreakpointMixin from './example/ExVueBreakpointMixin'
+<script lang="ts">
+import { defineComponent, shallowRef } from 'vue'
+
+import { BMessage } from '@ntohq/buefy-next'
+
+import CodeView from '@/components/CodeView.vue'
+import Example from '@/components/Example.vue'
+import ExVueBreakpointMixin from './example/ExVueBreakpointMixin.vue'
 import ExVueBreakpointMixinCode from './example/ExVueBreakpointMixin.vue?raw'
 
-export default {
+export default defineComponent({
+  components: {
+    BMessage,
+    CodeView,
+    Example
+  },
   name: 'VueBreakpointMixin',
   data: () => ({
-    ExVueBreakpointMixin,
+    ExVueBreakpointMixin: shallowRef(ExVueBreakpointMixin),
     ExVueBreakpointMixinCode,
   }),
-}
+})
 </script>

packages/docs/src/pages/extensions/vuebreakpointmixin/example/ExVueBreakpointMixin.vue

@@ -8,13 +8,32 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { DefineComponent } from 'vue';
+// @ts-expect-error - vue-breakpoint-mixin does not provide types so far
 import VueBreakpointMixin from 'vue-breakpoint-mixin';
 
-export default {
+// TODO: ask vue-breakpoint-mixin to support Vue 3
+VueBreakpointMixin.onMounted = VueBreakpointMixin.mounted;
+VueBreakpointMixin.onBeforeUnmount = VueBreakpointMixin.beforeDestroy;
+
+// TODO: ask vue-breakpoint-mixin to provide types
+type VueBreakpointMixinType = DefineComponent<
+  {}, // P(rops)
+  {}, // B (raw bindings)
+  {}, // D(ata)
+  {
+    isMobile: () => boolean,
+    isTablet: () => boolean,
+    isDesktop: () => boolean
+  } // C(omputed)
+>
+
+export default defineComponent({
   name: 'ExVueBreakpointMixin',
-  mixins: [VueBreakpointMixin],
-}
+  mixins: [VueBreakpointMixin as VueBreakpointMixinType],
+})
 </script>
 
 <style>
@@ -31,4 +50,4 @@ export default {
   align-items: center;
   justify-content: center;
 }
-</style>
+</style>