Coffee lang in vue CLI 3

Question

I've created project with vue create and edited default App.vue like so:

<script lang="coffee">
import HelloWorld from './components/HelloWorld.vue'
export default
  name: 'app'
  components:
    HelloWorld
</script>

and got an error

 ERROR  Failed to compile with 1 errors                                     8:39:21 PM

 error  in ./src/App.vue?vue&type=script&lang=coffee&

Module parse failed: Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
| import HelloWorld from './components/HelloWorld.vue'
| export default
>   name: 'app'
|   components:
|     HelloWorld

 @ ./src/App.vue?vue&type=script&lang=coffee& 1:0-170 1:186-189 1:191-358 1:191-358
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.88.208:8080/sockjs-node (webpack)/
hot/dev-server.js ./src/main.js

my package.json

{
  "name": "vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "*"
  },
  "devDependencies": {
    "@vue/cli-service": "*",
    "vue-template-compiler": "*",
    "coffee": "*",
    "coffee-loader": "*",
    "pug": "*",
    "pug-loader": "*",
    "pug-plain-loader": "*",
    "stylus": "*",
    "stylus-loader": "*",
    "vue-loader": "*"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

pug and stylus works like a charm, but with coffee I have some problem ~_~

Answer 1

With Vue CLI, you can simply run the following command (which invokes the Vue CLI CoffeeScript plugin) to update your project with CoffeeScript support:

vue add coffee

This would install the following packages:

+    "coffee-loader": "^0.9.0",
+    "coffeescript": "^2.3.2",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "vue-cli-plugin-coffee": "^0.1.0",

Note your package.json references coffee (a test utility for Node.js), but it should be coffeescript.

Also, note your code needs a tweak to resolve a CoffeeScript error:

export default
  name: 'app'
  components: {  // <-- use brackets for components
    HelloWorld
  }

demo