VuePress Community

# vuepress-plugin-typescript

# Installation

npm install -D vuepress-plugin-typescript typescript

# Usage

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'vuepress-plugin-typescript',
      {
        tsLoaderOptions: {
          // All options of ts-loader
        },
      },
    ],
  ],
}

# Configs

# tsLoaderOptions

  • type: Object
  • default: {}

Loader Options of ts-loader. See docs of ts-loader

# Supported Features

# TS in Markdown

As we know, with the power of VuePress, we can write Vue in Markdown.

This plugin allows you to write Vue in TypeScript in Markdown.

Input

{{ msg }}
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data: () => ({
    msg: 'Hello, TypeScript in Markdown!',
  }),
})
</script>

Output

Hello, TypeScript in Markdown!

# TS in Vue SFC

This plugins allows you to write .vue files in TypeScript, including:

See the source code of this docs.

# enhanceApp.ts

VuePress supports App Level Enhancements by .vuepress/enhanceApp.js / theme/enhanceApp.js.

This plugin allows you to use enhanceApp.ts instead of enhanceApp.js.

See the test cases of this plugin.

WARNING

Remember to create .vuepress/shims-vue.d.ts file if you want to import .vue files in your enhanceApp.ts or other .ts files:

// .vuepress/shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

# Types Definitions

You might meet some problems about the types of VuePress, e.g. missing the types definition of this.$themeConfig.

If you want to get the right types definition, you can try to use vuepress-types.

← vuepress-plugin-zooming →