diff --git a/examples/web-worker/.eslintrc.js b/examples/web-worker/.eslintrc.js new file mode 100644 index 0000000000..32617b7df2 --- /dev/null +++ b/examples/web-worker/.eslintrc.js @@ -0,0 +1,21 @@ +module.exports = { + root: true, + env: { + browser: true, + node: true + }, + parserOptions: { + parser: 'babel-eslint' + }, + extends: [ + // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention + // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. + 'plugin:vue/strongly-recommended' + ], + // required to lint *.vue files + plugins: [ + 'vue' + ], + // add your custom rules here + rules: {} +} diff --git a/examples/web-worker/.gitignore b/examples/web-worker/.gitignore new file mode 100644 index 0000000000..7ee6115053 --- /dev/null +++ b/examples/web-worker/.gitignore @@ -0,0 +1,11 @@ +# dependencies +node_modules + +# logs +npm-debug.log + +# Nuxt build +.nuxt + +# Nuxt generate +dist diff --git a/examples/web-worker/README.md b/examples/web-worker/README.md new file mode 100644 index 0000000000..aa88a7c0db --- /dev/null +++ b/examples/web-worker/README.md @@ -0,0 +1,26 @@ +# web-worker + +> Nuxt.js project + +In nuxt 1.4 and below you have to create a production build to use web workers. + +## Build Setup + +``` bash +# install dependencies +$ npm install # Or yarn install + +# serve with hot reload at localhost:3000 +# nuxt 1.4 and below does not support web workers in dev mode +$ npm run dev + +# build for production and launch server +# in nuxt 1.4 and below you have to create a production build to use web workers +$ npm run build +$ npm start + +# generate static project +$ npm run generate +``` + +For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). diff --git a/examples/web-worker/assets/README.md b/examples/web-worker/assets/README.md new file mode 100644 index 0000000000..c67cf2e260 --- /dev/null +++ b/examples/web-worker/assets/README.md @@ -0,0 +1,8 @@ +# 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.** diff --git a/examples/web-worker/assets/js/Example.worker.js b/examples/web-worker/assets/js/Example.worker.js new file mode 100644 index 0000000000..eb74bfad6a --- /dev/null +++ b/examples/web-worker/assets/js/Example.worker.js @@ -0,0 +1,17 @@ +// // block for `time` ms, then return the number of loops we could run in that time: +function expensive(time) { + let start = Date.now(), + count = 0 + while (Date.now() - start < time) count++ + return count +} + +// Respond to message from parent thread +self.addEventListener('message', (event) => { + console.log('worker', event.data) + + if (event.data.action === 'expensive' && event.data.time) { + // Post data to parent thread + self.postMessage(expensive(Number(event.data.time))) + } +}) diff --git a/examples/web-worker/components/AppLogo.vue b/examples/web-worker/components/AppLogo.vue new file mode 100644 index 0000000000..8885e9498a --- /dev/null +++ b/examples/web-worker/components/AppLogo.vue @@ -0,0 +1,79 @@ + + + diff --git a/examples/web-worker/components/README.md b/examples/web-worker/components/README.md new file mode 100644 index 0000000000..d7768ddb5f --- /dev/null +++ b/examples/web-worker/components/README.md @@ -0,0 +1,6 @@ +# 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.** diff --git a/examples/web-worker/layouts/README.md b/examples/web-worker/layouts/README.md new file mode 100644 index 0000000000..83d09caee8 --- /dev/null +++ b/examples/web-worker/layouts/README.md @@ -0,0 +1,8 @@ +# 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.** diff --git a/examples/web-worker/layouts/default.vue b/examples/web-worker/layouts/default.vue new file mode 100644 index 0000000000..6d8b86b457 --- /dev/null +++ b/examples/web-worker/layouts/default.vue @@ -0,0 +1,58 @@ + + + diff --git a/examples/web-worker/nuxt.config.js b/examples/web-worker/nuxt.config.js new file mode 100644 index 0000000000..a05beaa98f --- /dev/null +++ b/examples/web-worker/nuxt.config.js @@ -0,0 +1,49 @@ +module.exports = { + /* + ** Headers of the page + */ + head: { + title: 'web-worker', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: 'Nuxt.js project' } + ], + link: [ + { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } + ] + }, + /* + ** Customize the progress bar color + */ + loading: { color: '#3B8070' }, + plugins: [ + { src: '~/plugins/inject-ww', ssr: false } // web workers are only available client-side, hence ssr: false + ], + /* + ** Build configuration + */ + build: { + /* + ** Run ESLint on save + */ + extend (config, { isDev, isClient }) { + if (isDev && isClient) { + config.module.rules.push({ + enforce: 'pre', + test: /\.(js|vue)$/, + loader: 'eslint-loader', + exclude: /(node_modules)/ + }) + } + + if (isClient) { // web workers are only available client-side + config.module.rules.push({ + test: /\.worker\.js$/, // this will pick up all .js files that ends with ".worker.js" + loader: 'worker-loader', + exclude: /(node_modules)/ + }) + } + } + } +} diff --git a/examples/web-worker/package.json b/examples/web-worker/package.json new file mode 100644 index 0000000000..97043593ea --- /dev/null +++ b/examples/web-worker/package.json @@ -0,0 +1,19 @@ +{ + "name": "web-worker", + "description": "Demo web workers in nuxt.js", + "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": "^1.4.0" + }, + "devDependencies": { + "worker-loader": "^1.1.1" + } +} diff --git a/examples/web-worker/pages/README.md b/examples/web-worker/pages/README.md new file mode 100644 index 0000000000..b007071639 --- /dev/null +++ b/examples/web-worker/pages/README.md @@ -0,0 +1,7 @@ +# PAGES + +This directory contains your Application Views and Routes. +The framework reads all the .vue files inside this directory and creates the router of your application. + +More information about the usage of this directory in the documentation: +https://nuxtjs.org/guide/routing diff --git a/examples/web-worker/pages/index.vue b/examples/web-worker/pages/index.vue new file mode 100644 index 0000000000..bd1e3a37a6 --- /dev/null +++ b/examples/web-worker/pages/index.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/examples/web-worker/plugins/README.md b/examples/web-worker/plugins/README.md new file mode 100644 index 0000000000..ec39a25e3f --- /dev/null +++ b/examples/web-worker/plugins/README.md @@ -0,0 +1,8 @@ +# 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.** diff --git a/examples/web-worker/plugins/inject-ww.js b/examples/web-worker/plugins/inject-ww.js new file mode 100644 index 0000000000..f1935cdf5d --- /dev/null +++ b/examples/web-worker/plugins/inject-ww.js @@ -0,0 +1,9 @@ +import ExampleWorker from '~/assets/js/Example.worker.js' // worker files has to end in ".worker.js" - see nuxt.config.js + +export default (context, inject) => { + inject('worker', { + createWorker () { + return new ExampleWorker() + } + }) +} diff --git a/examples/web-worker/static/README.md b/examples/web-worker/static/README.md new file mode 100644 index 0000000000..66fe23aac1 --- /dev/null +++ b/examples/web-worker/static/README.md @@ -0,0 +1,11 @@ +# 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.** diff --git a/examples/web-worker/static/favicon.ico b/examples/web-worker/static/favicon.ico new file mode 100644 index 0000000000..382fecbbf9 Binary files /dev/null and b/examples/web-worker/static/favicon.ico differ diff --git a/package.json b/package.json index d4210c221e..83641197e0 100644 --- a/package.json +++ b/package.json @@ -130,6 +130,7 @@ "eslint-plugin-promise": "^3.7.0", "eslint-plugin-react": "^7.6.1", "eslint-plugin-standard": "^3.0.1", + "eslint-plugin-vue": "^4.3.0", "express": "^4.16.2", "finalhandler": "^1.1.1", "get-port": "^3.2.0",