27

I have been trying to use Vue.js with TypeScript and I came across this repo.

I faced issues here that I am getting error while importing Vue Single Component File from TypeScript. I am using Visual Studio Code. Please see error below.

main.ts:

// The Vue build version to load with the 'import' command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import * as Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

VS Code error:

1 ERROR 
• main.ts
[ts] Cannot find module './App'. (4 17)

Issue of importing App.vue in main.ts with visual studio code

Paolo
  • 20,112
  • 21
  • 72
  • 113
Kapil Garg
  • 3,100
  • 5
  • 19
  • 19

5 Answers5

39

From Alex Jover:

If your editor is yelling at the line import App from './App' in main.js file about not finding the App module, you can add a vue-shim.d.ts file to your project with the following content:

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

and write :

import App from './App.vue'

instead of

import App from './App'
Sebastian
  • 1,321
  • 9
  • 21
arnaud ruant
  • 391
  • 3
  • 5
  • 3
    What exactly is happening here? Could you please provide an explanation? – winklerrr Sep 17 '20 at 16:02
  • 1
    @winklerrr in case you haven't figure it out, that module declaration tells typescript to assume every _.vue_ file as a `Vue` type. Thus when you import any _.vue_ file into a _.ts_ file, it is considered of type `Vue`. Not sure what Vue does with the declaration, but I guess you can declare the module in any `.d.ts` file in root directory since TS will process all `.d.ts` files automatically – HMD Jan 28 '21 at 09:23
  • 1
    But so, every class that I'm trying to import has type `interface` (because `Vue` is an interface itself). How can I load a class properly (to access its class variables, etc.)? – winklerrr Feb 21 '21 at 19:33
3

Check out vue-class-component. Basically, you must add appendTsSuffixTo: [/\.vue$/] to ts-loader's options and esModule: true to vue-loader's options.

// webpack.config.js

{ modules: { rules: [
  {
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      esModule: true
    }
  }
]}}

I may have missed something else.

dev
  • 413
  • 3
  • 18
1

Had this issue even with a vue.d.ts because I had multiple declarations in the same file. Had to split them up like this:

In vue 3 this is the vue.d.ts that has to be somewhere in a path that is included in your tsconfig.json.

// vue.d.ts
declare module '*.vue' {
    import { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

Also I wanted to set global properties on my vue instance and have them available in any component via intellisense. After adding the following code to my vue.d.ts file, the editor complained when I imported .vue files into typescript. So I had to add a separate vue-runtime.d.ts file, or it wouldn't work:

// vue-runtime.d.ts
import '@vue/runtime-core'

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        customFunction: (val: number) => string;
    }
}

Then customFunction will be registered on all components!

user3413723
  • 11,147
  • 6
  • 55
  • 64
0

When using the vue-cli, adapt vue-loader-conf.js as follows:

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({

    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction, esModule: true
  }), esModule: true
}
paul van bladel
  • 1,663
  • 14
  • 18
0

FYI, you can generate . d.ts file for your components by turn on declaration generate in tsconfig. json, copy them to the source dir, see what you've got!

doun
  • 79
  • 3