feat(docs): rewrite installation/ConstructorOptions.vue in TS (#399)

Rewrites `src/pages/installation/ConstructorOptions.vue` in TypeScript.
Also renames `src/pages/installation/api/constructor-options.(js → ts).

Fixes the issue that Vite complained about the missing `buefy` package,
which was not actually used. This was caused by the code snippets
`ConstructorOptions.vue`, which Vite conufsed with the actual code and
tried to translate them. Moves these code snippets to a separate
TypeScript file `usage/constructor-options.ts`.

packages/docs/src/pages/installation/ConstructorOptions.vue

@@ -16,37 +16,33 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
+    import ApiView from '@/components/ApiView.vue'
+    import CodeView from '@/components/CodeView.vue'
     import { preformat } from '@/utils'
+
     import api from './api/constructor-options'
+    import {
+        usageBundle,
+        usageCdn,
+        usageComponents,
+    } from './usage/constructor-options'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            CodeView
+        },
         data() {
             return {
                 api,
-                usageBundle: `
-                Vue.use(Buefy, {
-                    defaultIconPack: 'fas',
-                    // ...
-                })`,
-                usageComponents: `
-                import { ConfigProgrammatic, Table, Input } from 'buefy'
-
-                Vue.use(Table)
-                Vue.use(Input)
-                ConfigProgrammatic.setOptions({
-                    defaultIconPack: 'fas',
-                    // ...
-                })`,
-                usageCdn: `
-                // When using CDN, Buefy automatically attaches itself on Vue
-                Vue.prototype.$buefy.config.setOptions({
-                    defaultIconPack: 'fas',
-                    // ...
-                })
-                `
+                usageBundle,
+                usageComponents,
+                usageCdn,
             }
         },
         methods: { preformat }
-    }
+    })
 </script>

packages/docs/src/pages/installation/usage/constructor-options.ts

@@ -0,0 +1,27 @@
+// Code snippets used in the `ConstructorOptions` component.
+//
+// Vite may confuse these examples with the legitimate code and try to compile
+// them, if they are in the component (.vue) file.
+
+export const usageBundle = `
+Vue.use(Buefy, {
+    defaultIconPack: 'fas',
+    // ...
+})`
+
+export const usageComponents = `
+import { ConfigProgrammatic, Table, Input } from 'buefy'
+
+Vue.use(Table)
+Vue.use(Input)
+ConfigProgrammatic.setOptions({
+    defaultIconPack: 'fas',
+    // ...
+})`
+
+export const usageCdn = `
+// When using CDN, Buefy automatically attaches itself on Vue
+Vue.prototype.$buefy.config.setOptions({
+    defaultIconPack: 'fas',
+    // ...
+})`