Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 23:52:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/dev' into dev

Browse Source
This commit is contained in:
psmelero 2017-11-27 09:55:53 +01:00
commit 085afb215d
325 changed files with 7269 additions and 2815 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
.circleci/config.yml Executable file
View File

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

4
.eslintignore Normal file
View File

@ -0,0 +1,4 @@
app
node_modules
dist
.nuxt

9
.eslintrc.js
View File

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

33
.gitignore vendored
View File

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

1
.npmrc Normal file
View File

@ -0,0 +1 @@
registry=https://registry.yarnpkg.com

4
.travis.yml
View File

@ -2,6 +2,10 @@ language: node_js
node_js:
- "8"
- "6"
cache:
yarn: true
directories:
- node_modules
install:
- yarn install
- yarn run build

46
CODE_OF_CONDUCT.md Normal file
View File

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

10
CONTRIBUTING.md Normal file
View File

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

7
README.md
View File

@ -2,7 +2,7 @@
<p align="center">
<a href="https://travis-ci.org/nuxt/nuxt.js"><img src="https://img.shields.io/travis/nuxt/nuxt.js/master.svg" alt="Build Status"></a>
<a href="https://ci.appveyor.com/project/Atinux/nuxt-js"><img src="https://ci.appveyor.com/api/projects/status/gwab06obc6srx9g4?svg=true" alt="Windows Build Status"></a>
 <a href="https://codecov.io/gh/nuxt/nuxt.js"><img src="https://img.shields.io/codecov/c/github/nuxt/nuxt.js/master.svg" alt="Coverage Status"></a>
 <a href="https://codecov.io/gh/nuxt/nuxt.js"><img src="https://img.shields.io/codecov/c/github/nuxt/nuxt.js/dev.svg" alt="Coverage Status"></a>
<a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/dm/nuxt.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/v/nuxt.svg" alt="Version"></a>
<a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/l/nuxt.svg" alt="License"></a>
@ -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)

4
appveyor.yml
View File

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

29
benchmarks/README.md Normal file
View File

@ -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 `<h1>My component!</h1>`. Runs 3000 http requests.
```
npm run bench:stateless
```
- Stateless application which renders `<li>This is row {i}</li>` 10.000 times. Runs 500 http requests.
```
npm run bench:stateless-big
```

9
benchmarks/package.json Normal file
View File

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

5
benchmarks/pages/stateless-big.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<ul>
<li v-for="n in 10000" :key="n">This is row {{ n + 1 }}</li>
</ul>
</template>

3
benchmarks/pages/stateless.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h1>My component!</h1>
</template>

36
bin/nuxt-build
View File

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

69
bin/nuxt-dev
View File

@ -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,39 +69,67 @@ _.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() {

49
bin/nuxt-generate
View File

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

6
bin/nuxt-start
View File

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

31
build/release-next.js Normal file
View File

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

35
build/rollup.config.js
View File

@ -40,11 +40,11 @@ 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')
}
}
@ -53,19 +53,22 @@ const builds = {
// -----------------------------
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 || [])
}

10
build/start.js
View File

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

2
examples/async-data/nuxt.config.js
View File

@ -12,7 +12,7 @@ module.exports = {
},
generate: {
routes: [
'/posts/1',
'/posts/1'
]
}
}

2
examples/async-data/pages/posts/index.vue
View File

@ -3,7 +3,7 @@
<div class="container">
<h1>Blog</h1>
<ul>
<li v-for="post in posts">
<li v-for="(post, index) in posts" :key="index">
<nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
</li>
</ul>

32
examples/axios/README.md Normal file
View File

@ -0,0 +1,32 @@
# Axios Proxy Example
## Install
```bash
$ yarn add @nuxtjs/axios @nuxtjs/proxy
```
## Nuxt.config.js
```json
{
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: [
['/api/dog', { target: 'https://dog.ceo/', pathRewrite: { '^/api/dog': '/api/breeds/image/random' } }]
]
}
```
### Use Axios
```js
async asyncData({ app }) {
const ip = await app.$axios.$get('http://icanhazip.com')
return { ip }
}
```
More detail, please refer [axios-module](https://github.com/nuxt-community/axios-module).

9
examples/axios/nuxt.config.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: [
['/api/dog', { target: 'https://dog.ceo/', pathRewrite: { '^/api/dog': '/api/breeds/image/random' } }]
]
}

14
examples/axios/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "nuxt-proxy",
"version": "1.0.0",
"dependencies": {
"@nuxtjs/axios": "^4.4.0",
"@nuxtjs/proxy": "^1.1.2",
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

17
examples/axios/pages/index.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div>
<h1>Dog</h1>
<img :src="dog" />
</div>
</template>
<script>
export default {
async asyncData({ app }) {
const { data: { message: dog } } = await app.$axios.get('/dog')
return { dog }
}
}
</script>

6
examples/custom-build/nuxt.config.js
View File

@ -7,9 +7,9 @@ module.exports = {
app: 'app.[chunkhash].js' // default: nuxt.bundle.[chunkhash].js
},
vendor: ['lodash'],
extend (config, { dev }) {
if (dev) {
config.devtool = (dev ? 'eval-source-map' : false)
extend(config, { isDev }) {
if (isDev) {
config.devtool = 'eval-source-map'
}
const urlLoader = config.module.rules.find((loader) => loader.loader === 'url-loader')
// Increase limit to 100KO

2
examples/custom-routes/pages/index.vue
View File

@ -2,7 +2,7 @@
<div class="container">
<h2>Users</h2>
<ul class="users">
<li v-for="user in users">
<li v-for="user in users" :key="user.id">
<nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
</li>
</ul>

2
examples/custom-server/package.json
View File

@ -2,7 +2,7 @@
"name": "nuxt-custom-server",
"dependencies": {
"express": "^4.15.3",
"nuxt": "^1.0.0-rc3"
"nuxt": "latest"
},
"scripts": {
"dev": "node server.js",

1
examples/custom-server/server.js
View File

@ -21,4 +21,3 @@ app.use(nuxt.render)
// Start express server
app.listen(port, host)
console.log('Server listening on ' + host + ':' + port)

2
examples/dynamic-components/README.md
View File

@ -1,5 +1,5 @@
# Dynamic Components with Nuxt.js
Demo: https://nuxt-chat.now.sh
Demo: https://dynamic-components.nuxtjs.org/
Video: https://www.youtube.com/watch?v=HzDea5-PFaw

12
examples/dynamic-components/components/chart.js Normal file
View File

@ -0,0 +1,12 @@
let VueChart = import('vue-chartjs' /* webpackChunkName: "vue-chartjs" */)
export default async () => {
VueChart = await VueChart
return VueChart.Bar.extend({
props: ['data'],
mounted() {
this.renderChart(this.data)
}
})
}

4
examples/dynamic-components/components/image.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<img v-if="loaded" :src="data" alt="image" />
<svg v-else width="60px" height="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><defs><filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0"></feGaussianBlur><feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend></filter></defs><path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="#59ebff" filter="url(#uil-ring-shadow)"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" dur="1s"></animateTransform></path></svg>
</div>
</template>
<script>
@ -16,7 +18,7 @@ export default {
const img = new Image()
img.onload = () => {
this.loaded = true
};
}
img.src = this.data
}
}

25
examples/dynamic-components/js/messages.js
View File

@ -1,16 +1,27 @@
const messages = [
export const messages = [
{ component: 'vText', data: 'Welcome to the <b>Dynamic Component</b> demo!' },
{ component: 'vText', data: 'Look at this nice picture:' },
{ component: 'vImage', data: 'https://placeimg.com/350/200/animals' },
{ component: 'vText', data: 'If you prefer, look at this code component:' },
{ component: 'vCode', data: 'var a = 1;\nvar b = 2;\nb = a;' },
{ component: 'vText', data: 'End of demo 🎉' },
{
component: 'vChart',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Activity',
backgroundColor: '#41b883',
data: [40, 20, 12, 39, 10, 40, 39, 50, 40, 20, 12, 11]
}
]
}
},
{ component: 'vText', data: 'End of demo 🎉' }
]
function streamMessages (fn, i = 0) {
async function streamMessages(fn, i = 0) {
if (i >= messages.length) return
fn(messages[i])
setTimeout(() => streamMessages(fn, i + 1), 2000)
await fn(messages[i])
setTimeout(() => streamMessages(fn, i + 1), 1500)
}
export default streamMessages

7
examples/dynamic-components/package.json
View File

@ -1,11 +1,14 @@
{
"name": "dynamic-components-nuxt",
"dependencies": {
"nuxt": "1.0.0-rc3"
"chart.js": "^2.7.0",
"nuxt": "latest",
"vue-chartjs": "^2.8.7"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt"
"start": "nuxt start",
"generate": "nuxt generate"
}
}

13
examples/dynamic-components/pages/index.vue
View File

@ -13,9 +13,10 @@
import streamMessages from '@/js/messages.js'
// Dynamic components
const components = {
vText: () => import('@/components/text.vue').then(m => m.default),
vImage: () => import('@/components/image.vue').then(m => m.default),
vCode: () => import('@/components/code.vue').then(m => m.default)
vText: () => import('@/components/text.vue' /* webpackChunkName: "components/text" */),
vImage: () => import('@/components/image.vue' /* webpackChunkName: "components/image" */),
vCode: () => import('@/components/code.vue' /* webpackChunkName: "components/code" */),
vChart: () => import('@/components/chart.js' /* webpackChunkName: "components/chart" */).then((m) => m.default())
}
export default {
@ -23,9 +24,9 @@ export default {
messages: []
}),
mounted() {
// Listen to new messages
// Listen for incoming messages
streamMessages(async (message) => {
// Make sure to wait for async chunk to be loaded before adding the message
// Wait for the component to load before displaying it
await components[message.component]()
// Add the message to the list
this.messages.push(message)
@ -44,7 +45,7 @@ ul {
list-style: none;
margin: 0;
padding: 0;
with: 100%;
width: 100%;
max-width: 300px;
margin: auto;
}

63
examples/dynamic-components/pages/ssr.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div>
<h1>Nuxt Chat</h1>
<transition-group name="list" tag="ul">
<li v-for="(message, index) in messages" :key="index">
<component :is="message.component" :data="message.data"></component>
</li>
</transition-group>
</div>
</template>
<script>
import { messages } from '@/js/messages.js'
// Dynamic components
const components = {
vText: () => import('@/components/text.vue' /* webpackChunkName: "components/text" */),
vImage: () => import('@/components/image.vue' /* webpackChunkName: "components/image" */),
vCode: () => import('@/components/code.vue' /* webpackChunkName: "components/code" */),
vChart: () => import('@/components/chart.js' /* webpackChunkName: "components/chart" */).then((m) => m.default())
}
export default {
data: () => ({
messages
}),
components
}
</script>
<style scoped>
h1 {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
with: 100%;
max-width: 300px;
margin: auto;
}
ul li {
display: block;
width: 100%;
border-radius: 20px;
margin-bottom: 5px;
font-family: Helvetica, Arial, sans-serif;
background: white;
border: 1px #ddd solid;
overflow: hidden;
opacity: 1;
}
.list-enter-active, .list-leave-active {
transition: all 0.4s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(20px);
}
</style>

2
examples/dynamic-layouts/pages/index.vue
View File

@ -7,6 +7,6 @@
<script>
export default {
layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
layout: ({ isMobile }) => isMobile ? 'mobile' : 'default'
}
</script>

BIN
examples/global-css/assets/roboto.woff2 Normal file
View File

Binary file not shown.

9
examples/global-css/css/main.css
View File

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

9
examples/global-css/nuxt.config.js
View File

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

2
examples/global-css/package.json
View File

@ -1,7 +1,7 @@
{
"name": "nuxt-global-css",
"dependencies": {
"bulma": "^0.4.3",
"bulma": "^0.5.1",
"nuxt": "latest"
},
"scripts": {

3
examples/head-elements/README.md
View File

@ -1,3 +0,0 @@
# Updating headers with Nuxt.js
https://nuxtjs.org/examples/seo-html-head

4
examples/hello-world/pages/about.vue
View File

@ -7,9 +7,9 @@
<script>
export default {
asyncData ({ isStatic, isServer }) {
asyncData() {
return {
name: isStatic ? 'static' : (isServer ? 'server' : 'client')
name: process.static ? 'static' : (process.server ? 'server' : 'client')
}
}
}

2
examples/i18n/nuxt.config.js
View File

@ -6,7 +6,7 @@ module.exports = {
router: {
middleware: 'i18n'
},
plugins: ['~/plugins/i18n.js',],
plugins: ['~/plugins/i18n.js'],
generate: {
routes: ['/', '/about', '/fr', '/fr/about']
}

2
examples/i18n/package.json
View File

@ -2,7 +2,7 @@
"name": "nuxt-i18n",
"dependencies": {
"nuxt": "latest",
"vue-i18n": "^7.0.5"
"vue-i18n": "^7.3.2"
},
"scripts": {
"dev": "nuxt",

3
examples/layout-transitions/README.md Normal file
View File

@ -0,0 +1,3 @@
# Layout transitions with Nuxt.js
https://nuxtjs.org/examples/layout-transitions

52
examples/layout-transitions/assets/main.css Normal file
View File

@ -0,0 +1,52 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
.container {
text-align: center;
padding-top: 200px;
font-size: 20px;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.page-enter-active, .page-leave-active {
transition: opacity .5s
}
.page-enter, .page-leave-active {
opacity: 0
}
.layout-enter-active, .layout-leave-active {
transition: opacity 0.5s
}
.layout-enter, .layout-leave-active {
opacity: 0
}
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% { transform: scale(0) }
50% { transform: scale(1.5) }
100% { transform: scale(1) }
}
@keyframes bounce-out {
0% { transform: scale(1) }
50% { transform: scale(1.5) }
100% { transform: scale(0) }
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(30px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-30px, 0);
}

6
examples/layout-transitions/layouts/secondary.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<div>
<h1>Secondary Layout</h1>
<nuxt/>
</div>
</template>

10
examples/layout-transitions/nuxt.config.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
build: {
vendor: ['axios']
},
css: ['~/assets/main.css'],
layoutTransition: {
name: 'layout',
mode: 'out-in'
}
}

12
examples/layout-transitions/package.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "nuxt-layout-transitions",
"dependencies": {
"axios": "^0.15.3",
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

13
examples/layout-transitions/pages/about.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="container">
<h1>About page</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
layout: 'secondary',
transition: 'bounce'
}
</script>

8
examples/layout-transitions/pages/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div class="container">
<h1>Home page</h1>
<p><nuxt-link to="/about">About page</nuxt-link></p>
<p><nuxt-link to="/users">Lists of users</nuxt-link></p>
<p><nuxt-link to="/users-2">Lists of users #2 (with `watch`)</nuxt-link></p>
</div>
</template>

91
examples/layout-transitions/pages/users-2.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<div class="container">
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
<a v-else class="disabled">&lt; Prev</a>
<span>{{ page }}/{{ totalPages }}</span>
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
<a v-else class="disabled">Next &gt;</a>
<transition mode="out-in" :name="transitionName">
<ul :key="page">
<li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" />
<span>{{ user.first_name }} {{ user.last_name }}</span>
</li>
</ul>
</transition>
<p><nuxt-link to="/">Back home</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
watch: {
'$route.query.page': async function (page) {
this.$nuxt.$loading.start()
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
this.users = data.data
this.transitionName = this.getTransitionName(page)
this.page = +(page || 1)
this.totalPages = data.total_pages
this.$nuxt.$loading.finish()
}
},
async asyncData({ query }) {
const page = +(query.page || 1)
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
return {
page,
totalPages: data.total_pages,
users: data.data
}
},
data() {
return {
transitionName: this.getTransitionName(this.page)
}
},
methods: {
getTransitionName(newPage) {
return newPage < this.page ? 'slide-right' : 'slide-left'
}
}
}
</script>
<style scoped>
a {
display: inline-block;
margin: 0 1em;
color: #34495e;
text-decoration: none;
}
a.disabled {
color: #ccc;
}
ul {
margin: auto;
padding: 0;
width: 100%;
max-width: 400px;
padding-top: 40px;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
li {
list-style-type: none;
width: 400px;
border: 1px #ddd solid;
overflow: hidden;
}
li img {
float: left;
width: 100px;
height: 100px;
}
li span {
display: inline-block;
padding-top: 40px;
text-transform: uppercase;
}
</style>

76
examples/layout-transitions/pages/users.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div class="container">
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
<a v-else class="disabled">&lt; Prev</a>
<span>{{ page }}/{{ totalPages }}</span>
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
<a v-else class="disabled">Next &gt;</a>
<ul>
<li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" />
<span>{{ user.first_name }} {{ user.last_name }}</span>
</li>
</ul>
<p><nuxt-link to="/">Back home</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
watchQuery: ['page'],
// Key for <nuxt-child> (transitions)
key: (to) => to.fullPath,
// Called to know which transition to apply
transition(to, from) {
if (!from) return 'slide-left'
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
},
async asyncData({ query }) {
const page = +(query.page || 1)
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
return {
page,
totalPages: data.total_pages,
users: data.data
}
}
}
</script>
<style scoped>
a {
display: inline-block;
margin: 0 1em;
color: #34495e;
text-decoration: none;
}
a.disabled {
color: #ccc;
}
ul {
margin: auto;
padding: 0;
width: 100%;
max-width: 400px;
padding-top: 40px;
}
li {
list-style-type: none;
width: 400px;
border: 1px #ddd solid;
overflow: hidden;
}
li img {
float: left;
width: 100px;
height: 100px;
}
li span {
display: inline-block;
padding-top: 40px;
text-transform: uppercase;
}
</style>

5
examples/markdownit/README.md Normal file
View File

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

8
examples/markdownit/nuxt.config.js Normal file
View File

@ -0,0 +1,8 @@
module.exports = {
modules: [
'@nuxtjs/markdownit'
],
plugins: [
'~/plugins/md-it'
]
}

17
examples/markdownit/package.json Normal file
View File

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

6
examples/markdownit/pages/about.vue Normal file
View File

@ -0,0 +1,6 @@
<template lang="md">
# About Page!
Current route is: {{ $route.name }}
<nuxt-link to="/">Back home</nuxt-link>
</template>

21
examples/markdownit/pages/index.vue Normal file
View File

@ -0,0 +1,21 @@
<template lang="md">
# Hello World!
Current route is: {{ $route.path }}
Data model is: {{ model }}
<nuxt-link to="/about">Goto About</nuxt-link>
<nuxt-link to="/pug">Goto Pug</nuxt-link>
</template>
<script>
export default {
data() {
return {
model: 'I am index'
}
}
}
</script>

20
examples/markdownit/pages/pug.vue Normal file
View File

@ -0,0 +1,20 @@
<template lang="pug">
div
h1 Pug Page
:markdown-it()
## Current route is: {{ $route.name }}
div(v-html="$md.render(model)")
br
nuxt-link(to='/') Back Home
</template>
<script>
export default {
data() {
return {
model: '## Title h2\n### title h3\n\nLong text Long text Long text Long text Long text Long text Long text Long text Long text \n\n* gimme a list item\n* and one more yeehaw'
}
}
}
</script>

5
examples/markdownit/plugins/md-it.js Normal file
View File

@ -0,0 +1,5 @@
import MarkdownIt from 'markdown-it'
export default ({ app }, inject) => {
inject('md', new MarkdownIt())
}

13
examples/meta-info/README.md Normal file
View File

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

0
examples/head-elements/components/twitter-head-card.vue → examples/meta-info/components/twitter-head-card.vue
View File

0
examples/head-elements/nuxt.config.js → examples/meta-info/nuxt.config.js
View File

0
examples/head-elements/package.json → examples/meta-info/package.json
View File

0
examples/head-elements/pages/about.vue → examples/meta-info/pages/about.vue
View File

6
examples/head-elements/pages/index.vue → examples/meta-info/pages/index.vue
View File

@ -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: '' }
]
}
}

1
examples/meta-info/static/about.js Normal file
View File

@ -0,0 +1 @@
console.log('about.js loaded!') // eslint-disable-line no-console

1
examples/meta-info/static/body.js Normal file
View File

@ -0,0 +1 @@
console.log('body.js loaded!') // eslint-disable-line no-console

1
examples/meta-info/static/defer.js Normal file
View File

@ -0,0 +1 @@
console.log('defer.js loaded!') // eslint-disable-line no-console

1
examples/meta-info/static/head.js Normal file
View File

@ -0,0 +1 @@
console.log('head.js loaded!') // eslint-disable-line no-console

2
examples/middleware/components/Visits.vue
View File

@ -1,6 +1,6 @@
<template>
<ul>
<li v-for="visit in visits"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
<li v-for="(visit, index) in visits" :key="index"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
</ul>
</template>

2
examples/middleware/middleware/user-agent.js
View File

@ -1,3 +1,3 @@
export default function (context) {
context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

4
examples/middleware/pages/_slug.vue
View File

@ -4,7 +4,9 @@
<pre>{{ userAgent }}</pre>
<ul>
<li><nuxt-link to="/">Home</nuxt-link></li>
<li v-for="slug in slugs"><nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link></li>
<li v-for="(slug, index) in slugs" :key="index">
<nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link>
</li>
</ul>
</div>
</template>

2
examples/nested-routes/pages/index.vue
View File

@ -3,7 +3,7 @@
<div class="left">
<h2><nuxt-link to="/">Players</nuxt-link></h2>
<ul class="players">
<li v-for="user in users">
<li v-for="user in users" :key="user.id">
<nuxt-link :to="'/'+user.id">{{ user.name }}</nuxt-link>
</li>
</ul>

2
examples/routes-transitions/pages/users.vue
View File

@ -6,7 +6,7 @@
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
<a v-else class="disabled">Next &gt;</a>
<ul>
<li v-for="user in users">
<li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" />
<span>{{ user.first_name }} {{ user.last_name }}</span>
</li>

14
examples/spa/nuxt.config.js
View File

@ -23,23 +23,19 @@ module.exports = {
*/
css: ['~/assets/main.css'],
/*
** Cutomize loading indicator
** Customize loading indicator
*/
loadingIndicator: {
/*
** See https://github.com/nuxt/nuxt.js/tree/dev/lib/app/views/loading for available loading indicators
** See https://nuxtjs.org/api/configuration-loading-indicator for available loading indicators
** You can add a custom indicator by giving a path
** Default: 'circle'
*/
name: 'folding-cube',
// name: 'folding-cube',
/*
** You can give custom options given to the template
** See https://github.com/nuxt/nuxt.js/blob/dev/lib/app/views/loading/folding-cube.html
** Default:
** - color: '#3B8070'
** - background: 'white'
*/
color: '#222',
background: 'white'
// color: '#DBE1EC'
// background: 'white'
}
}

4
examples/spa/pages/about.vue
View File

@ -7,9 +7,9 @@
<script>
export default {
asyncData ({ isServer }) {
asyncData() {
return {
name: (isServer ? 'server' : 'client')
name: (process.server ? 'server' : 'client')
}
}
}

3
examples/style-resources/README.md Normal file
View File

@ -0,0 +1,3 @@
# Using build.styleResources with Nuxt.js
https://nuxtjs.org/examples

1
examples/style-resources/assets/resources.scss Normal file
View File

@ -0,0 +1 @@
$main: #ccc;

9
examples/style-resources/nuxt.config.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
build: {
styleResources: {
patterns: [
'./assets/resources.scss'
]
}
}
}

15
examples/style-resources/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "style-resources",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"devDependencies": {
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6"
}
}

12
examples/style-resources/pages/index.vue Executable file
View File

@ -0,0 +1,12 @@
<style lang="scss">
.main {
background: $main;
}
</style>
<template>
<div class="main">
<h1>Welcome!</h1>
<p>Background is grey</p>
</div>
</template>

5
examples/tailwindcss/README.md Normal file
View File

@ -0,0 +1,5 @@
# Nuxt.js with Tailwind CSS
See https://tailwindcss.com/docs/what-is-tailwind/
Demo: https://tailwindcss.nuxtjs.org

57
examples/tailwindcss/assets/css/tailwind.css Normal file
View File

@ -0,0 +1,57 @@
/**
* This injects Tailwind's base styles, which is a combination of
* Normalize.css and some additional base styles.
*
* You can see the styles here:
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*
* If using `postcss-import`, you should import this line from it's own file:
*
* @import "./tailwind-preflight.css";
*
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
*/
@tailwind preflight;
/**
* Here you would add any of your custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities could still
* override them.
*
* Example:
*
* .btn { ... }
* .form-input { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @import "components/buttons";
* @import "components/forms";
*/
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*
* If using `postcss-import`, you should import this line from it's own file:
*
* @import "./tailwind-utilities.css";
*
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
*/
@tailwind utilities;
/**
* Here you would add any custom utilities you need that don't come out of the
* box with Tailwind.
*
* Example :
*
* .bg-pattern-graph-paper { ... }
* .skew-45 { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @import "utilities/background-patterns";
* @import "utilities/skew-transforms";
*/

14
examples/tailwindcss/layouts/default.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<!-- See https://tailwindcss.com/docs/container -->
<div class="container mx-auto">
<nuxt/>
<a href="https://github.com/nuxt/nuxt.js/tree/dev/examples/tailwindcss" class="inline-flex items-center no-underline mt-4 rounded-full border border-grey-light bg-grey-lightest text-xs text-grey-darkest font-semibold p-2">
<span class="inline-flex rounded-full mr-1">
<svg class="h-4 w-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.73.084-.73 1.205.085 1.838 1.237 1.838 1.237 1.07 1.835 2.81 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.136-.303-.54-1.523.104-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.644 1.653.24 2.873.12 3.176.764.84 1.23 1.91 1.23 3.22 0 4.61-2.806 5.625-5.476 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.824.57 4.8-1.574 8.236-6.074 8.236-11.37 0-6.626-5.373-12-12-12"/>
</svg>
</span>
<span>Source code</span>
</a>
</div>
</template>

3
examples/tailwindcss/nuxt.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
css: ['~/assets/css/tailwind.css']
}

16
examples/tailwindcss/package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "nuxt-tailwindcss",
"description": "Nuxt.js with Tailwind CSS",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"dependencies": {
"nuxt": "latest"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"tailwindcss": "^0.1.3"
}
}

19
examples/tailwindcss/pages/about.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div>
<div class="mt-4 bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
<p class="font-bold">Be Warned!</p>
<p>This page has been {{ mode }}-side rendered!</p>
</div>
<button @click="$router.push('/')" class="mt-4 bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded">
Back to home
</button>
</div>
</template>
<script>
export default {
asyncData: () => ({
mode: (process.server ? 'server' : 'client')
})
}
</script>

17
examples/tailwindcss/pages/index.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div>
<div class="max-w-sm mt-4 rounded overflow-hidden shadow-lg">
<img class="w-full" src="https://tailwindcss.com/img/card-top.jpg">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-slate text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate">#winter</span>
</div>
</div>
<button @click="$router.push('/about')" class="bg-blue mt-4 hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">About</button>
</div>
</template>

6
examples/tailwindcss/postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('tailwindcss')('./tailwind.js'),
require('autoprefixer')
]
}

744
examples/tailwindcss/tailwind.js Normal file
View File

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

6
examples/typescript/components/Card.vue
View File

@ -9,10 +9,10 @@
</template>
// **PLEASE NOTE** All "Nuxt Class Components" require at minimum a script tag that exports a default object
<script lang="ts">
import Vue from "vue"
import Component from "nuxt-class-component"
import Vue from 'vue'
import Component from 'nuxt-class-component'
import { Prop } from 'vue-property-decorator'
import { Action } from "vuex-class"
import { Action } from 'vuex-class'
@Component({})
export default class Card extends Vue {

24
examples/typescript/modules/typescript.js
View File

@ -1,15 +1,25 @@
module.exports = function (options) {
// Extend build
this.extendBuild((config) => {
this.extendBuild(config => {
const tsLoader = {
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
// Add TypeScript loader
config.module.rules.push({
test: /\.ts$/,
loader: 'ts-loader'
})
config.module.rules.push(
Object.assign(
{
test: /((client|server)\.js)|(\.tsx?)$/
},
tsLoader
)
)
// Add TypeScript loader for vue files
for (rule of config.module.rules) {
for (let rule of config.module.rules) {
if (rule.loader === 'vue-loader') {
rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}'
rule.options.loaders.ts = tsLoader
}
}
})

2
examples/typescript/nuxt.config.js
View File

@ -22,5 +22,5 @@ module.exports = {
build: {
vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
},
modules: ['~modules/typescript']
modules: ['~/modules/typescript']
}

15
examples/typescript/package.json
View File

@ -4,12 +4,15 @@
"dependencies": {
"axios": "^0.16.1",
"gsap": "^1.19.1",
"nuxt": "^1.0.0-alpha2",
"nuxt-class-component": "^1.0.1",
"nuxt": "latest",
"nuxt-class-component": "^1.0.3",
"tachyons": "^4.7.0",
"vue-class-component": "^5.0.1",
"vue-property-decorator": "^5.0.1",
"vuex-class": "^0.2.0"
"vue": "~2.5.1",
"vue-server-renderer": "~2.5.1",
"vue-template-compiler": "~2.5.1",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0",
"vuex-class": "^0.3.0"
},
"scripts": {
"dev": "nuxt",
@ -18,7 +21,7 @@
"generate": "nuxt generate"
},
"devDependencies": {
"ts-loader": "^2.0.3",
"ts-loader": "^3.0.0",
"typescript": "^2.2.2"
}
}

10
examples/typescript/pages/index.vue
View File

@ -6,7 +6,7 @@
{{selected}}
</div>
<div class="flex flex-wrap ph2 justify-between bg-white-80">
<div v-for="person in people">
<div v-for="person in people" :key="person.id">
<Card :person="person"></Card>
</div>
</div>
@ -14,10 +14,10 @@
</template>
<script lang="ts">
import Vue from "vue";
import Component from "nuxt-class-component"
import Card from "~components/Card"
import { State, Getter } from "vuex-class"
import Vue from 'vue'
import Component from 'nuxt-class-component'
import Card from '~/components/Card'
import { State, Getter } from 'vuex-class'
@Component({
components: {

2
examples/typescript/store/index.ts
View File

@ -1,4 +1,4 @@
import axios from "~plugins/axios";
import axios from "~/plugins/axios";
export const state = () => ({
selected: 1,

Some files were not shown because too many files have changed in this diff Show More