Errors in Vue SPA Template

#1

Hi,

I am getting Typescript errors in the Vue SPA Template. I have a feeling that it must have something to do with my specific IDE configuration, but I cannot seem to be able to troubleshoot the issue.

Steps to reproduce :

  1. Select Vue App from ServiceStackVS Templates (1.0.36 installed)
  2. run npm install

the following error occurs in the post-install :

image.png1009×356 46.8 KB

I am running :

  • Visual Studio 2017 (15.3.3)
  • Typescript 2.5 (behaviour is the same in 2.3)
  • npm 3.10.10
  • node 6.11

in addition to this, the typescript compiler appears to be unable to find referenced modules (perhaps because of the .vue extension)?:

#2

I’ve upgraded the Vue App project to work with the latest Vue, TypeScript and Bootstrap deps which should resolve this issue that’s now available in the latest v1.0.37 that’s now published on MSDN.

All SPA templates have been upgraded to use the latest TypeScript + Bootstrap as well.

#3

you guys never cease to amaze…
Thank you for the speedy and qualified response, Demis.

1 Like
#4

hey guys,

I’m still getting Typescript compilation errors on my side (related to the dynamic properties in the extended Vue instance), after installing the Vue template (1.0.37) and running the install task.

Are you getting a clean build (post installation) on your side? Could this be related to the version of Typescript I’m using or the typescript configuration? The error is only happening during the webpack build (intellisense is showing no errors in the Home.vue file) :

#5

It looks like they’ve made some breaking changes with the latest Vue type definitions. Basically you’re fighting with Vue’s TypeScript definitions. The Vue website contains some info on using TypeScript with Vue in their docs.

I’ve refactored the Vue templates to use the nicer and declarative vue-property-decorator which saves having to declare explicit ComponentOptions<MyComponent> interfaces for each Vue component, e.g:

import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { client } from '../shared';
import { Hello } from '../dtos';

@Component
export default class HomeComponent extends Vue {
    @Prop() name: string;
    @Prop() result: string;

    activated() { this.nameChanged(this.name); }

    @Watch('name')
    onNameChanged(value:string, oldValue:string) {
        this.nameChanged(value);
    }

    async nameChanged(name: string) {
        if (name) {
            let request = new Hello();
            request.name = name;
            let r = await client.get(request);
            this.result = r.result;
        }
    }
}

This change is available in v1.0.38 that I’ve just published to MSDN.

#6

you are a gentleman and a scholar - thanks!

1 Like
#7

works like a bomb - thank again Demis!