How to implement flowtype in Nuxt.js

Question

I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax.

.flowconfig

[include]
pages/**/.*
components/**/.*
layouts/**/.*
apiRoutes/.*
store/.*
utils/.*


[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*
.*/.nuxt/.*

[libs]
./flow/

[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'
module.name_mapper='^@/\(.*\)$' -> '<PROJECT_ROOT>/\1'

i've added all the neccessary babel and eslint packages.

.babelrc
{
  "presets": [
    ["env", { "modules": false }],
    "stage-2",
    ["es2015", {"modules": false }],
    "flow-vue"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "syntax-flow",
    "transform-flow-strip-types"
  ],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

---

.eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    jquery: true
  },
  extends: [
    'standard',
    'plugin:flowtype/recommended'
    // 'plugin:vue/recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'flowtype-errors',
    'flowtype'
  ],
  // add your custom rules here
  rules: {
    'flowtype-errors/show-errors': 2,
    // allow paren-less arrow functions
    'arrow-parens': 0,
    'semi': ["error", "always"],
    // allow async-await
    'generator-star-spacing': 0
  },
  globals: {}
}

On running npm run dev, it doesnt parse flowtype syntax

Answer 1

I suggest following the instructions on the flow website to set up Babel. In particular there is a preset, so you shouldn't need to configure individual rules. Then you'll actually need to run Babel (again, instructions are on the website). Once you have run Babel, you should be able to run the code it outputs in Node.