Nuxt/README.md

151 lines
4.2 KiB
Markdown
Raw Normal View History

2016-11-29 13:14:32 +00:00
<p align="center"><img align="center" src="http://imgur.com/V4LtoII.png"/></p>
2016-11-23 13:05:22 +00:00
<p align="center">
2016-12-21 20:01:06 +00:00
<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>
2017-01-28 19:59:30 +00:00
<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>
2016-11-23 13:05:22 +00:00
<a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/dt/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>
2016-12-23 16:50:04 +00:00
<a href="https://gitter.im/nuxt/nuxt.js"><img src="https://img.shields.io/badge/GITTER-join%20chat-green.svg" alt="Gitter"></a>
2016-11-23 13:05:22 +00:00
</p>
2017-01-18 08:38:57 +00:00
> Nuxt.js is a framework for server-rendered Vue applications (inspired by [Next.js](https://github.com/zeit/next.js))
2016-10-26 11:40:55 +00:00
2016-12-25 18:15:50 +00:00
## 🚧 Under active development, 1.0 will be released soon :fire:
2016-11-15 13:26:11 +00:00
2016-12-25 18:15:50 +00:00
## Links
2016-11-18 08:26:04 +00:00
2016-12-25 18:15:50 +00:00
- 📘 Documentation: [https://nuxtjs.org](https://nuxtjs.org)
2016-12-27 16:16:05 +00:00
- 🎬 Video: [1 minute demo](https://www.youtube.com/watch?v=kmf-p-pTi40)
2016-12-25 18:15:50 +00:00
- 🐦 Twitter: [@nuxt_js](https://twitter.com/nuxt_js)
2016-11-21 10:42:13 +00:00
2016-12-25 18:15:50 +00:00
## Getting started
2016-10-26 11:40:55 +00:00
```
$ npm install nuxt --save
```
Add a script to your package.json like this:
2016-10-26 11:40:55 +00:00
```json
{
"scripts": {
"start": "nuxt"
}
}
```
After that, the file-system is the main API. Every .vue file becomes a route that gets automatically processed and rendered.
2016-10-26 11:40:55 +00:00
Populate `./pages/index.vue` inside your project:
```html
<template>
<h1>Hello {{ name }}!</h1>
</template>
<script>
export default {
data: () => {
return { name: 'world' }
}
2016-10-26 11:40:55 +00:00
}
</script>
```
And then run:
```bash
npm start
```
Go to [http://localhost:3000](http://localhost:3000)
2016-10-26 11:40:55 +00:00
So far, we get:
- Automatic transpilation and bundling (with webpack and babel)
- Hot code reloading
2016-12-25 18:08:30 +00:00
- Server rendering and indexing of `pages/`
2016-11-10 01:19:47 +00:00
- Static file serving. `./static/` is mapped to `/`
2016-12-25 18:08:30 +00:00
- Configurable with a `nuxt.config.js` file
- Custom layouts with the `layouts/` directory
- Code splitting via webpack
## Using nuxt.js programmatically
```js
const Nuxt = require('nuxt')
// Launch nuxt build with given options
2016-12-25 18:08:30 +00:00
let config = require('./nuxt.config.js')
let nuxt = new Nuxt(config)
2016-12-08 16:49:47 +00:00
nuxt.build()
.then(() => {
// You can use nuxt.render(req, res) or nuxt.renderRoute(route, context)
})
.catch((e) => {
2017-01-10 21:48:23 +00:00
// An error happened during the build
2016-12-08 16:49:47 +00:00
})
```
2016-10-26 11:40:55 +00:00
## Using nuxt.js as a middleware
You might want to use your own server with you configurations, your API and everything awesome your created with. That's why you can use nuxt.js as a middleware. It's recommended to use it at the end of your middlewares since it will handle the rendering of your web application and won't call next()
```js
app.use(nuxt.render)
```
## Render a specific route
2016-12-25 18:08:30 +00:00
This is mostly used for `nuxt generate` and tests purposes but you might found another utility!
```js
nuxt.renderRoute('/about', context)
2016-11-10 01:19:47 +00:00
.then(function ({ html, error }) {
// You can check error to know if your app displayed the error page for this route
// Useful to set the correct status status code if an error appended:
if (error) {
return res.status(error.statusCode || 500).send(html)
}
res.send(html)
})
.catch(function (error) {
// And error appended while rendering the route
})
```
## Examples
2016-12-25 18:08:30 +00:00
Please take a look at the [examples/](https://github.com/nuxt/nuxt.js/tree/master/examples) directory.
## Production deployment
2016-11-10 13:30:18 +00:00
To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:
```bash
nuxt build
nuxt start
```
For example, to deploy with [`now`](https://zeit.co/now) a `package.json` like follows is recommended:
```json
{
"name": "my-app",
"dependencies": {
2016-11-10 13:30:18 +00:00
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
```
Then run `now` and enjoy!
Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
2017-01-15 15:36:28 +00:00
## Roadmap
https://github.com/nuxt/nuxt.js/projects/1