example: Refacto CoffeeScript example

.eslintignore

@@ -2,3 +2,4 @@ app
 node_modules
 dist
 .nuxt
+examples/coffeescript/pages/index.vue

examples/coffeescript/README.md

@@ -1,6 +1,6 @@
-# with-coffee
+# CoffeeScript
 
-> Nuxt.js project
+> Nuxt.js project with CoffeeScript
 
 ## Build Setup
 

examples/coffeescript/modules/coffeescript.js

@@ -0,0 +1,23 @@
+module.exports = function () {
+  // Add .coffee extension for store, middleware and more
+  this.nuxt.options.extensions.push('coffee')
+  // Extend build
+  const coffeeLoader = {
+    test: /\.coffee$/,
+    loader: 'coffee-loader'
+  }
+  this.extendBuild(config => {
+    // Add CoffeeScruot loader
+    config.module.rules.push(coffeeLoader)
+    // Add CoffeeScript loader for vue files
+    for (let rule of config.module.rules) {
+      if (rule.loader === 'vue-loader') {
+        rule.options.loaders.coffee = coffeeLoader
+      }
+    }
+    // Add .coffee extension in webpack resolve
+    if (config.resolve.extensions.indexOf('.coffee') === -1) {
+      config.resolve.extensions.push('.coffee')
+    }
+  })
+}

examples/coffeescript/nuxt.config.js

@@ -3,7 +3,7 @@ module.exports = {
   ** Headers of the page
   */
   head: {
-    title: 'with-coffee',
+    title: 'Nuxt with CoffeeScript',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -18,16 +18,7 @@ module.exports = {
   */
   loading: { color: '#3B8070' },
   /*
-  ** Build configuration
+  ** Modules
   */
-  extensions: ['coffee'],
-  build: {
-    extend (config, ctx) {
-      config.resolve.extensions.push('.ts')
-      config.module.rules.push({
-        test: /\.coffee$/,
-        loader: 'coffee-loader'
-      })
-    }
-  }
+  modules: ['~/modules/coffeescript']
 }

examples/coffeescript/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "coffeescript",
+  "version": "1.0.0",
+  "description": "Nuxt.js with CoffeeScript",
+  "author": "Alex Ananiev <alex.ananiev.r@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "devDependencies": {
+    "coffee-loader": "^0.8.0",
+    "coffeescript": "^2.0.1"
+  }
+}

examples/with-coffee/.editorconfig

@@ -1,13 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_size = 2
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

examples/with-coffee/.eslintrc.js

@@ -1,16 +0,0 @@
-module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  env: {
-    browser: true,
-    node: true
-  },
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // add your custom rules here
-  rules: {},
-  globals: {}
-}

examples/with-coffee/.gitignore

@@ -1,11 +0,0 @@
-# dependencies
-node_modules
-
-# logs
-npm-debug.log
-
-# Nuxt build
-.nuxt
-
-# Nuxt generate
-dist

examples/with-coffee/assets/README.md

@@ -1,8 +0,0 @@
-# ASSETS
-
-This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/assets#webpacked
-
-**This directory is not required, you can delete it if you don't want to use it.**

examples/with-coffee/components/README.md

@@ -1,6 +0,0 @@
-# COMPONENTS
-
-The components directory contains your Vue.js Components.
-Nuxt.js doesn't supercharge these components.
-
-**This directory is not required, you can delete it if you don't want to use it.**

examples/with-coffee/layouts/README.md

@@ -1,8 +0,0 @@
-# LAYOUTS
-
-This directory contains your Application Layouts.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/views#layouts
-
-**This directory is not required, you can delete it if you don't want to use it.**

examples/with-coffee/middleware/README.md

@@ -1,9 +0,0 @@
-# MIDDLEWARE
-
-This directory contains your Application Middleware.
-The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/routing#middleware
-
-**This directory is not required, you can delete it if you don't want to use it.**

examples/with-coffee/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "with-coffee",
-  "version": "1.0.0",
-  "description": "Nuxt.js with CoffeeScript",
-  "author": "Alex Ananiev <alex.ananiev.r@gmail.com>",
-  "private": true,
-  "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "precommit": "npm run lint"
-  },
-  "dependencies": {
-    "nuxt": "latest"
-  },
-  "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "coffee-loader": "^0.8.0",
-    "coffeescript": "^2.0.1",
-    "eslint": "^4.3.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-html": "^3.1.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.1.1",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^3.0.1"
-  }
-}

examples/with-coffee/plugins/README.md

@@ -1,8 +0,0 @@
-# PLUGINS
-
-This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/plugins
-
-**This directory is not required, you can delete it if you don't want to use it.**

examples/with-coffee/static/README.md

@@ -1,11 +0,0 @@
-# STATIC
-
-This directory contains your static files.
-Each file inside this directory is mapped to /.
-
-Example: /static/robots.txt is mapped as /robots.txt.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/assets#static
-
-**This directory is not required, you can delete it if you don't want to use it.**

examples/with-coffee/store/README.md

@@ -1,10 +0,0 @@
-# STORE
-
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
-Creating a index.js file in this directory activate the option in the framework automatically.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/vuex-store
-
-**This directory is not required, you can delete it if you don't want to use it.**