diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100755 index 0000000000..d62410aa63 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,45 @@ +version: 2 +jobs: + build: + working_directory: /usr/src/app + docker: + - image: banian/node-headless-chrome + steps: + # Checkout repository + - checkout + + # Restore cache + - restore_cache: + key: yarn-{{ checksum "yarn.lock" }} + + # Install dependencies + - run: + name: Install Dependencies + command: NODE_ENV=dev yarn + + # Keep cache + - save_cache: + key: yarn-{{ checksum "yarn.lock" }} + paths: + - "node_modules" + + # Build + - run: + name: Build + command: | + yarn build + + # Test + - run: + name: Tests + command: yarn test && yarn coverage + + # Release next + - run: + name: Publish nuxt-next + command: | + if [ "${CIRCLE_BRANCH}" == "dev" ]; then + echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc + echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc + npm run release-next + fi diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..801d56deaa --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +app +node_modules +dist +.nuxt diff --git a/.eslintrc.js b/.eslintrc.js index 987af7e911..69b6b59125 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,7 +22,14 @@ module.exports = { // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // do not allow console.logs etc... - 'no-console': 2 + 'no-console': 2, + 'space-before-function-paren': [ + 2, + { + anonymous: 'always', + named: 'never' + } + ], }, globals: {} } diff --git a/.gitignore b/.gitignore index 9b8a0a54a8..6b2d6f7e1d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,18 +1,21 @@ -# dependencies +# Dependencies node_modules examples/**/*/yarn.lock +jspm_packages +package-lock.json -# logs +# Logs *.log +npm-debug.log* -# other +# Other .nuxt .cache # Dist folder dist -# dist example generation +# Dist example generation examples/**/dist # Coverage support @@ -25,5 +28,23 @@ coverage *.iml .idea -# Macos -.DS_Store +# OSX +*.DS_Store +.AppleDouble +.LSOverride + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000000..9841c0bd3f --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry=https://registry.yarnpkg.com diff --git a/.travis.yml b/.travis.yml index a833fdf3d6..a92abde5dc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,6 +2,10 @@ language: node_js node_js: - "8" - "6" +cache: + yarn: true + directories: + - node_modules install: - yarn install - yarn run build diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..a91492b217 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,46 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at team@nuxtjs.org. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..966a162f9a --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,10 @@ +# Contributing to Nuxt.js + +1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device. +2. Install the dependencies: `npm install`. +3. Run `npm link` to link the local repo to NPM. +4. Run `npm run build` to build or `npm run watch` to build and watch for code changes. +5. Then npm link this repo inside any example app with `npm link nuxt`. +6. Then you can run your example app with the local version of Nuxt.js (You may need to re-run the example app as you change server side code in the Nuxt.js repository). + +Make sure to add tests into `test/` directory and try them with `npm test` before making a pull request. diff --git a/README.md b/README.md index 224ba8c977..3b27ba6ea3 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@

Build Status Windows Build Status -  Coverage Status +  Coverage Status Downloads Version License @@ -164,7 +164,7 @@ You can start by using one of our starter templates: - [koa](https://github.com/nuxt-community/koa-template): Nuxt.js + Koa - [adonuxt](https://github.com/nuxt-community/adonuxt-template): Nuxt.js + AdonisJS - [micro](https://github.com/nuxt-community/micro-template): Nuxt.js + Micro -- [nuxtent](https://github.com/nuxt-community/nuxtent-template): Nuxt.js + Nuxtent module for content heavy sites +- [nuxtent](https://github.com/nuxt-community/nuxtent-template): Nuxt.js + Nuxtent module for content heavy sites ## Using nuxt.js programmatically @@ -251,4 +251,7 @@ Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`. ## Roadmap -https://github.com/nuxt/nuxt.js/projects/1 +https://trello.com/b/lgy93IOl/nuxtjs-10 + +## Contributing +Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) diff --git a/appveyor.yml b/appveyor.yml index 5c62e6be35..f001912793 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -4,6 +4,10 @@ environment: - nodejs_version: "6" - nodejs_version: "8" +cache: + - "%LOCALAPPDATA%\\Yarn" + - node_modules + # Install scripts. (runs after repo cloning) install: # Get the latest stable version of Node.js or io.js diff --git a/benchmarks/README.md b/benchmarks/README.md new file mode 100644 index 0000000000..9623cc1191 --- /dev/null +++ b/benchmarks/README.md @@ -0,0 +1,29 @@ +# Nuxt.js server-side benchmarks + +> Taken from [Next.js benchmarks](https://github.com/zeit/next.js/tree/master/bench), if you like React, we recommend you to try [Next.js](https://github.com/zeit/next.js). + +## Installation + +Follow the steps in [CONTRIBUTING.md](../CONTRIBUTING.md). + +Both benchmarks use `ab`. So make sure you have it installed. + +## Usage + +Before running the test: + +``` +npm run start +``` + +Then run one of these tests: + +- Stateless application which renders `

My component!

`. Runs 3000 http requests. +``` +npm run bench:stateless +``` + +- Stateless application which renders `
  • This is row {i}
    • ` 10.000 times. Runs 500 http requests. +``` +npm run bench:stateless-big +``` \ No newline at end of file diff --git a/benchmarks/package.json b/benchmarks/package.json new file mode 100644 index 0000000000..d3f5220127 --- /dev/null +++ b/benchmarks/package.json @@ -0,0 +1,9 @@ +{ + "name": "nuxt-benchmarks", + "scripts": { + "build": "nuxt build", + "start": "npm run build && nuxt start", + "bench:stateless": "ab -c1 -n3000 http://127.0.0.1:3000/stateless", + "bench:stateless-big": "ab -c1 -n500 http://127.0.0.1:3000/stateless-big" + } +} \ No newline at end of file diff --git a/benchmarks/pages/stateless-big.vue b/benchmarks/pages/stateless-big.vue new file mode 100644 index 0000000000..9011162e55 --- /dev/null +++ b/benchmarks/pages/stateless-big.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/benchmarks/pages/stateless.vue b/benchmarks/pages/stateless.vue new file mode 100644 index 0000000000..5f8615de3c --- /dev/null +++ b/benchmarks/pages/stateless.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/bin/nuxt-build b/bin/nuxt-build index 1d3a290e89..53393a42ea 100755 --- a/bin/nuxt-build +++ b/bin/nuxt-build @@ -1,4 +1,5 @@ #!/usr/bin/env node +/* eslint-disable no-console */ // Show logs process.env.DEBUG = process.env.DEBUG || 'nuxt:*' @@ -75,16 +76,47 @@ if (options.mode !== 'spa') { builder.build() .then(() => debug('Building done')) .catch((err) => { - console.error(err) // eslint-disable-line no-console + console.error(err) process.exit(1) }) } else { + const s = Date.now() + + nuxt.hook('generate:distRemoved', function () { + debug('Destination folder cleaned') + }) + + nuxt.hook('generate:distCopied', function () { + debug('Static & build files copied') + }) + + nuxt.hook('generate:page', function (page) { + debug('Generate file: ' + page.path) + }) + + nuxt.hook('generate:done', function (generator, errors) { + const duration = Math.round((Date.now() - s) / 100) / 10 + + debug(`HTML Files generated in ${duration}s`) + + if (errors.length) { + const report = errors.map(({ type, route, error }) => { + /* istanbul ignore if */ + if (type === 'unhandled') { + return `Route: '${route}'\n${error.stack}` + } else { + return `Route: '${route}' thrown an error: \n` + JSON.stringify(error) + } + }) + console.error('==== Error report ==== \n' + report.join('\n\n')) // eslint-disable-line no-console + } + }) + // Disable minify to get exact results of nuxt start nuxt.options.generate.minify = false // Generate on spa mode new Generator(nuxt, builder).generate({ build: true }).then(() => { if (!nuxt.options.dev) { - // eslint-disable-next-line no-console console.log(`✓ You can now directly upload ${nuxt.options.generate.dir}/ or start server using "nuxt start"`) } }) diff --git a/bin/nuxt-dev b/bin/nuxt-dev index 488d3970c2..28266f1e92 100755 --- a/bin/nuxt-dev +++ b/bin/nuxt-dev @@ -1,4 +1,5 @@ #!/usr/bin/env node +/* eslint-disable no-console */ // Show logs process.env.DEBUG = process.env.DEBUG || 'nuxt:*' @@ -10,7 +11,9 @@ const fs = require('fs') const parseArgs = require('minimist') const { Nuxt, Builder } = require('../') const chokidar = require('chokidar') -const resolve = require('path').resolve +const path = require('path') +const resolve = path.resolve +const pkg = require(path.join('..', 'package.json')) const argv = parseArgs(process.argv.slice(2), { alias: { @@ -19,15 +22,21 @@ const argv = parseArgs(process.argv.slice(2), { p: 'port', c: 'config-file', s: 'spa', - u: 'universal' + u: 'universal', + v: 'version' }, - boolean: ['h', 's', 'u'], + boolean: ['h', 's', 'u', 'v'], string: ['H', 'c'], default: { c: 'nuxt.config.js' } }) +if (argv.version) { + console.log(pkg.version) + process.exit(0) +} + if (argv.hostname === '') { console.error(`> Provided hostname argument has no value`) process.exit(1) @@ -60,42 +69,70 @@ _.defaultsDeep(nuxtConfig, { watchers: { chokidar: { ignoreInitial: true } } }) // Start dev let dev = startDev() +let needToRestart = false // Start watching for nuxt.config.js changes chokidar .watch(nuxtConfigFile, nuxtConfig.watchers.chokidar) - .on('all', _.debounce(() => { + .on('all', () => { debug('[nuxt.config.js] changed') - debug('Rebuilding the app...') - dev = dev.then(startDev) - }), 2500) + needToRestart = true -function startDev (oldNuxt) { + dev = dev.then((instance) => { + if (needToRestart === false) return instance + needToRestart = false + + debug('Rebuilding the app...') + return startDev(instance) + }) + }) + +function startDev(oldInstance) { // Get latest environment variables const port = argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port const host = argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host + // Error handler + const onError = (err, instance) => { + debug('Error while reloading [nuxt.config.js]', err) + return Promise.resolve(instance) // Wait for next reload + } + // Load options let options = {} try { options = loadNuxtConfig() } catch (err) { - console.error(err) - return // Wait for next reload + return onError(err, oldInstance) } // Create nuxt and builder instance - const nuxt = new Nuxt(options) - const builder = new Builder(nuxt) + let nuxt + let builder + let instance + try { + nuxt = new Nuxt(options) + builder = new Builder(nuxt) + instance = { nuxt: nuxt, builder: builder } + } catch (err) { + return onError(err, instance || oldInstance) + } return Promise.resolve() - .then(() => builder.build()) // 1- Start build - .then(() => oldNuxt ? oldNuxt.close() : Promise.resolve()) // 2- Close old nuxt after successful build - .then(() => nuxt.listen(port, host)) // 3- Start listening - .then(() => nuxt) // 4- Pass new nuxt to watch chain + .then(() => oldInstance && oldInstance.builder ? oldInstance.builder.unwatch() : Promise.resolve()) + // Start build + .then(() => builder.build()) + // Close old nuxt after successful build + .then(() => oldInstance && oldInstance.nuxt ? oldInstance.nuxt.close() : Promise.resolve()) + // Start listening + .then(() => nuxt.listen(port, host)) + // Pass new nuxt to watch chain + .then(() => instance) + // Handle errors + .catch((err) => onError(err, instance)) } -function loadNuxtConfig () { +function loadNuxtConfig() { let options = {} if (fs.existsSync(nuxtConfigFile)) { diff --git a/bin/nuxt-generate b/bin/nuxt-generate index f86cd43eba..c9fa725982 100755 --- a/bin/nuxt-generate +++ b/bin/nuxt-generate @@ -1,4 +1,5 @@ #!/usr/bin/env node +/* eslint-disable no-console */ // Show logs process.env.DEBUG = process.env.DEBUG || 'nuxt:*' @@ -17,10 +18,11 @@ const argv = parseArgs(process.argv.slice(2), { s: 'spa', u: 'universal' }, - boolean: ['h', 's', 'u'], + boolean: ['h', 's', 'u', 'build'], string: ['c'], default: { - c: 'nuxt.config.js' + c: 'nuxt.config.js', + build: true } }) @@ -36,6 +38,7 @@ if (argv.help) { --universal Launch in Universal mode (default) --config-file, -c Path to Nuxt.js config file (default: nuxt.config.js) --help, -h Displays this message + --no-build Just run generate for faster builds when just dynamic routes changed. Nuxt build is needed before this command. `) process.exit(0) } @@ -62,12 +65,50 @@ debug('Generating...') const nuxt = new Nuxt(options) const builder = new Builder(nuxt) const generator = new Generator(nuxt, builder) -generator.generate() + +const generateOptions = { + init: true, + build: argv['build'] +} + +const s = Date.now() + +nuxt.hook('generate:distRemoved', function () { + debug('Destination folder cleaned') +}) + +nuxt.hook('generate:distCopied', function () { + debug('Static & build files copied') +}) + +nuxt.hook('generate:page', function (page) { + debug('Generate file: ' + page.path) +}) + +nuxt.hook('generate:done', function (generator, errors) { + const duration = Math.round((Date.now() - s) / 100) / 10 + + debug(`HTML Files generated in ${duration}s`) + + if (errors.length) { + const report = errors.map(({ type, route, error }) => { + /* istanbul ignore if */ + if (type === 'unhandled') { + return `Route: '${route}'\n${error.stack}` + } else { + return `Route: '${route}' thrown an error: \n` + JSON.stringify(error) + } + }) + console.error('==== Error report ==== \n' + report.join('\n\n')) // eslint-disable-line no-console + } +}) + +generator.generate(generateOptions) .then(() => { debug('Generate done') process.exit(0) }) .catch((err) => { - console.error(err) // eslint-disable-line no-console + console.error(err) process.exit(1) }) diff --git a/bin/nuxt-start b/bin/nuxt-start index 632bba2726..cc18b1dada 100755 --- a/bin/nuxt-start +++ b/bin/nuxt-start @@ -1,9 +1,10 @@ #!/usr/bin/env node +/* eslint-disable no-console */ const fs = require('fs') const parseArgs = require('minimist') const { Nuxt } = require('../') -const { join, resolve } = require('path') +const { resolve } = require('path') const argv = parseArgs(process.argv.slice(2), { alias: { @@ -71,7 +72,7 @@ const nuxt = new Nuxt(options) // Check if project is built for production const distDir = resolve(nuxt.options.rootDir, nuxt.options.buildDir || '.nuxt', 'dist') if (!fs.existsSync(distDir)) { - console.error('> No build files found, please run `nuxt build` before launching `nuxt start`') // eslint-disable-line no-console + console.error('> No build files found, please run `nuxt build` before launching `nuxt start`') process.exit(1) } @@ -79,7 +80,6 @@ if (!fs.existsSync(distDir)) { if (nuxt.options.render.ssr === true) { const ssrBundlePath = resolve(distDir, 'server-bundle.json') if (!fs.existsSync(ssrBundlePath)) { - // eslint-disable-next-line no-console console.error('> No SSR build! Please start with `nuxt start --spa` or build using `nuxt build --universal`') process.exit(1) } diff --git a/build/release-next.js b/build/release-next.js new file mode 100644 index 0000000000..051e88518d --- /dev/null +++ b/build/release-next.js @@ -0,0 +1,31 @@ +#!/usr/bin/env node +const { readFileSync, writeFileSync } = require('fs-extra') +const { resolve } = require('path') +const { spawnSync } = require('child_process') + +// paths +const packagePath = resolve(__dirname, '..', 'package.json') + +// Read original contents of package.json +const originalPackage = readFileSync(packagePath, 'utf-8') + +// Write to backup file +// writeFileSync(packagePath + '.backup', originalPackage) + +// Parse package.json +const p = JSON.parse(originalPackage) + +// Change package name +// p.name = 'nuxt-next' + +// Get latest git commit id +const gitCommit = String(spawnSync('git', 'rev-parse --short HEAD'.split(' ')).stdout).trim() + +// Version with latest git commit id +p.version = p.version.split('-')[0] + '-gh-' + gitCommit + +// Write package.json +writeFileSync(packagePath, JSON.stringify(p, null, 2) + '\r\n') + +// Log +console.log(p.name + '@' + p.version) // eslint-disable-line no-console diff --git a/build/rollup.config.js b/build/rollup.config.js index 61fa3cf2f3..3328377d48 100755 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -40,32 +40,35 @@ const aliases = { const builds = { nuxt: { entry: resolve(libDir, 'index.js'), - dest: resolve(distDir, 'nuxt.js') + file: resolve(distDir, 'nuxt.js') }, core: { entry: resolve(libDir, 'core/index.js'), - dest: resolve(distDir, 'core.js'), + file: resolve(distDir, 'core.js') } } // ----------------------------- // Default config // ----------------------------- -function genConfig (opts) { +function genConfig(opts) { const config = { - entry: opts.entry, - dest: opts.dest, - external: ['fs', 'path', 'http', 'module', 'vue-server-renderer/server-plugin', 'vue-server-renderer/client-plugin'].concat(dependencies, opts.external), - format: opts.format || 'cjs', + input: opts.entry, + output: { + file: opts.file, + format: 'cjs', + sourcemap: true + }, + external: ['fs', 'path', 'http', 'module', 'vue-server-renderer/server-plugin', 'vue-server-renderer/client-plugin'] + .concat(dependencies, opts.external), banner: opts.banner || banner, - moduleName: opts.moduleName || 'Nuxt', - sourceMap: true, + name: opts.modulename || 'Nuxt', plugins: [ rollupAlias(Object.assign({ resolve: ['.js', '.json', '.jsx', '.ts'] }, aliases, opts.alias)), - rollupNodeResolve({ main: true, jsnext: true }), + rollupNodeResolve({ preferBuiltins: true }), rollupCommonJS(), @@ -74,10 +77,16 @@ function genConfig (opts) { plugins: [ ['transform-runtime', { 'helpers': false, 'polyfill': false }], 'transform-async-to-generator', - 'array-includes' + 'array-includes', + 'external-helpers' ], presets: [ - 'babel-preset-es2015-rollup' + ['env', { + targets: { + node: '6.11.0' + }, + modules: false + }] ], 'env': { 'test': { @@ -86,9 +95,7 @@ function genConfig (opts) { } }, opts.babel)), - rollupReplace({ - __VERSION__: version - }) + rollupReplace({ __VERSION__: version }) ].concat(opts.plugins || []) } diff --git a/build/start.js b/build/start.js index ac1d3bdf67..aa8e474aec 100755 --- a/build/start.js +++ b/build/start.js @@ -3,7 +3,7 @@ const now = Date.now() const { readFileSync, readJSONSync, writeFileSync, copySync, removeSync } = require('fs-extra') -const { resolve, relative } = require('path') +const { resolve } = require('path') // Dirs const rootDir = resolve(__dirname, '..') @@ -15,7 +15,8 @@ const packageJSON = readJSONSync(resolve(rootDir, 'package.json')) // Required and Excluded packages for start let requires = [ 'source-map-support', - 'pretty-error' + 'pretty-error', + 'minimist' ] const excludes = [ @@ -41,6 +42,7 @@ requires = requires.filter(r => excludes.indexOf(r) === -1) let dependencies = {} requires.forEach(r => { if (!packageJSON.dependencies[r]) { + // eslint-disable-next-line no-console console.warn('Cannot resolve dependency version for ' + r) return } @@ -103,5 +105,5 @@ writeFileSync(startIndexjs, String(readFileSync(startIndexjs)).replace('./dist/n const binStart = resolve(startDir, 'bin/nuxt-start') writeFileSync(binStart, String(readFileSync(binStart)).replace(/nuxt start/g, 'nuxt-start')) -const ms = Date.now() - now -console.log(`Generated ${packageJSON.name}@${packageJSON.version} in ${ms}ms`) +// eslint-disable-next-line no-console +console.log(`Generated ${packageJSON.name}@${packageJSON.version} in ${Date.now() - now}ms`) diff --git a/examples/async-component-injection/pages/_slug.vue b/examples/async-component-injection/pages/_slug.vue index 10b87643d3..32359858fb 100644 --- a/examples/async-component-injection/pages/_slug.vue +++ b/examples/async-component-injection/pages/_slug.vue @@ -12,7 +12,7 @@ const getPost = (slug) => ({ }) export default { - beforeCreate () { + beforeCreate() { this.component = () => getPost(this.$route.params.slug) } } diff --git a/examples/async-data/nuxt.config.js b/examples/async-data/nuxt.config.js index 9bd912b375..14c94a633e 100644 --- a/examples/async-data/nuxt.config.js +++ b/examples/async-data/nuxt.config.js @@ -12,7 +12,7 @@ module.exports = { }, generate: { routes: [ - '/posts/1', + '/posts/1' ] } } diff --git a/examples/async-data/pages/posts/_id.vue b/examples/async-data/pages/posts/_id.vue index d33d5c46bb..d7f33bb081 100644 --- a/examples/async-data/pages/posts/_id.vue +++ b/examples/async-data/pages/posts/_id.vue @@ -11,12 +11,12 @@ import axios from 'axios' export default { - async asyncData ({ params }) { + async asyncData({ params }) { // We can use async/await ES6 feature let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`) return { post: data } }, - head () { + head() { return { title: this.post.title } diff --git a/examples/async-data/pages/posts/index.vue b/examples/async-data/pages/posts/index.vue index 404c127478..1015972fa8 100644 --- a/examples/async-data/pages/posts/index.vue +++ b/examples/async-data/pages/posts/index.vue @@ -3,7 +3,7 @@

    Blog

    @@ -15,12 +15,12 @@ import axios from 'axios' export default { - asyncData ({ req, params }) { + asyncData({ req, params }) { // We can return a Promise instead of calling the callback return axios.get('https://jsonplaceholder.typicode.com/posts') - .then((res) => { - return { posts: res.data.slice(0, 5) } - }) + .then((res) => { + return { posts: res.data.slice(0, 5) } + }) }, head: { title: 'List of posts' diff --git a/examples/auth-routes/api/index.js b/examples/auth-routes/api/index.js index c1943b789e..04d6febace 100644 --- a/examples/auth-routes/api/index.js +++ b/examples/auth-routes/api/index.js @@ -33,4 +33,4 @@ router.post('/logout', (req, res) => { module.exports = { path: '/api', handler: router -} \ No newline at end of file +} diff --git a/examples/auth-routes/pages/index.vue b/examples/auth-routes/pages/index.vue index ebfd771e60..1fe25b8373 100644 --- a/examples/auth-routes/pages/index.vue +++ b/examples/auth-routes/pages/index.vue @@ -20,7 +20,7 @@ diff --git a/examples/cached-components/pages/index.vue b/examples/cached-components/pages/index.vue index 26366e54ae..a1094bca52 100644 --- a/examples/cached-components/pages/index.vue +++ b/examples/cached-components/pages/index.vue @@ -9,11 +9,11 @@ + + \ No newline at end of file diff --git a/examples/dynamic-layouts/pages/about.vue b/examples/dynamic-layouts/pages/about.vue index 8ed01c381f..18d0789771 100644 --- a/examples/dynamic-layouts/pages/about.vue +++ b/examples/dynamic-layouts/pages/about.vue @@ -8,7 +8,7 @@ diff --git a/examples/global-css/assets/roboto.woff2 b/examples/global-css/assets/roboto.woff2 new file mode 100644 index 0000000000..555f98b120 Binary files /dev/null and b/examples/global-css/assets/roboto.woff2 differ diff --git a/examples/global-css/css/main.css b/examples/global-css/css/main.css index 762c321cb7..debffff97e 100644 --- a/examples/global-css/css/main.css +++ b/examples/global-css/css/main.css @@ -1,3 +1,11 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(../assets/roboto.woff2) format('woff2'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} + body { background: #eee; text-align: center; @@ -7,6 +15,7 @@ body { position: absolute; top: 0; left: 0; + font-family: 'Roboto'; } .content { margin-top: 100px; diff --git a/examples/global-css/nuxt.config.js b/examples/global-css/nuxt.config.js index f916e5a053..3dc2839759 100644 --- a/examples/global-css/nuxt.config.js +++ b/examples/global-css/nuxt.config.js @@ -9,5 +9,12 @@ module.exports = { css: [ 'bulma/css/bulma.css', '~/css/main.css' - ] + ], + render: { + bundleRenderer: { + shouldPreload: (file, type) => { + return ['script', 'style', 'font'].includes(type) + } + } + } } diff --git a/examples/global-css/package.json b/examples/global-css/package.json index 75e5b4647d..1525d69e4e 100644 --- a/examples/global-css/package.json +++ b/examples/global-css/package.json @@ -1,7 +1,7 @@ { "name": "nuxt-global-css", "dependencies": { - "bulma": "^0.4.3", + "bulma": "^0.5.1", "nuxt": "latest" }, "scripts": { diff --git a/examples/head-elements/README.md b/examples/head-elements/README.md deleted file mode 100644 index 1b7d3962d2..0000000000 --- a/examples/head-elements/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Updating headers with Nuxt.js - -https://nuxtjs.org/examples/seo-html-head diff --git a/examples/hello-world-jsx/pages/about.vue b/examples/hello-world-jsx/pages/about.vue index 7f7b2af070..26ed2649b8 100644 --- a/examples/hello-world-jsx/pages/about.vue +++ b/examples/hello-world-jsx/pages/about.vue @@ -1,11 +1,11 @@ diff --git a/examples/layout-transitions/pages/index.vue b/examples/layout-transitions/pages/index.vue new file mode 100644 index 0000000000..9b8b4fefa5 --- /dev/null +++ b/examples/layout-transitions/pages/index.vue @@ -0,0 +1,8 @@ + diff --git a/examples/layout-transitions/pages/users-2.vue b/examples/layout-transitions/pages/users-2.vue new file mode 100644 index 0000000000..e1a038e0f1 --- /dev/null +++ b/examples/layout-transitions/pages/users-2.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/examples/layout-transitions/pages/users.vue b/examples/layout-transitions/pages/users.vue new file mode 100644 index 0000000000..f7399382cf --- /dev/null +++ b/examples/layout-transitions/pages/users.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/examples/markdownit/README.md b/examples/markdownit/README.md new file mode 100644 index 0000000000..a287cad252 --- /dev/null +++ b/examples/markdownit/README.md @@ -0,0 +1,5 @@ +# Markdown Example + +> Convert Markdown file to HTML using markdown-it. + +**See [Markdownit Module](https://github.com/nuxt-community/modules/tree/master/packages/markdownit) for easy integration with [Nuxt.js](https://nuxtjs.org).** diff --git a/examples/markdownit/nuxt.config.js b/examples/markdownit/nuxt.config.js new file mode 100644 index 0000000000..a1d31f09bd --- /dev/null +++ b/examples/markdownit/nuxt.config.js @@ -0,0 +1,8 @@ +module.exports = { + modules: [ + '@nuxtjs/markdownit' + ], + plugins: [ + '~/plugins/md-it' + ] +} diff --git a/examples/markdownit/package.json b/examples/markdownit/package.json new file mode 100644 index 0000000000..bdbe75cd3b --- /dev/null +++ b/examples/markdownit/package.json @@ -0,0 +1,17 @@ +{ + "name": "nuxt-markdownit", + "version": "1.0.0", + "dependencies": { + "@nuxtjs/markdownit": "^1.1.2", + "nuxt": "latest", + "pug": "^2.0.0-rc.4" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start" + }, + "devDependencies": { + "jstransformer-markdown-it": "^2.0.0" + } +} diff --git a/examples/markdownit/pages/about.vue b/examples/markdownit/pages/about.vue new file mode 100644 index 0000000000..aa487b80bb --- /dev/null +++ b/examples/markdownit/pages/about.vue @@ -0,0 +1,6 @@ + diff --git a/examples/markdownit/pages/index.vue b/examples/markdownit/pages/index.vue new file mode 100644 index 0000000000..41b534ef46 --- /dev/null +++ b/examples/markdownit/pages/index.vue @@ -0,0 +1,21 @@ + + + diff --git a/examples/markdownit/pages/pug.vue b/examples/markdownit/pages/pug.vue new file mode 100644 index 0000000000..fed7edda72 --- /dev/null +++ b/examples/markdownit/pages/pug.vue @@ -0,0 +1,20 @@ + + + diff --git a/examples/markdownit/plugins/md-it.js b/examples/markdownit/plugins/md-it.js new file mode 100644 index 0000000000..3080f20046 --- /dev/null +++ b/examples/markdownit/plugins/md-it.js @@ -0,0 +1,5 @@ +import MarkdownIt from 'markdown-it' + +export default ({ app }, inject) => { + inject('md', new MarkdownIt()) +} diff --git a/examples/meta-info/README.md b/examples/meta-info/README.md new file mode 100644 index 0000000000..9832e65a42 --- /dev/null +++ b/examples/meta-info/README.md @@ -0,0 +1,13 @@ +# Manage your app's meta information + +Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to manage page meta info (such as: meta, title, link, style, script) of your application. + +## Example + +SEO: https://nuxtjs.org/examples/seo-html-head + +## Documentation + +Nuxt.js: https://nuxtjs.org/guide/views#html-head + +vue-meta: https://github.com/declandewet/vue-meta#table-of-contents diff --git a/examples/head-elements/components/twitter-head-card.vue b/examples/meta-info/components/twitter-head-card.vue similarity index 100% rename from examples/head-elements/components/twitter-head-card.vue rename to examples/meta-info/components/twitter-head-card.vue diff --git a/examples/head-elements/nuxt.config.js b/examples/meta-info/nuxt.config.js similarity index 100% rename from examples/head-elements/nuxt.config.js rename to examples/meta-info/nuxt.config.js diff --git a/examples/head-elements/package.json b/examples/meta-info/package.json similarity index 100% rename from examples/head-elements/package.json rename to examples/meta-info/package.json diff --git a/examples/head-elements/pages/about.vue b/examples/meta-info/pages/about.vue similarity index 100% rename from examples/head-elements/pages/about.vue rename to examples/meta-info/pages/about.vue diff --git a/examples/head-elements/pages/index.vue b/examples/meta-info/pages/index.vue similarity index 72% rename from examples/head-elements/pages/index.vue rename to examples/meta-info/pages/index.vue index a613b81b47..84b1fc33b9 100755 --- a/examples/head-elements/pages/index.vue +++ b/examples/meta-info/pages/index.vue @@ -11,6 +11,12 @@ export default { title: 'Home page 🚀', meta: [ { hid: 'description', name: 'description', content: 'Home page description' } + ], + script: [ + { src: '/head.js' }, + // Supported since 1.0 + { src: '/body.js', body: true }, + { src: '/defer.js', defer: '' } ] } } diff --git a/examples/meta-info/static/about.js b/examples/meta-info/static/about.js new file mode 100644 index 0000000000..464cf12450 --- /dev/null +++ b/examples/meta-info/static/about.js @@ -0,0 +1 @@ +console.log('about.js loaded!') // eslint-disable-line no-console diff --git a/examples/meta-info/static/body.js b/examples/meta-info/static/body.js new file mode 100644 index 0000000000..7469d61dc5 --- /dev/null +++ b/examples/meta-info/static/body.js @@ -0,0 +1 @@ +console.log('body.js loaded!') // eslint-disable-line no-console diff --git a/examples/meta-info/static/defer.js b/examples/meta-info/static/defer.js new file mode 100644 index 0000000000..9437a02b35 --- /dev/null +++ b/examples/meta-info/static/defer.js @@ -0,0 +1 @@ +console.log('defer.js loaded!') // eslint-disable-line no-console diff --git a/examples/meta-info/static/head.js b/examples/meta-info/static/head.js new file mode 100644 index 0000000000..6869a2c47a --- /dev/null +++ b/examples/meta-info/static/head.js @@ -0,0 +1 @@ +console.log('head.js loaded!') // eslint-disable-line no-console diff --git a/examples/middleware/components/Visits.vue b/examples/middleware/components/Visits.vue index 0ac86d54d4..2600db2ba0 100644 --- a/examples/middleware/components/Visits.vue +++ b/examples/middleware/components/Visits.vue @@ -1,18 +1,18 @@ diff --git a/examples/tailwindcss/pages/index.vue b/examples/tailwindcss/pages/index.vue new file mode 100644 index 0000000000..42b3f02ef1 --- /dev/null +++ b/examples/tailwindcss/pages/index.vue @@ -0,0 +1,17 @@ + diff --git a/examples/tailwindcss/postcss.config.js b/examples/tailwindcss/postcss.config.js new file mode 100644 index 0000000000..6b4212984e --- /dev/null +++ b/examples/tailwindcss/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: [ + require('tailwindcss')('./tailwind.js'), + require('autoprefixer') + ] +} diff --git a/examples/tailwindcss/tailwind.js b/examples/tailwindcss/tailwind.js new file mode 100644 index 0000000000..9a4af76aba --- /dev/null +++ b/examples/tailwindcss/tailwind.js @@ -0,0 +1,744 @@ +/* + +Tailwind - The Utility-First CSS Framework + +A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), +David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). + +Welcome to the Tailwind config file. This is where you can customize +Tailwind specifically for your project. Don't be intimidated by the +length of this file. It's really just a big JavaScript object and +we've done our very best to explain each section. + +View the full documentation at https://tailwindcss.com. + +|------------------------------------------------------------------------------- +| The default config +|------------------------------------------------------------------------------- +| +| This variable contains the default Tailwind config. You don't have +| to use it, but it can sometimes be helpful to have available. For +| example, you may choose to merge your custom configuration +| values with some of the Tailwind defaults. +| +*/ + +// var defaultConfig = require('tailwindcss').defaultConfig() + +/* +|------------------------------------------------------------------------------- +| Colors https://tailwindcss.com/docs/colors +|------------------------------------------------------------------------------- +| +| Here you can specify the colors used in your project. To get you started, +| we've provided a generous palette of great looking colors that are perfect +| for prototyping, but don't hesitate to change them for your project. You +| own these colors, nothing will break if you change everything about them. +| +| We've used literal color names ("red", "blue", etc.) for the default +| palette, but if you'd rather use functional names like "primary" and +| "secondary", or even a numeric scale like "100" and "200", go for it. +| +*/ + +var colors = { + 'transparent': 'transparent', + + 'black': '#222b2f', + 'grey-darkest': '#364349', + 'grey-darker': '#596a73', + 'grey-dark': '#70818a', + 'grey': '#9babb4', + 'grey-light': '#dae4e9', + 'grey-lighter': '#f3f7f9', + 'grey-lightest': '#fafcfc', + 'white': '#ffffff', + + 'red-darkest': '#420806', + 'red-darker': '#6a1b19', + 'red-dark': '#cc1f1a', + 'red': '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', + + 'orange-darkest': '#542605', + 'orange-darker': '#7f4012', + 'orange-dark': '#de751f', + 'orange': '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', + + 'yellow-darkest': '#453411', + 'yellow-darker': '#684f1d', + 'yellow-dark': '#f2d024', + 'yellow': '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', + + 'green-darkest': '#032d19', + 'green-darker': '#0b4228', + 'green-dark': '#1f9d55', + 'green': '#38c172', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#174e4b', + 'teal-dark': '#38a89d', + 'teal': '#4dc0b5', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', + + 'blue-darkest': '#05233b', + 'blue-darker': '#103d60', + 'blue-dark': '#2779bd', + 'blue': '#3490dc', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + 'indigo-darkest': '#191e38', + 'indigo-darker': '#2f365f', + 'indigo-dark': '#5661b3', + 'indigo': '#6574cd', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', + + 'purple-darkest': '#1f133f', + 'purple-darker': '#352465', + 'purple-dark': '#794acf', + 'purple': '#9561e2', + 'purple-light': '#a779e9', + 'purple-lighter': '#d6bbfc', + 'purple-lightest': '#f3ebff', + + 'pink-darkest': '#45051e', + 'pink-darker': '#72173a', + 'pink-dark': '#eb5286', + 'pink': '#f66d9b', + 'pink-light': '#fa7ea8', + 'pink-lighter': '#ffbbca', + 'pink-lightest': '#ffebef' +} + +module.exports = { + + /* + |----------------------------------------------------------------------------- + | Colors https://tailwindcss.com/docs/colors + |----------------------------------------------------------------------------- + | + | The color palette defined above is also assigned to the "colors" key of + | your Tailwind config. This makes it easy to access them in your CSS + | using Tailwind's config helper. For example: + | + | .error { color: config('colors.red') } + | + */ + + colors: colors, + + /* + |----------------------------------------------------------------------------- + | Screens https://tailwindcss.com/docs/responsive-design + |----------------------------------------------------------------------------- + | + | Screens in Tailwind are translated to CSS media queries. They define the + | responsive breakpoints for your project. By default Tailwind takes a + | "mobile first" approach, where each screen size represents a minimum + | viewport width. Feel free to have as few or as many screens as you + | want, naming them in whatever way you'd prefer for your project. + | + | Tailwind also allows for more complex screen definitions, which can be + | useful in certain situations. Be sure to see the full responsive + | documentation for a complete list of options. + | + | Class name: .{screen}:{utility} + | + */ + + screens: { + 'sm': '576px', + 'md': '768px', + 'lg': '992px', + 'xl': '1200px' + }, + + /* + |----------------------------------------------------------------------------- + | Fonts https://tailwindcss.com/docs/fonts + |----------------------------------------------------------------------------- + | + | Here is where you define your project's font stack, or font families. + | Keep in mind that Tailwind doesn't actually load any fonts for you. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + | Class name: .font-{name} + | + */ + + fonts: { + 'sans': [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue' + ], + 'serif': [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif' + ], + 'mono': [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace' + ] + }, + + /* + |----------------------------------------------------------------------------- + | Text sizes https://tailwindcss.com/docs/text-sizing + |----------------------------------------------------------------------------- + | + | Here is where you define your text sizes. Name these in whatever way + | makes the most sense to you. We use size names by default, but + | you're welcome to use a numeric scale or even something else + | entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever units you + | prefer, be it rems, ems, pixels or other. + | + | Class name: .text-{size} + | + */ + + textSizes: { + 'xs': '.75rem', // 12px + 'sm': '.875rem', // 14px + 'base': '1rem', // 16px + 'lg': '1.125rem', // 18px + 'xl': '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '1.875rem', // 30px + '4xl': '2.25rem', // 36px + '5xl': '3rem' // 48px + }, + + /* + |----------------------------------------------------------------------------- + | Font weights https://tailwindcss.com/docs/font-weight + |----------------------------------------------------------------------------- + | + | Here is where you define your font weights. We've provided a list of + | common font weight names with their respective numeric scale values + | to get you started. It's unlikely that your project will require + | all of these, so we recommend removing those you don't need. + | + | Class name: .font-{weight} + | + */ + + fontWeights: { + 'hairline': 100, + 'thin': 200, + 'light': 300, + 'normal': 400, + 'medium': 500, + 'semibold': 600, + 'bold': 700, + 'extrabold': 800, + 'black': 900 + }, + + /* + |----------------------------------------------------------------------------- + | Leading (line height) https://tailwindcss.com/docs/line-height + |----------------------------------------------------------------------------- + | + | Here is where you define your line height values, or as we call + | them in Tailwind, leadings. + | + | Class name: .leading-{size} + | + */ + + leading: { + 'none': 1, + 'tight': 1.25, + 'normal': 1.5, + 'loose': 2 + }, + + /* + |----------------------------------------------------------------------------- + | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing + |----------------------------------------------------------------------------- + | + | Here is where you define your letter spacing values, or as we call + | them in Tailwind, tracking. + | + | Class name: .tracking-{size} + | + */ + + tracking: { + 'tight': '-0.05em', + 'normal': '0', + 'wide': '0.05em' + }, + + /* + |----------------------------------------------------------------------------- + | Text colors https://tailwindcss.com/docs/text-color + |----------------------------------------------------------------------------- + | + | Here is where you define your text colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Class name: .text-{color} + | + */ + + textColors: colors, + + /* + |----------------------------------------------------------------------------- + | Background colors https://tailwindcss.com/docs/background-color + |----------------------------------------------------------------------------- + | + | Here is where you define your background colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. + | + | Class name: .bg-{color} + | + */ + + backgroundColors: colors, + + /* + |----------------------------------------------------------------------------- + | Border widths https://tailwindcss.com/docs/border-width + |----------------------------------------------------------------------------- + | + | Here is where you define your border widths. Take note that border + | widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a border width. + | + | Class name: .border{-side?}{-width?} + | + */ + + borderWidths: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px' + }, + + /* + |----------------------------------------------------------------------------- + | Border colors https://tailwindcss.com/docs/border-color + |----------------------------------------------------------------------------- + | + | Here is where you define your border colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Take note that border colors require a special "default" value set + | as well. This is the color that will be used when you do not + | specify a border color. + | + | Class name: .border-{color} + | + */ + + borderColors: Object.assign({ default: colors['grey-light'] }, colors), + + /* + |----------------------------------------------------------------------------- + | Border radius https://tailwindcss.com/docs/border-radius + |----------------------------------------------------------------------------- + | + | Here is where you define your border radius values. If a `default` radius + | is provided, it will be made available as the non-suffixed `.rounded` + | utility. + | + | Class name: .rounded{-radius?} + | + */ + + borderRadius: { + default: '.25rem', + 'sm': '.125rem', + 'lg': '.5rem', + 'full': '9999px', + 'none': '0' + }, + + /* + |----------------------------------------------------------------------------- + | Width https://tailwindcss.com/docs/width + |----------------------------------------------------------------------------- + | + | Here is where you define your width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale, a percentage + | based fraction scale, plus some other common use-cases. You + | can, of course, modify these values as needed. + | + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .w-2/3. + | + | Class name: .w-{size} + | + */ + + width: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + 'full': '100%', + 'screen': '100vw' + }, + + /* + |----------------------------------------------------------------------------- + | Height https://tailwindcss.com/docs/height + |----------------------------------------------------------------------------- + | + | Here is where you define your height utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale plus some other + | common use-cases. You can, of course, modify these values as + | needed. + | + | Class name: .h-{size} + | + */ + + height: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + 'full': '100%', + 'screen': '100vh' + }, + + /* + |----------------------------------------------------------------------------- + | Minimum width https://tailwindcss.com/docs/min-width + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .min-w-{size} + | + */ + + minWidth: { + '0': '0', + 'full': '100%' + }, + + /* + |----------------------------------------------------------------------------- + | Minimum height https://tailwindcss.com/docs/min-height + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | few common use-cases by default. You can, of course, modify these + | values as needed. + | + | Class name: .min-h-{size} + | + */ + + minHeight: { + '0': '0', + 'full': '100%', + 'screen': '100vh' + }, + + /* + |----------------------------------------------------------------------------- + | Maximum width https://tailwindcss.com/docs/max-width + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based scale and a "full width" size, + | which is basically a reset utility. You can, of course, + | modify these values as needed. + | + | Class name: .max-w-{size} + | + */ + + maxWidth: { + 'xs': '20rem', + 'sm': '30rem', + 'md': '40rem', + 'lg': '50rem', + 'xl': '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + 'full': '100%' + }, + + /* + |----------------------------------------------------------------------------- + | Maximum height https://tailwindcss.com/docs/max-height + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .max-h-{size} + | + */ + + maxHeight: { + 'full': '100%', + 'screen': '100vh' + }, + + /* + |----------------------------------------------------------------------------- + | Padding https://tailwindcss.com/docs/padding + |----------------------------------------------------------------------------- + | + | Here is where you define your padding utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .p{side?}-{size} + | + */ + + padding: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem' + }, + + /* + |----------------------------------------------------------------------------- + | Margin https://tailwindcss.com/docs/margin + |----------------------------------------------------------------------------- + | + | Here is where you define your margin utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .m{side?}-{size} + | + */ + + margin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem' + }, + + /* + |----------------------------------------------------------------------------- + | Negative margin https://tailwindcss.com/docs/negative-margin + |----------------------------------------------------------------------------- + | + | Here is where you define your negative margin utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default we + | provide matching values to the padding scale since these utilities + | generally get used together. You can, of course, modify these + | values as needed. + | + | Class name: .-m{side?}-{size} + | + */ + + negativeMargin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem' + }, + + /* + |----------------------------------------------------------------------------- + | Shadows https://tailwindcss.com/docs/shadows + |----------------------------------------------------------------------------- + | + | Here is where you define your shadow utilities. As you can see from + | the defaults we provide, it's possible to apply multiple shadows + | per utility using comma separation. + | + | If a `default` shadow is provided, it will be made available as the non- + | suffixed `.shadow` utility. + | + | Class name: .shadow-{size?} + | + */ + + shadows: { + default: '0 2px 4px 0 rgba(0,0,0,0.10)', + 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', + 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', + 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', + 'none': 'none' + }, + + /* + |----------------------------------------------------------------------------- + | Z-index https://tailwindcss.com/docs/z-index + |----------------------------------------------------------------------------- + | + | Here is where you define your z-index utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .z-{index} + | + */ + + zIndex: { + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, + 'auto': 'auto' + }, + + /* + |----------------------------------------------------------------------------- + | Opacity https://tailwindcss.com/docs/opacity + |----------------------------------------------------------------------------- + | + | Here is where you define your opacity utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .opacity-{name} + | + */ + + opacity: { + '0': '0', + '25': '.25', + '50': '.5', + '75': '.75', + '100': '1' + }, + + /* + |----------------------------------------------------------------------------- + | Packages + |----------------------------------------------------------------------------- + | + | Here is where you can define the configuration for any Tailwind packages + | you're using. These can be utility packs, component bundles, or even + | complete themes. You'll want to reference each package's + | documentation for a list of settings available for it. + | + */ + + packages: { + } + +} diff --git a/examples/typescript/components/Card.vue b/examples/typescript/components/Card.vue index 13ace815b2..2886ffa17a 100644 --- a/examples/typescript/components/Card.vue +++ b/examples/typescript/components/Card.vue @@ -9,10 +9,10 @@ // **PLEASE NOTE** All "Nuxt Class Components" require at minimum a script tag that exports a default object \ No newline at end of file + diff --git a/examples/typescript/store/index.ts b/examples/typescript/store/index.ts index 292c381318..bfffcd5175 100644 --- a/examples/typescript/store/index.ts +++ b/examples/typescript/store/index.ts @@ -1,33 +1,33 @@ -import axios from "~plugins/axios"; - -export const state = () => ({ - selected: 1, - people: [] -}); - -export const mutations = { - select(state, id) { - state.selected = id; - }, - setPeople(state, people) { - state.people = people; - } -}; - -export const getters = { - selectedPerson: state => { - const p = state.people.find(person => person.id === state.selected); - return p ? p : { first_name: "Please,", last_name: "select someone" }; - } -}; - -export const actions = { - async nuxtServerInit({ commit }) { - const response = await axios.get("/random-data.json"); - const people = response.data.slice(0, 10); - commit("setPeople", people); - }, - select({ commit }, id) { - commit("select", id); - } -}; +import axios from "~/plugins/axios"; + +export const state = () => ({ + selected: 1, + people: [] +}); + +export const mutations = { + select(state, id) { + state.selected = id; + }, + setPeople(state, people) { + state.people = people; + } +}; + +export const getters = { + selectedPerson: state => { + const p = state.people.find(person => person.id === state.selected); + return p ? p : { first_name: "Please,", last_name: "select someone" }; + } +}; + +export const actions = { + async nuxtServerInit({ commit }) { + const response = await axios.get("/random-data.json"); + const people = response.data.slice(0, 10); + commit("setPeople", people); + }, + select({ commit }, id) { + commit("select", id); + } +}; diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json index 3a40a830cd..557fd275fa 100644 --- a/examples/typescript/tsconfig.json +++ b/examples/typescript/tsconfig.json @@ -1,29 +1,29 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "es2015" - ], - "module": "es2015", - "moduleResolution": "node", - "experimentalDecorators": true, - "declaration": true, - "noImplicitAny": false, - "noImplicitThis": false, - "strictNullChecks": true, - "removeComments": true, - "suppressImplicitAnyIndexErrors": true, - "allowSyntheticDefaultImports": true, - "baseUrl": ".", - "paths": { - "~": ["./"], - "~assets/*": ["./assets/*"], - "~components/*": ["./components/*"], - "~middleware/*": ["./middleware/*"], - "~pages/*": ["./pages/*"], - "~plugins/*": ["./plugins/*"], - "~static/*": ["./static/*"] - } - } -} +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "es2015" + ], + "module": "es2015", + "moduleResolution": "node", + "experimentalDecorators": true, + "noImplicitAny": false, + "noImplicitThis": false, + "strictNullChecks": true, + "removeComments": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "baseUrl": ".", + "allowJs": true, + "paths": { + "~/": ["./"], + "~/assets/*": ["./assets/*"], + "~/components/*": ["./components/*"], + "~/middleware/*": ["./middleware/*"], + "~/pages/*": ["./pages/*"], + "~/plugins/*": ["./plugins/*"], + "~/static/*": ["./static/*"] + } + } +} diff --git a/examples/uikit/pages/about.vue b/examples/uikit/pages/about.vue index 177ea616b4..67de726940 100644 --- a/examples/uikit/pages/about.vue +++ b/examples/uikit/pages/about.vue @@ -10,7 +10,7 @@ diff --git a/examples/vue-class-component/components/Child.vue b/examples/vue-class-component/components/Child.vue new file mode 100644 index 0000000000..8063fc7bc4 --- /dev/null +++ b/examples/vue-class-component/components/Child.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/vue-class-component/nuxt.config.js b/examples/vue-class-component/nuxt.config.js index a61292b4ae..4d32a9ca0a 100644 --- a/examples/vue-class-component/nuxt.config.js +++ b/examples/vue-class-component/nuxt.config.js @@ -2,9 +2,6 @@ module.exports = { build: { babel: { plugins: ['transform-decorators-legacy', 'transform-class-properties'] - }, - extend (config) { - config.resolve.alias['nuxt-class-component'] = '~plugins/nuxt-class-component' } } } diff --git a/examples/vue-class-component/package.json b/examples/vue-class-component/package.json index e672615065..797a48f36e 100644 --- a/examples/vue-class-component/package.json +++ b/examples/vue-class-component/package.json @@ -4,7 +4,7 @@ "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "nuxt": "latest", - "vue-class-component": "^5.0.1" + "nuxt-class-component": "^1.0.4" }, "scripts": { "dev": "nuxt", diff --git a/examples/vue-class-component/pages/about.vue b/examples/vue-class-component/pages/about.vue index 484c798b82..cbe04d7fda 100644 --- a/examples/vue-class-component/pages/about.vue +++ b/examples/vue-class-component/pages/about.vue @@ -1,3 +1,6 @@ diff --git a/examples/vue-class-component/pages/index.vue b/examples/vue-class-component/pages/index.vue index ce87828622..35e0116da2 100644 --- a/examples/vue-class-component/pages/index.vue +++ b/examples/vue-class-component/pages/index.vue @@ -1,41 +1,18 @@ diff --git a/examples/vue-class-component/plugins/nuxt-class-component.js b/examples/vue-class-component/plugins/nuxt-class-component.js deleted file mode 100644 index 2f5188d00b..0000000000 --- a/examples/vue-class-component/plugins/nuxt-class-component.js +++ /dev/null @@ -1,14 +0,0 @@ -import Component from 'vue-class-component' - -Component.registerHooks([ - 'beforeRouteEnter', - 'beforeRouteLeave', - 'asyncData', - 'fetch', - 'middleware', - 'layout', - 'transition', - 'scrollToTop' -]) - -export default Component diff --git a/examples/vuex-persistedstate/package.json b/examples/vuex-persistedstate/package.json index 7b83e11f23..5d9eef3ddf 100644 --- a/examples/vuex-persistedstate/package.json +++ b/examples/vuex-persistedstate/package.json @@ -1,7 +1,7 @@ { "name": "nuxt-vuex-store", "dependencies": { - "nuxt": "^1.0.0-rc6", + "nuxt": "latest", "vuex-persistedstate": "^2.0.0" }, "scripts": { diff --git a/examples/vuex-store-modules/pages/index.vue b/examples/vuex-store-modules/pages/index.vue index da3c9a4cac..33035823fc 100644 --- a/examples/vuex-store-modules/pages/index.vue +++ b/examples/vuex-store-modules/pages/index.vue @@ -23,14 +23,14 @@ import { mapState } from 'vuex' export default { // fetch(context) is called by the server-side // and before instantiating the component - fetch ({ store }) { + fetch({ store }) { store.commit('increment') }, computed: mapState([ 'counter' ]), methods: { - increment () { + increment() { this.$store.commit('increment') } } diff --git a/examples/vuex-store-modules/pages/todos.vue b/examples/vuex-store-modules/pages/todos.vue index a3aef45096..8a693afb95 100644 --- a/examples/vuex-store-modules/pages/todos.vue +++ b/examples/vuex-store-modules/pages/todos.vue @@ -2,7 +2,7 @@

    Todos