Module '"vue"' has no exported member 'ComponentOptions'.

[hoppities]

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "lib",
    "isolatedModules": false,
    "experimentalDecorators": true,
    "declaration": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "resources/**/*.ts"
  ],
  "exclude": [
  	"node_modules"
  ],
  "compileOnSave": false
}

I'm trying to get a custom component to build, but I keep getting errors with vue-class-component.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
    name: "contact"
})
export default class ContactComponent extends Vue {
    mounted(): void {
        console.log("mounted");
    }
    data(): any {
        return {
            test: "hello"
        }
    }
    public submitForm(formData: any): any {
        console.log(formData);
    }
}
</script>

// import VueResource from 'vue-resource';
import ContactComponent from '../js/components/Contact.vue';
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
// declare var require: any;

require('../js/bootstrap');

// Vue.use(VueResource);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

new Vue({
    el: '#app',
    components: { ContactComponent }
});

I get a bunch of cannot find namespace 'Vue' in declarations.d.ts and util.d.ts in the vue class component node_modules folder.

Any thoughts?

[hoppities]

Looks like this may have been a node typings issue. I removed the vue typings, and the problem went away.

[ktsn]

Could you provide self-contained reproduction by github repo?
Or you already solved your problem?

[ktsn]

Closing for inactivity.

[IvanYur4enk0]

Please reopen this ticket, I have the same error during build in visual studio 2017.

[HerringtonDarkholme]

Could you provide self-contained reproduction by github repo?

[IvanYur4enk0]

@HerringtonDarkholme, a new ticket was opened: #131 (comment), clear sample attached to the new ticket.

[jeff-pang]

Having the same issue. Suddenly my build broke a few days ago without any changes, complaining error TS1192: Module '"vue"' has no default export. Then I added 'allowSyntheticDefaultImports':true which fixed it but then encounterModule '"vue"' has no exported member 'ComponentOptions' instead

[barakbd-bluevine]

I am getting an error when trying to export an interface from a .vue file and import into a .ts file.

Module '"*.vue"' has no exported member 'AlertProp'

Alert.vue

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  @Component
  export default class Alert extends Vue {
  } 

  export interface AlertProp {
    show: boolean
  }
</script>

alert.ts (this is the file shows the error - cannot import AlertProp interface)

import { AlertProp } from '@/components/Alert.vue'

[yunyu950908]

@barakbd-bluevine hi, I got the same problem, could you tell me how to solve this problem?

[barakbd-bluevine]

I didn't. I just moved the export to a .ts file.
You could probably change the module declaration for .vue and it will fix the issue, I just didn't figure it out yet.

[aviau]

Same issue here! Willing to help debug if there is anything that I can do.

[ktsn]

Please don't post random type error in the closed issue. If you found any bugs caused by vue-class-component, open a new issue with a minimal and self-contained reproduction.