@vue/cli-plugin-typescript

What is @vue/cli-plugin-typescript?

@vue/cli-plugin-typescript is a Vue CLI plugin that adds TypeScript support to Vue.js projects. It allows developers to write Vue components and other code in TypeScript, providing type safety and other benefits of TypeScript.

What are @vue/cli-plugin-typescript's main functionalities?

TypeScript Support

This feature allows you to add TypeScript support to your Vue.js project. By including the plugin in your Vue CLI configuration, you can start writing your Vue components and other code in TypeScript.

module.exports = {
  plugins: [
    '@vue/cli-plugin-typescript'
  ]
};

TypeScript Configuration

This feature provides a default TypeScript configuration file (tsconfig.json) that is optimized for Vue.js projects. It includes settings for module resolution, strict type checking, and paths for resolving modules.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

TypeScript in Vue Components

This feature allows you to write Vue components using TypeScript. By setting the script tag's lang attribute to 'ts', you can leverage TypeScript's type checking and other features within your Vue components.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
});
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Other packages similar to @vue/cli-plugin-typescript

typescript

TypeScript is a language for application-scale JavaScript development. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. While @vue/cli-plugin-typescript integrates TypeScript into Vue projects, TypeScript itself is the core language that provides the type safety and other features.

vue-class-component

vue-class-component is a library that allows you to define Vue components using TypeScript decorators. It provides a more class-based approach to defining components, which can be more familiar to developers coming from other object-oriented languages. It complements @vue/cli-plugin-typescript by providing a different syntax for writing components.

vue-property-decorator

vue-property-decorator is a library that works with vue-class-component to provide decorators for Vue properties, such as @Prop, @Watch, and @Emit. It enhances the TypeScript experience in Vue projects by providing a more declarative way to define component properties and methods. It can be used alongside @vue/cli-plugin-typescript to provide additional functionality.

README

@vue/cli-plugin-typescript

typescript plugin for vue-cli

Uses TypeScript + ts-loader + fork-ts-checker-webpack-plugin for faster off-thread type checking.

Configuration

TypeScript can be configured via tsconfig.json.

Since 3.0.0-rc.6, typescript is now a peer dependency of this package, so you can use a specific version of TypeScript by updating your project's package.json.

This plugin can be used alongside @vue/cli-plugin-babel. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets.

Caching

cache-loader is enabled by default and cache is stored in <projectRoot>/node_modules/.cache/ts-loader.

Parallelization

thread-loader is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting parallel: false in vue.config.js.

parallel should be set to false when using Typescript in combination with non-serializable loader options, such as regexes, dates and functions. These options would not be passed correctly to ts-loader which may lead to unexpected errors.

Installing in an Already Created Project

vue add typescript

Injected webpack-chain Rules

• config.rule('ts')
• config.rule('ts').use('ts-loader')
• config.rule('ts').use('babel-loader') (when used alongside @vue/cli-plugin-babel)
• config.rule('ts').use('cache-loader')
• config.plugin('fork-ts-checker')

Changelog

5.0.0-beta.1 (2021-05-14)

:rocket: New Features

• @vue/cli-service
  • #6472 Feature: add "tags" part to htmlWebpackPlugin (@TimmersThomas)
• @vue/cli-plugin-unit-mocha
  • #6471 feat: support webpack 5 in unit-mocha plugin (@sodatea)

:boom: Breaking Changes

• @vue/cli-ui
  • #6443 fix!: keep project name validation rules in sync between UI and CLI (@sodatea)

:bug: Bug Fix

• @vue/cli-service
  • #6470 fix(SafariNomoduleFixPlugin): use RawSource instead of a plain object (@KaelWD)
• @vue/cli-plugin-typescript
  • #6456 fix(typescript): add missing dependencies and require.resolve compiler (@merceyz)
• @vue/cli-ui
  • #6443 fix!: keep project name validation rules in sync between UI and CLI (@sodatea)
• @vue/cli-plugin-unit-jest
  • #6454 fix: fix jest migrator dependency merging (@sodatea)

:house: Internal

• @vue/cli-ui
  • #6446 ci: fix random failing ui tests (@sodatea)

Committers: 4

• Haoqun Jiang (@sodatea)
• Kael (@KaelWD)
• Kristoffer K. (@merceyz)
• Thomas Timmers (@TimmersThomas)