- add vue-facing-decorator (replace vue-class-component and vue-property-decorator)

- npm updates (stabele axios version) + adaption in axios config
- remove maps route from src/router/index.ts

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@openfonts/open-sans_all": "^1.44.2",
-    "axios": "^0.27.2",
+    "axios": "^1.2.2",
     "class-transformer": "^0.5.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
@@ -19,11 +19,9 @@
     "qs": "^6.10.1",
     "rxjs": "^7.5.5",
     "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0",
+    "vue-facing-decorator": "^2.1.13",
     "vue-matomo": "^4.1.0",
-    "vue-property-decorator": "^9.1.2",
     "vue-router": "^4.0.12",
-    "xml2js": "^0.4.23",
     "xslt3": "^2.4.0"
   },
   "devDependencies": {

src/api/config.ts

@@ -2,7 +2,7 @@ import { AxiosRequestConfig } from "axios";
 import * as qs from "qs";
 
 export const axiosRequestConfiguration: AxiosRequestConfig = {
-    responseType: "text",
+    // responseType: "text",
     headers: {
         // "Content-Type": "text/plain",
         "Content-Type": "application/x-www-form-urlencoded",
@@ -11,5 +11,13 @@ export const axiosRequestConfiguration: AxiosRequestConfig = {
         // "Access-Control-Allow-Credentials": "true",
         // "Access-Control-Allow-Origin": "*",
     },
-    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
+    // paramsSerializer: {
+    //     indexes: null, // by default: false
+    // },
+
+    paramsSerializer: {
+        serialize: (params: Record<string, number>) => {
+            return qs.stringify(params, { arrayFormat: "repeat" });
+        },
+    },
 };

src/app.ts

@@ -1,5 +1,4 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Watch } from "vue-facing-decorator";
-import { Watch } from "vue-property-decorator";
 // import { RouteLocation } from "vue-router";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
@@ -26,7 +25,7 @@ import { VUE_APP_PORTAL } from "./constants";
 // import { ActiveFilterCategories } from "@/models/solr";
 
 // https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
-@Options({
+@Component({
     components: {
         HelloWorld,
         HomeViewComponent,

src/app2.ts

@@ -1,5 +1,4 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Watch } from "vue-facing-decorator";
-import { Watch } from "vue-property-decorator";
 // import { RouteLocation } from "vue-router";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
@@ -25,7 +24,7 @@ import { APP_URL, VUE_APP_PORTAL } from "./constants";
 // import { ActiveFilterCategories } from "@/models/solr";
 
 // https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
-@Options({
+@Component({
     components: {
         HelloWorld,
         HomeViewComponent,

src/components/HelloWorld/HelloWorld.ts

@@ -1,7 +1,7 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop } from "vue-facing-decorator";
-import { Prop } from "vue-property-decorator";
+// import { Prop } from "vue-property-decorator";
 
-@Options({
+@Component({
     name: "HelloWorld",
 })
 export default class HelloWorld extends Vue {

src/components/active-facet-category/ActiveFacetCategory.ts

@@ -1,16 +1,22 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
-import { Prop, Emit } from "vue-property-decorator";
+// import { Prop, Emit } from "vue-property-decorator";
 
-@Options({
+@Component({
     name: "ActiveFacetCategory",
 })
 export default class ActiveFacetCategory extends Vue {
     bar = "";
 
-    @Prop([Array])
+    // @Prop([Array])
+    @Prop({
+        type: Array<string>,
+    })
     filterItems!: string[];
 
-    @Prop([String])
+    // @Prop([String])
+    @Prop({
+        type: String,
+    })
     categoryName!: string;
 
     // @Prop([String])

src/components/face-category/FacetCategory.ts

@@ -1,9 +1,9 @@
 import { FacetItem } from "@/models/headers";
 // import { FilterItem } from "@/models/solr";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
-import { Prop, Emit } from "vue-property-decorator";
+// import { Prop, Emit } from "vue-property-decorator";
 
-@Options({
+@Component({
     name: "FacetCategory",
 })
 export default class FacetCategory extends Vue {
@@ -14,7 +14,10 @@ export default class FacetCategory extends Vue {
     @Prop()
     facetItems!: Array<FacetItem>;
 
-    @Prop([String])
+    // @Prop([String])
+    @Prop({
+        type: String,
+    })
     filterName!: string;
 
     get alias(): string {

src/components/map/map.component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop } from "vue-facing-decorator";
 // import { Prop, Emit } from "vue-property-decorator";
-import { Prop } from "vue-property-decorator";
+// import { Prop } from "vue-property-decorator";
 import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer, TileLayer, CRS } from "leaflet";
 // import { LayerOptions } from "./map-options";
 // import DatasetService from "../../services/dataset.service";
@@ -11,7 +11,7 @@ const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
 // const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://basemap.at" target="_blank">Basemap.at</a>, <a href="http://www.geologie.ac.at" target="_blank">Geologie.ac.at</a>';
 
-@Options({
+@Component({
     // selector: "app-map",
     // templateUrl: "map.component.html",
     name: "MapComponent",

src/components/simple-search/simple-search-component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "SimpleSearchComponent",
 })
 export default class SimpleSearchComponent extends Vue {

src/components/vs-input/vs-input.ts

@@ -1,16 +1,15 @@
 // import Vue from "vue";
-// import { Component, Prop } from 'vue-property-decorator';
 // import debounce from 'lodash/debounce';
 // import { DatasetService } from "../../services/dataset.service";
 import DatasetService from "../../services/dataset.service";
 import { SolrSettings } from "@/models/solr";
 // import { ref } from "vue";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
-import { Prop, Emit } from "vue-property-decorator";
+// import { Prop, Emit } from "vue-property-decorator";
 import { Dataset, Suggestion, SearchType } from "@/models/dataset";
 import { SOLR_HOST, SOLR_CORE } from "@/constants";
 
-@Options({
+@Component({
     name: "VsInput",
 })
 export default class VsInput extends Vue {

src/components/vs-result/vs-result.ts

@@ -1,8 +1,8 @@
 import { Dataset } from "@/models/dataset";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop } from "vue-facing-decorator";
-import { Prop } from "vue-property-decorator";
+// import { Prop } from "vue-property-decorator";
 
-@Options({
+@Component({
     name: "VsResult",
 })
 export default class VsResult extends Vue {

src/notes.txt

@@ -139,3 +139,18 @@ https://prettier.io/docs/en/cli.html
 
 =================================== xslt3
 npm install xslt3 --save
+
+
+
+=================================== vue-facing-decorator
+npm install --save vue-facing-decorator
+
+npm uninstall --save vue-class-component
+package.json:
+"vue-class-component": "^8.0.0-0",
+
+npm uninstall --save vue-property-decorator
+package.json:
+"vue-property-decorator": "^9.1.2",
+
+ npm uninstall --save xml2js

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 import HomeViewComponent from "@/views/home-view/home-view-component.vue";
 import HelpViewComponent from "@/views/help-view/help-view-component.vue";
-import MapViewComponent from "@/views/map-view/map-view.component.vue";
+// import MapViewComponent from "@/views/map-view/map-view.component.vue";
 import SearchViewComponent from "@/views/search-view/search-view-component";
 import ServiceViewComponent from "@/views/services-view/service-view-component.vue";
 import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
@@ -22,11 +22,11 @@ const routes = [
         name: "Help",
         component: HelpViewComponent,
     },
-    {
+    // {
-        path: "/map",
+    //     path: "/map",
-        name: "Map",
+    //     name: "Map",
-        component: MapViewComponent,
+    //     component: MapViewComponent,
-    },
+    // },
     {
         path: "/search/:display?/:type?",
         name: "Search",

src/services/dataset.service.ts

@@ -9,8 +9,8 @@ import { VUE_APP_PORTAL } from "@/constants";
 // import { deserialize, instanceToInstance } from "class-transformer";
 import { deserialize } from "class-transformer";
 // import { OAI_DATASETS } from "./mock-oai-datasets";
-import { OaiDataset, OaiPerson } from "@/models/oai";
+// import { OaiDataset, OaiPerson } from "@/models/oai";
-import xml2js from "xml2js";
+// import xml2js from "xml2js";
 
 class DatasetService {
     // for the autocomplete search
@@ -183,132 +183,132 @@ class DatasetService {
         return dataset;
     }
 
-    public getOaiDatasets(): Observable<OaiDataset[]> {
+    // public getOaiDatasets(): Observable<OaiDataset[]> {
-        const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
+    //     const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
-        const oaiDatasets = api.get<string>(apiUrl).pipe(
+    //     const oaiDatasets = api.get<string>(apiUrl).pipe(
-            map(
+    //         map(
-                (response: string) => {
+    //             (response: string) => {
-                    // const parser = new DOMParser();
+    //                 // const parser = new DOMParser();
-                    // const xmlDoc: XMLDocument = parser.parseFromString(response, "application/xml");
+    //                 // const xmlDoc: XMLDocument = parser.parseFromString(response, "application/xml");
 
-                    // const xslDoc = parser.parseFromString(this.xsl, "application/xml");
+    //                 // const xslDoc = parser.parseFromString(this.xsl, "application/xml");
-                    // const xsltProcessor = new XSLTProcessor();
+    //                 // const xsltProcessor = new XSLTProcessor();
-                    // xsltProcessor.importStylesheet(xslDoc);
+    //                 // xsltProcessor.importStylesheet(xslDoc);
-                    // console.log(xmlDoc);
+    //                 // console.log(xmlDoc);
-                    // const xmlDom = xsltProcessor.transformToDocument(xmlDoc);
+    //                 // const xmlDom = xsltProcessor.transformToDocument(xmlDoc);
 
-                    // const serializer = new XMLSerializer();
+    //                 // const serializer = new XMLSerializer();
-                    // const html = serializer.serializeToString(xmlDom.documentElement);
+    //                 // const html = serializer.serializeToString(xmlDom.documentElement);
-                    // console.log(html);
+    //                 // console.log(html);
 
-                    // const arrOai = new Array<OaiDataset>();
+    //                 // const arrOai = new Array<OaiDataset>();
+    //                 // return arrOai;
+    //                 const arrOai = this.parseXML(response);
     //                 return arrOai;
-                    const arrOai = this.parseXML(response);
+    //                 // .then((data) => {
-                    return arrOai;
+    //                 //   return data;
-                    // .then((data) => {
+    //                 // });
-                    //   return data;
+    //             },
+    //             // (error: string) => this.errorHandler(error),
+    //         ),
+    //     );
+    //     // const oaiDatasets = of(OAI_DATASETS);
+
+    //     // this.messageService.add('HeroService: fetched heroes');
+    //     return oaiDatasets;
+    // }
+
+    // private parseXML(xmlStr: string): Array<OaiDataset> {
+    //     // let k = "";
+    //     const arr: OaiDataset[] = [];
+    //     const domParser = new DOMParser();
+    //     const doc = domParser.parseFromString(xmlStr, "application/xml");
+    //     const records = doc.getElementsByTagName("ListRecords")[0];
+    //     // // const rt = xmlNode.resumptionToken;
+    //     // for (let i = 0; i < records.length; i++) {
+    //     //     console.log(records[i].getAttribute("name"));
+    //     // }
+
+    //     const parser: xml2js.Parser = new xml2js.Parser({
+    //         trim: true,
+    //         explicitArray: false,
+    //         ignoreAttrs: false,
+    //         // mergeAttrs: true,
     //     });
-                },
+    //     parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
-                // (error: string) => this.errorHandler(error),
+    //         const xmlNode = result.ListRecords;
-            ),
-        );
-        // const oaiDatasets = of(OAI_DATASETS);
-
-        // this.messageService.add('HeroService: fetched heroes');
-        return oaiDatasets;
-    }
-
-    private parseXML(xmlStr: string): Array<OaiDataset> {
-        // let k = "";
-        const arr: OaiDataset[] = [];
-        const domParser = new DOMParser();
-        const doc = domParser.parseFromString(xmlStr, "application/xml");
-        const records = doc.getElementsByTagName("ListRecords")[0];
     //         // const rt = xmlNode.resumptionToken;
-        // for (let i = 0; i < records.length; i++) {
+    //         for (const rNode in xmlNode.record) {
-        //     console.log(records[i].getAttribute("name"));
+    //             const item = xmlNode.record[rNode];
-        // }
 
-        const parser: xml2js.Parser = new xml2js.Parser({
+    //             const dc = item.metadata.resource;
-            trim: true,
+    //             const t = dc.titles.title;
-            explicitArray: false,
+    //             const id = dc.identifier._;
-            ignoreAttrs: false,
-            // mergeAttrs: true,
-        });
-        parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
-            const xmlNode = result.ListRecords;
-            // const rt = xmlNode.resumptionToken;
-            for (const rNode in xmlNode.record) {
-                const item = xmlNode.record[rNode];
 
-                const dc = item.metadata.resource;
+    //             const lang = "en"; //dc.titles.title.attributes("xml",True)->lang;
-                const t = dc.titles.title;
+    //             let title: string;
-                const id = dc.identifier._;
+    //             if (lang == "en" && t.length > 1) {
-
+    //                 title = t[1]._;
-                const lang = "en"; //dc.titles.title.attributes("xml",True)->lang;
-                let title: string;
-                if (lang == "en" && t.length > 1) {
-                    title = t[1]._;
-                } else {
-                    title = t[0]._;
-                }
-
-                let creator = "";
-                if (dc.creators.creator instanceof Array) {
-                    dc.creators.creator.forEach((person: OaiPerson) => {
-                        creator += person.creatorName + "; ";
-                    });
-                } else {
-                    creator += dc.creators.creator.creatorName._;
-                }
-
-                let contributor = "";
-                if (dc.contributors) {
-                    if (dc.contributors.contributor instanceof Array) {
-                        dc.contributors.contributor.forEach((person: OaiPerson) => {
-                            contributor += person.contributorName + "; ";
-                        });
-                    } else {
-                        contributor += dc.contributors.contributor.contributorName;
-                    }
-                }
-
-                // ?.map((u: any) => u.creatorName._).join("; ");
-                // foreach ($dc->creators->creator as $c) {
-                //     foreach ($c->creatorName as $d) {
-                //         if (count(explode(',',$d)) > 1) {
-                //             $creator .= explode(',',$d)[0] . ', ' . substr(explode(',',$d)[1],1,1) . '; ';
     //             } else {
-                //             $creator .= explode(',',$d)[0];
+    //                 title = t[0]._;
     //             }
 
+    //             let creator = "";
+    //             if (dc.creators.creator instanceof Array) {
+    //                 dc.creators.creator.forEach((person: OaiPerson) => {
+    //                     creator += person.creatorName + "; ";
+    //                 });
+    //             } else {
+    //                 creator += dc.creators.creator.creatorName._;
+    //             }
+
+    //             let contributor = "";
+    //             if (dc.contributors) {
+    //                 if (dc.contributors.contributor instanceof Array) {
+    //                     dc.contributors.contributor.forEach((person: OaiPerson) => {
+    //                         contributor += person.contributorName + "; ";
+    //                     });
+    //                 } else {
+    //                     contributor += dc.contributors.contributor.contributorName;
     //                 }
     //             }
 
-                const north = dc.geoLocations.geoLocation.geoLocationBox.northBoundLatitude;
+    //             // ?.map((u: any) => u.creatorName._).join("; ");
-                const east = dc.geoLocations.geoLocation.geoLocationBox.eastBoundLongitude;
+    //             // foreach ($dc->creators->creator as $c) {
-                const south = dc.geoLocations.geoLocation.geoLocationBox.southBoundLatitude;
+    //             //     foreach ($c->creatorName as $d) {
-                const west = dc.geoLocations.geoLocation.geoLocationBox.westBoundLongitude;
+    //             //         if (count(explode(',',$d)) > 1) {
+    //             //             $creator .= explode(',',$d)[0] . ', ' . substr(explode(',',$d)[1],1,1) . '; ';
+    //             //         } else {
+    //             //             $creator .= explode(',',$d)[0];
+    //             //         }
 
-                const subject = dc.subjects.subject.map((u: any) => u._).join(", ");
+    //             //     }
+    //             // }
 
-                const oaiDataset = {
+    //             const north = dc.geoLocations.geoLocation.geoLocationBox.northBoundLatitude;
-                    doi: id,
+    //             const east = dc.geoLocations.geoLocation.geoLocationBox.eastBoundLongitude;
-                    title: title,
+    //             const south = dc.geoLocations.geoLocation.geoLocationBox.southBoundLatitude;
-                    creator: creator,
+    //             const west = dc.geoLocations.geoLocation.geoLocationBox.westBoundLongitude;
-                    contributor: contributor,
+
-                    subject: subject,
+    //             const subject = dc.subjects.subject.map((u: any) => u._).join(", ");
-                    north: north,
+
-                    south: south,
+    //             const oaiDataset = {
-                    east: east,
+    //                 doi: id,
-                    west: west,
+    //                 title: title,
-                } as OaiDataset;
+    //                 creator: creator,
-                arr.push(oaiDataset);
+    //                 contributor: contributor,
-            }
+    //                 subject: subject,
-            // resolve(arr);
+    //                 north: north,
-        });
+    //                 south: south,
-        return arr;
+    //                 east: east,
-    }
+    //                 west: west,
+    //             } as OaiDataset;
+    //             arr.push(oaiDataset);
+    //         }
+    //         // resolve(arr);
+    //     });
+    //     return arr;
+    // }
 
     // private prepareOAI(xml: any) : Array<OaiDataset> {
     //     //

src/views/contact-view/contact-view-component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "ContactViewComponent",
     // components: {
     //     VsInput,

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop } from "vue-facing-decorator";
 import { DbDataset } from "@/models/dataset";
-import { Prop } from "vue-property-decorator";
+// import { Prop } from "vue-property-decorator";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
 import dayjs from "dayjs";
@@ -10,7 +10,7 @@ import VsInput from "@/components/vs-input/vs-input.vue";
 import { Suggestion } from "@/models/dataset";
 import { VUE_APP_PORTAL } from "@/constants";
 
-@Options({
+@Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,

src/views/help-view/help-view-component.ts

@@ -1,7 +1,7 @@
-import { Options, Vue } from "vue-class-component";
 // import { Prop } from "vue-property-decorator";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "HelpViewComponent",
 })
 export default class HelpViewComponent extends Vue {

src/views/home-view/home-view-component.ts

@@ -1,8 +1,8 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 import VsInput from "@/components/vs-input/vs-input.vue";
 import { Suggestion } from "@/models/dataset";
 
-@Options({
+@Component({
     name: "HomeViewComponent",
     components: {
         VsInput,

src/views/imprint-view/imprint-view-component.ts

@@ -1,6 +1,7 @@
-import { Options, Vue } from "vue-class-component";
+// import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "ImprintViewComponent",
     // components: {
     //     VsInput,

src/views/map-view/map-view.component.ts

@@ -1,4 +1,4 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 import MapComponent from "@/components/map/map.component.vue";
 // import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
 import { MapOptions } from "leaflet";
@@ -7,7 +7,7 @@ import { MapOptions } from "leaflet";
 // const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 // const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
 
-@Options({
+@Component({
     name: "MapViewComponent",
     components: {
         MapComponent,

src/views/oai-view/oai-view-component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "OaiViewComponent",
 })
 export default class OaiViewComponent extends Vue {}

src/views/search-view/search-view-component.ts

@@ -1,5 +1,5 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue, Prop } from "vue-facing-decorator";
-import { Prop } from "vue-property-decorator";
+// import { Prop } from "vue-property-decorator";
 import VsInput from "@/components/vs-input/vs-input.vue";
 import VsResult from "@/components/vs-result/vs-result.vue";
 import FacetCategory from "@/components/face-category/facet-category.vue";
@@ -13,7 +13,7 @@ import { ActiveFilterCategories } from "@/models/solr";
 import { SOLR_HOST, SOLR_CORE } from "@/constants";
 import { Pagination } from "@/models/pagination";
 
-@Options({
+@Component({
     name: "SearchViewComponent",
     components: {
         VsInput,

src/views/services-view/service-view-component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "ServiceViewComponent",
 })
 export default class ServiceViewComponent extends Vue {}

src/views/sitelink-view/sitelink-view-component.ts

@@ -1,9 +1,9 @@
 import { Subscription } from "rxjs";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 import DatasetService from "../../services/dataset.service";
 import { DbDataset } from "@/models/dataset";
 
-@Options({
+@Component({
     name: "SitelinkViewComponent",
 })
 export default class SitelinkViewComponent extends Vue {

src/views/terms-view/terms-view-component.ts

@@ -1,6 +1,6 @@
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
-@Options({
+@Component({
     name: "TermsViewComponent",
     // components: {
     //     VsInput,