example: Refacto CoffeeScript example

This commit is contained in:
Sébastien Chopin 2018-01-05 09:43:35 +01:00
parent 8182deddfa
commit 910184301a
22 changed files with 48 additions and 145 deletions

View File

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

View File

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

View File

@ -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')
}
})
}

View File

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

View File

@ -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"
}
}

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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

View File

@ -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: {}
}

View File

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

View File

@ -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.**

View File

@ -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.**

View File

@ -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.**

View File

@ -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.**

View File

@ -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"
}
}

View File

@ -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.**

View File

@ -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.**

View File

@ -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.**