Perhaps something in the same vein as the React+TS logo? - https://github.com/typescript-cheatsheets/react.

Please get in touch.

• https://twitter.com/youyuxi/status/1341177621502173191
• https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md#with-typescript

I've been thinking about how to best organise the docs. Currently there is clear divide between Vue 3 & Vue 2 I think it may be better to split the docs by Vue APIs for the following benefits.

• ✅ This follows a similar structure to the Vue docs.
• ✅ API examples are grouped together.
• ✅ Should make navigating this cheatsheet easier for users (I know it would help me!).

However

• 😕 We may have to explain some subtle caveats, gotachas during this transition between v2.x -> 3.x.

So I'd like to propose the following structure for this repo to look something like this, with some ideas of sections within each page:

README.md

• Table of contents
• Intro to cheatsheet
• Overarching topics
• Links to other resources

composition-api.md

• Intro, setting up, why use composition API with TS.
• typings for props,ref ,reactive, computed and other hooks.

options-api.md

• Intro, setting up, why use options API, caveats of using TS with options API.
• typings for data, methods, computed and other properties.

class-components.md

• Intro, setting up, why use class component & decorators + TS.
• typings for data, methods, computed and other properties.

Later down the line we can also start to have separate pages for Vuex and Vue Router potentially?

1. Use class-based components, not Vue's proprietary data shape that gets passed to Vue.extend. (at least for Vue 2)

2. For Vuex support (types on your action / mutation payloads), use https://github.com/championswimmer/vuex-module-decorators.

3. Put "vetur.experimental.templateInterpolationService": true in your VS Code settings to get TypeScript analysis on your <template> in .vue files. This only works inside VS Code with Vetur installed - vue-cli-service build won't show you type errors in your <template>.

4. Don't forget that @someEvent='someEventHandler' isn't type safe. This is the only major area where Vue and TypeScript don't play nice and you end up with a black hole of untyped data coming into your application.

5. Unrelated to Vue - verify the data coming into your app using IO-TS: https://github.com/gcanti/io-ts

6. For linting, use ESLint + Prettier. Rather than wrestling with the setup, just use the Vue CLI (or run vue ui) and then choose to add TypeScript support to your project when initially creating it and choose ESLint + Prettier. @ts-ignore is banned by default. To change that, modify your eslintConfig.rules in your package.json file. Here's mine:

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 2020
    },
    "rules": {
      "no-debugger": 1,
      "@typescript-eslint/ban-ts-ignore": 0,
      "no-var": 1,
      "@typescript-eslint/no-array-constructor": 1,
      "@typescript-eslint/camelcase": 1,
      "@typescript-eslint/no-use-before-define": 0,
      "prefer-const": 1,
      "@typescript-eslint/no-inferrable-types": 1,
      "@typescript-eslint/no-this-alias": 1,
      "@typescript-eslint/no-unused-vars": 1,
      "@typescript-eslint/no-explicit-any": 0,
      "@typescript-eslint/no-empty-function": 0,
      "no-console": 0,
      "@typescript-eslint/no-non-null-assertion": 0
    }
  }

i don't do much Vue so this is really wide open - please let me know if you're keen on maintaining this!