https://github.com/artelydev/vue-cli-plugin-coffee

:coffee: This extends your vue-cli project with a CoffeeScript2 support
https://github.com/artelydev/vue-cli-plugin-coffee

coffeescript coffeescript2 vue vue-cli vue-cli-plugin webpack

Last synced: 3 months ago
JSON representation

:coffee: This extends your vue-cli project with a CoffeeScript2 support

• Host: GitHub
• URL: https://github.com/artelydev/vue-cli-plugin-coffee
• Owner: artelydev
• License: mit
• Created: 2018-09-29T23:04:52.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-16T17:24:40.000Z (5 months ago)
• Last Synced: 2024-09-16T21:29:47.206Z (5 months ago)
• Topics: coffeescript, coffeescript2, vue, vue-cli, vue-cli-plugin, webpack
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-cli-plugin-coffee
• Size: 178 KB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-cli-plugin-coffee

CoffeeScript2 support for the projects created with [@vue/cli](https://github.com/vuejs/vue-cli).

With built-in:

* `cache-loader`

* `thread-loader`

* `babel-loader`

## Installation

According to [this](https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project) you are able to install community plugins as follows:

```shell

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.

```shell

# ONLY if you don't need eslint

npm remove @vue/cli-plugin-eslint

```

## Common usage

Usually you write SFC like this

```vue

  

    

  

  export default

    name: "Button"

    props:

      onclick:

        type: Function

        required: false

```

## Entries

According to [this](https://cli.vuejs.org/config/#configurewebpack) you can add entries using your `vue.config.js` like so:

```javascript

// 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 `` 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:

```vue

<script lang="coffee" type="text/coffeescript">

  console.log "This code is ignored by eslint, but executed by the coffeescript compiler"

```