Type checking is a tricky concept in Vue. While it’s easy to do in plain script files, Vue single-file components are a much trickier beast to get working. While some choose TypeScript, perhaps for class-based components, others find TypeScript’s heavyweight nature and difficulty to integrate with common tools to not be worth the effort. Facebook’s Flow is a typechecker that fits much better into a standard webpack + babel + eslint toolchain, and is commonly used in React projects. Once you get it set up, it just works!
Getting Flow to work with Vue is a bit tricky as it involves several dependencies and minor configuration tweaks to make them all work properly together, so let’s start out by installing those first.
Starting from vue-cli’s webpack-simple template, there are nine extra dependencies to install. Here’s what each of them does:
Babel:
Eslint: (optional)
Flow:
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
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"
]
}
Set up your .eslintrc file like so:
{
"parser": "babel-eslint",
"plugins": [
"html",
"flowtype-errors"
],
"extends": [
"vue"
],
"rules": {
"flowtype-errors/show-errors": 2
}
}
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!
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up