CoffeeScript2 support for the projects created with @vue/cli.
With built-in:
cache-loader
thread-loader
babel-loader
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
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>
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'
}
}
}
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:
-
Coffeescript ESLint Support
https://github.com/helixbass/eslint-plugin-coffee -
Ignore Coffeescript Syntax
ESLint (following traditional HTML) usestype="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 usetype="text/coffeescript"
to identify itself. Therefore, in your Vue components which are using Coffeescript, using bothlang
andtype
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>