vue-cli-plugin-coffee

vue-cli-plugin-coffee

CoffeeScript2 support for the projects created with @vue/cli.

With built-in:

• cache-loader
• thread-loader
• babel-loader

Installation

According to this you are able to install community plugins as follows:

vue add coffee

ESLINT Note: Please visit "EsLint Integration" Section below on how to make this plugin work with eslint (else, it will return errors on coffeescript code). If you don't need eslint, you can just uninstall it.

# ONLY if you don't need eslint
npm remove @vue/cli-plugin-eslint

Common usage

Usually you write SFC like this

<template>
  <button @click="onclick">
    <slot></slot>
  </button>
</template>

<script lang="coffee">
  export default
    name: "Button"
    props:
      onclick:
        type: Function
        required: false
</script>

Entries

According to this you can add entries using your vue.config.js like so:

// vue.config.js
module.exports = {
  configureWebpack: {
    entry: {
      'new-entry': 'path/to/new/entry.coffee'
    }
  }
}

Eslint Integration

If you're using ESLint, note that vue-loader uses lang="coffee" to identify components which are using Coffeescript, but lang="coffee" is not recognizable for ESLint.

There are 2 ways on how you can make this plugin work with eslint:

1. Coffeescript ESLint Support
   https://github.com/helixbass/eslint-plugin-coffee

2. Ignore Coffeescript Syntax
   ESLint (following traditional HTML) uses type="xxx" to identify the type of scripts. As long as a <script> tag has any type other than javascript, ESLint would mark the script as non-javascript, and skips linting it. Coffeescript’s convention is to use type="text/coffeescript" to identify itself. Therefore, in your Vue components which are using Coffeescript, using both lang and type to avoid ESLint warnings. Example:

   <script lang="coffee" type="text/coffeescript">
   console.log "This code is ignored by eslint, but executed by the coffeescript compiler"
   </script>