Using Vue components in a TypeScript file

Question

Using Vue components in a TypeScript file

I recently started using Vue.js with TypeScript and stumbled upon this GitHub repository.

While working on it, I encountered an issue where I received an error while trying to import a Vue Single Component File from TypeScript. My development environment is Visual Studio Code. The error message is provided 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)

https://i.sstatic.net/40kqB.png

javascript typescript vue.js

Answer 1

Answer №1

According to Alex Jover:

If you're getting an error in your editor pointing to the line import App from './App' in the main.js file because it can't find the App module, you can resolve this by creating a vue-shim.d.ts file in your project with the following content:

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

and update it to :

import App from './App.vue'

instead of

import App from './App'

Answer 2

According to Alex Jover:

If you're getting an error in your editor pointing to the line import App from './App' in the main.js file because it can't find the App module, you can resolve this by creating a vue-shim.d.ts file in your project with the following content:

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

and update it to :

import App from './App.vue'

instead of

import App from './App'

Answer 3

Answer №2

For more information, take a look at this vue-class-component. In essence, you need to include appendTsSuffixTo: [/\.vue$/] in the options for ts-loader and esModule: true in the options for vue-loader.

// 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
    }
  }
]}}

It's possible that I may have overlooked something else.

Answer 4

For more information, take a look at this vue-class-component. In essence, you need to include appendTsSuffixTo: [/\.vue$/] in the options for ts-loader and esModule: true in the options for vue-loader.

// 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
    }
  }
]}}

It's possible that I may have overlooked something else.

Answer 5

Answer №3

Encountered a similar issue with a vue.d.ts file due to multiple declarations within the same file. To resolve this, I had to separate them as follows:

In vue 3, the vue.d.ts needs to be placed in a directory specified 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
}

Additionally, when attempting to assign global properties to my vue instance for intellisense support across all components, I faced an issue where importing .vue files into typescript led to editor complaints. To address this, I created a separate vue-runtime.d.ts file:

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

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

By doing so, customFunction was successfully registered on all components!

Answer 6

Encountered a similar issue with a vue.d.ts file due to multiple declarations within the same file. To resolve this, I had to separate them as follows:

In vue 3, the vue.d.ts needs to be placed in a directory specified 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
}

Additionally, when attempting to assign global properties to my vue instance for intellisense support across all components, I faced an issue where importing .vue files into typescript led to editor complaints. To address this, I created a separate vue-runtime.d.ts file:

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

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

By doing so, customFunction was successfully registered on all components!

Answer 7

Answer №4

To make adjustments when using the vue-cli, modify vue-loader-conf.js in the following way:

var tools = require('./tools')
var settings = require('../settings')
var isProd = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: tools.styleLoaders({

    sourceMap: isProd
      ? settings.build.productionSourceMap
      : settings.dev.cssSourceMap,
    extract: isProd, esModule: true
  }), esModule: true
}

Answer 8

To make adjustments when using the vue-cli, modify vue-loader-conf.js in the following way:

var tools = require('./tools')
var settings = require('../settings')
var isProd = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: tools.styleLoaders({

    sourceMap: isProd
      ? settings.build.productionSourceMap
      : settings.dev.cssSourceMap,
    extract: isProd, esModule: true
  }), esModule: true
}

Answer 9

Answer №5

Just a heads up, if you enable declaration generation in your tsconfig.json file, you can create .d.ts files for your components. Once generated, make sure to move them to the source directory and marvel at what you've accomplished!

Answer 10

Just a heads up, if you enable declaration generation in your tsconfig.json file, you can create .d.ts files for your components. Once generated, make sure to move them to the source directory and marvel at what you've accomplished!

Using Vue components in a TypeScript file

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Hide the background when the modal appears

What are some ways to implement Material UI's Chip array to function similar to an Angular Chip Input?

Show only the date from a dateTime in Vue

Control the start and stop of an Express.js app in Node.js using PHP

Customize the color of the label and underline in a Reactjs material-ui TextField when the field input

TypeScript - Indexable Type

Find the Nearest Value with Jquery and Swap Out the Div

Save the HTML elements in an object and then use the ng-include directive to include the template

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

Navigating Through Secondary Navigation with Ease

React maintains the state of just a single element within an array at a time

AngularJS Issue: The function 'FirstCtrl' is missing and is undefined

What could be the reason for my Angular component not updating its value?

Retrieve various data types through a function's optional parameter using TypeScript

Identifying when several asynchronous JavaScript $.ajax requests have finished

When utilizing drag and drop in HTML5, the items.webkitGetAsEntry() method is not available

Is there a way to concatenate arrays without using the Array.flat method?

The validation process is malfunctioning

What are the best practices for utilizing an array of routes?

Using jQuery, identify when a key has been pressed within a three.js environment