Writing Vue.js Components with Flow

Starting from vue-cli’s webpack-simple template, there are nine extra dependencies to install. Here’s what each of them does:

Babel:

• babel-plugin-syntax-flow - Adds support for flow syntax in Babel.
• babel-plugin-transform-class-properties - Adds support for class properties and static methods
• babel-plugin-transform-flow-strip-types - Removes type annotations from source files before transpiling with Babel.

Eslint: (optional)

• eslint - Eslint. It’s pretty much the de-facto linter for JS, with integrations for a variety of editors and IDEs as well. If you’re not using this now, you’ll want to start using it.
• babel-eslint - Patches Eslint to use Babel’s parser for parsing source files.
• eslint-plugin-html - Allows Eslint to handle HTML files. (ie. Only lints stuff inside script tags.)
• eslint-plugin-flowtype-errors - Passes flow errors through Eslint, and to your editor’s eslint plugin if you have one.
• eslint-plugin-vue - Opinionated utilities for Eslint with Vue.
• eslint-config-vue - Opinionated config for Eslint with Vue.

Flow:

• flow-bin - The Flow typechecker.

Install via Yarn or NPM:

# Yarn
$ yarn add \
  babel-plugin-syntax-flow \
  babel-plugin-transform-class-properties \
  babel-plugin-transform-flow-strip-types \
  eslint \
  babel-eslint \
  eslint-plugin-html \
  eslint-plugin-flowtype-errors \
  eslint-plugin-vue \
  eslint-config-vue \
  flow-bin \
-D

# NPM
$ npm install \
  babel-plugin-syntax-flow \
  babel-plugin-transform-class-properties \
  babel-plugin-transform-flow-strip-types \
  eslint \
  babel-eslint \
  eslint-plugin-html \
  eslint-plugin-flowtype-errors \
  eslint-plugin-vue \
  eslint-config-vue \
  flow-bin \
--save-dev

.babelrc

Add the babel plugins to the end of your .babelrc file.

{
  ...
  "plugins": [
    "babel-plugin-transform-class-properties",
    "babel-plugin-syntax-flow",
    "babel-plugin-transform-flow-strip-types"
  ]
}

.eslintrc

Set up your .eslintrc file like so:

{
  "parser": "babel-eslint",

  "plugins": [
    "html",
    "flowtype-errors"
  ],

  "extends": [
    "vue"
  ],

  "rules": {
    "flowtype-errors/show-errors": 2
  }
}

.flowconfig

And finally, create a .flowconfig file in your project root directory. It can be empty, just make sure it’s present.

You can now use Flow in your .js files or .vue single-file components just by adding the /* @flow */ annotation to the top of each file or script section.

Assuming your editor or IDE has the proper eslint packages installed, you should now have real-time error checking and positional annotations whenever there is an error or warning.

/* @flow */

const doSomethingStupid(stringArg) {
  // Flow should show an error here, "The operand of an arithmetic operation must be a number."
  return stringArg * 3109;
}

console.log(doSomethingStupid(`I'm stringy`))

<template>
  <p>I'm made with Flow!</p>
</template>

<script>
/* @flow */

const randomThing: string = 'Boop!'

export default {
  created() {
    console.log(randomThing)
  }
}
</script>

And there you have it! Nothing else in your toolchain has to change.

There’s plenty more to learn about Flow. If you’re not familiar with it already, a great next step would be the Flow Docs. Enjoy!