Importing Vue components in TypeScript file

Question

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)

Sebastian · Accepted Answer · 2020-07-22 10:27:55Z

38

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'

edited Jul 22, 2020 at 10:27

Sebastian

1,56515 silver badges23 bronze badges

answered Sep 20, 2017 at 7:23

arnaud ruant

3893 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

winklerrr Over a year ago

What exactly is happening here? Could you please provide an explanation?

HMD Over a year ago

@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

winklerrr Over a year ago

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.)?

dev · Accepted Answer · 2017-02-23 00:27:43Z

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.

edited Feb 23, 2017 at 0:27

answered Feb 22, 2017 at 21:09

dev

4113 silver badges18 bronze badges

1 Comment

Leonardo Raele Over a year ago

What about Vite? :/

user3413723 · Accepted Answer · 2022-11-17 20:53:01Z

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!

paul van bladel · Accepted Answer · 2017-03-09 17:44:18Z

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
}

answered Mar 9, 2017 at 17:44

paul van bladel

1,72314 silver badges18 bronze badges

Comments

doun · Accepted Answer · 2017-12-28 23:26:29Z

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!

answered Dec 28, 2017 at 23:26

doun

793 bronze badges

Collectives™ on Stack Overflow

Importing Vue components in TypeScript file

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related