Quasar: CoffeeScript/Typescript etc. support in Vue single file components

[laurentpayot]

So far I love Quasar, it's amazing. But to really dive into it I need to figure out how to use CoffeeScript (or TypeScript or LiveScript) in Vue single file components with Quasar.

I need to use Vue components like so (see #98 for pug support):

<template lang="pug">
.layout-padding
    h1 Hello!
</template>

<script lang="coffee">
module.exports =
    data: -> {}
</script>

<style lang="stylus">
</style>

It seems to be quite complicated with ESlint and stuff and 3 webpack configs.
@rstoenescu could you tell us here or in the docs how to add javascript transpilers step by step?

[rstoenescu]

No need to open another issue.
npm install *-loader. example: pug-loader, coffee-loader etc

If you need to require/import different type of files, like '.coffee' etc, then:
in 'build/webpack.base.conf.js' add an entry for your loader. example:

{
   test: /\.coffee$/,
   loader: 'coffee',
   exclude: /node_modules/
}

This has to do with webpack, not Quasar. You think documentation should include this?

[laurentpayot]

I did that but I'm getting ESlint errors.
With the example above I get:

ERROR in ./src/components/Hello.vue

  ✘  http://eslint.org/docs/rules/  Parsing error: Unexpected token data  
  /home/laurent/quasar/myapp/src/components/Hello.vue:8:2
    data: -> {}
     ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/null
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  22.9 kB       0       
webpack: bundle is now VALID.

[rstoenescu]

Paste your <script> tag here pls. data: -> {} is indeed not valid.

[laurentpayot]

Here is my <script> tag:

<script lang="coffee">
module.exports =
  data: -> {}
</script>

This is valid coffee syntax. With normal 2 spaces indentation. I get:

ERROR in ./src/components/Hello.vue

  ✘  http://eslint.org/docs/rules/  Parsing error: Unexpected token :  
  /home/laurent/quasar/myapp/src/components/Hello.vue:8:7
    data: -> {}
         ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/null
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  22.9 kB       0       
webpack: bundle is now VALID.

I did $ npm install coffee-script --save-dev (previous error message was with npm install coffee, a different transpiler) and $ npm install coffee-loader --save-dev.
Looks like eslint is processing the script before the coffeescript transpilation…

[rstoenescu]

Aah, I see now. You need to disable eslint if you are using coffeescript. Remove the module.preLoaders block in your webpack.base.config.js.

[rstoenescu]

Reference from vue-loader repo: https://github.com/vuejs/vue-loader/issues/162

[laurentpayot]

Thanks @rstoenescu, it is working now 👍
I guess the trick of removing the module.preLoaders block in your webpack.base.config.js is worth mentioning in the docs for CoffeeScript users ;)

[rstoenescu]

Will do. Thx for opening this!

[laurentpayot]

@rstoenescu note that coffeescript 1.11 now allows ES2015 imports.

You can allow this in .coffee files (not yet in Vue components) by adding a babel loader like so:

      {
         test: /\.coffee$/,
         loaders: ['babel', 'coffee'],
         exclude: /node_modules/
      },

It may be useful to coffeescript users…

[rstoenescu]

Will update docs along releasing v0.8 with this information. Thanks!