Flow: Is there some way to check .vue files?

[sqal]

Vue's single file component looks like this:

<template>
  <div></div>
</template>

<script>
  /* @flow */

  import Events from 'utils/Events';

  export default {
    data() {
      return {};
    },
    mounted() {
      // flow doesn't report the error
      Events.on(null, () => {});
    },
  };
</script>

<style lang="scss">

</style>

I added module.file_ext=.vue to my flowconfig but Flow still doesn't show any errors from that file. Is it even possible to enable it in .vue files?

[blake-newman]

Second this move.

Current solution is to do this:

/* @flow
<template>
  <div></div>
</template>
*/
// <script>
  import Events from 'utils/Events';

  export default {
    data() {
      return {};
    },
    mounted() {
      // flow doesn't report the error
      Events.on(null, () => {});
    },
  };
// </script>
/*
<style lang="scss">

</style>
*/

However this is dirty. As flow can't currently handle preprocessors it is a little tricky.

[blake-newman]

Possible solution: https://github.com/facebook/flow/issues/1515

[blake-newman]

Also note the hacky solution breaks eslint so fun and games on that regard

[blake-newman]

@sqal There is a more generic issue filed here: https://github.com/facebook/flow/issues/2218

[mickdekkers]

I've not tried it myself, but this might help: https://alligator.io/vuejs/components-flow/

[gsdnano]

Along with the above link, works with the following code. module.file_ext=.vue in the .flowconfig seems to make the difference in flow properly acknowledging import of modules from other .vue files.

In Atom ide you'll need to restart ide after changing flowconfig or simply delete/save/reapply the /* @flow */ and wait.

.vue file

<template>
...
</template>

<script>
/* @flow */
import layoutHeader from './components/layout/header.vue';
import store from './Store';
...
</script>

<style lang="scss">
... //lintable via https://github.com/fsblemos/lint-sass-vue
</style>

.flowconfig

[include]
src

[ignore]
.*/build/.*
.*/dist/.*

[options]
module.file_ext=.vue
module.file_ext=.js

.eslintrc

{
  "extends": [
    "vue"
  ],
  "plugins": [
    "html",
    "flowtype-errors",
    "vue"
  ],
  "rules": {
    "flowtype-errors/show-errors": 2
  }
}

.babelrc

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        "transform-async-to-generator", 
        ["transform-es2015-for-of", {
            "loose": true
        }],
        ["transform-class-properties"],
        "babel-plugin-transform-class-properties",
        "babel-plugin-syntax-flow",
        "babel-plugin-transform-flow-strip-types"
    ]
}

[asolove]

Now that there's a specific workaround in this issue and also a general issue logged for js in html files, I think this issue can be closed. Let me know if I missed something else that should stay open in this.

[flybayer]

I can confirm that @mickdekkers and @gsdnano last comments have at long last got Flow working in my .vue files!! 🎉

[willybrauner]

Is it possible to use flow in vue template file if you split your template and JS :

app.vue

<!-- "app" VUE TEMPLATE -->
<template>
    <div class="app"></div>
</template>

<!-- "app" JS IMPORT -->
<script src="./app.js"></script>

Now, you can use flow in your app JS file :

// @flow
export default {
// ...
}

[giacomoalonzi]

it's possibile to assign any type alias to vue props in component?

[willybrauner]

You can type natively any props on this way :

export default {
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object
  }
}

check the Vue documentation

[giacomoalonzi]

Thank you @willybrauner for reply. I know that, what I mean is if it's possibile to use things like Enum or type Alias. eg

// @flow
type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};

and

export default {
  props: {
    title: String,
    author: MyObject
  }
}

Thanks.