1. vue-typescript-import-dts
TypeScript declaration file that allows using 'import' with *.vue files
vue-typescript-import-dts
Package: vue-typescript-import-dts
Created by: locoslab
Last modified: Tue, 28 Jun 2022 20:38:05 GMT
Version: 4.0.0
License: MIT
Downloads: 5,958
Repository: https://github.com/locoslab/vue-typescript-import-dts

Install

npm install vue-typescript-import-dts
yarn add vue-typescript-import-dts

vue-typescript-import-dts Build Status npm version

TypeScript declaration file that allows using import with *.vue files. The primary use case is a bundler environment like webpack. The file itself consists of 4 lines; this package is just for convenience.

Usage

This package requires TypeScript 2 and Vue.js 2, which ships with new type definitions in the Vue.js package itself. Both must be installed separately in your project, which allows choosing a suitable version.

  1. Install

    • npm install vue-typescript-import-dts --save-dev
  2. Import (one of):

    • Import this module before the import of a .vue file: import 'vue-typescript-import-dts'
    • ... or include it in the types field of your tsconfig.json to globally allow using import with .vue files in your project:
 {
    "compilerOptions": {
        "types": ["vue-typescript-import-dts"],
...

Then, it is possible to import a *.vue file:

  • import Child from './child.vue'

Note: TypeScript will not type check, parse, or even verify the existence of the .vue file: this project only instructs the TypeScript compiler to assume the import of 'something' that ends with .vue succeeds and is a Vue object.

Shameless Plug

If you are using TypeScript 2 together with Vue.js 2, you might also be interested in

  • vue-typescript-jest to test Vue.js components and TypeScript sources using Jest
  • vue-jest-utils to simplify snapshot testing of Vue.js components using Jest and html2jade

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin