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" >
2017-05-09 13:21:36 +00:00
< a href = "#backers" alt = "sponsors on Open Collective" > < img src = "https://opencollective.com/nuxtjs/backers/badge.svg" / > < / a > < a href = "#sponsors" alt = "Sponsors on Open Collective" > < img src = "https://opencollective.com/nuxtjs/sponsors/badge.svg" / > < / a >
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 >
2017-05-09 08:48:26 +00:00
< a href = "https://opencollective.com/nuxtjs" > < img src = "https://img.shields.io/badge/Support%20us-donate-41B883.svg" alt = "Support us" > < / a >
2017-02-11 13:54:24 +00:00
2016-11-23 13:05:22 +00:00
< / p >
2017-03-20 15:29:51 +00:00
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
2017-03-24 18:05:57 +00:00
## 🚧 Under active development, [1.0](https://github.com/nuxt/nuxt.js/projects/1) 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 )
2017-03-25 14:48:26 +00:00
- 👉 [Play with Nuxt.js online ](https://glitch.com/edit/#!/nuxt-hello-world )
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
```
2016-11-07 12:53:05 +00:00
Add a script to your package.json like this:
2016-10-26 11:40:55 +00:00
```json
{
"scripts": {
"start": "nuxt"
}
}
```
2016-11-07 12:53:05 +00:00
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 {
2016-11-07 12:53:05 +00:00
data: () => {
return { name: 'world' }
}
2016-10-26 11:40:55 +00:00
}
< / script >
```
2016-11-07 12:53:05 +00:00
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
2017-02-10 01:56:55 +00:00
- Middleware
2016-11-07 12:53:05 +00:00
- Code splitting via webpack
2017-01-31 15:40:50 +00:00
Learn more at [nuxtjs.org ](https://nuxtjs.org ).
## Templates
You can start by using one of our starter templates:
- [starter ](https://github.com/nuxt/starter ): Basic Nuxt.js project template
- [express ](https://github.com/nuxt/express ): Nuxt.js + Express
2017-02-18 14:16:20 +00:00
- [koa ](https://github.com/nuxt/koa ): Nuxt.js + Koa
2017-01-31 15:40:50 +00:00
- [adonuxt ](https://github.com/nuxt/adonuxt ): Nuxt.js + AdonisJS
2016-11-07 12:53:05 +00:00
## 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-11-07 12:53:05 +00:00
```
2017-01-31 15:40:50 +00:00
Learn more: https://nuxtjs.org/api/nuxt
2016-10-26 11:40:55 +00:00
2016-11-07 12:53:05 +00:00
## Using nuxt.js as a middleware
2017-02-03 14:09:27 +00:00
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 middleware since it will handle the rendering of your web application and won't call next().
2016-11-07 12:53:05 +00:00
```js
app.use(nuxt.render)
```
2017-01-31 15:40:50 +00:00
Learn more: https://nuxtjs.org/api/nuxt-render
2016-11-07 12:53:05 +00:00
## Render a specific route
2017-02-01 17:25:17 +00:00
This is mostly used for `nuxt generate` and test purposes but you might find another utility!
2016-11-07 12:53:05 +00:00
```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
2017-03-25 06:57:49 +00:00
// Useful to set the correct status code if an error appended:
2016-11-10 01:19:47 +00:00
if (error) {
return res.status(error.statusCode || 500).send(html)
}
res.send(html)
2016-11-07 12:53:05 +00:00
})
.catch(function (error) {
// And error appended while rendering the route
})
```
2017-01-31 15:40:50 +00:00
Learn more: https://nuxtjs.org/api/nuxt-render-route
2016-11-07 12:53:05 +00:00
## Examples
2017-01-31 15:40:50 +00:00
Please take a look at https://nuxtjs.org/examples
2016-11-09 22:59:41 +00:00
## 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:
2016-11-09 22:59:41 +00:00
```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"
2016-11-09 22:59:41 +00:00
},
"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
2017-02-11 13:54:24 +00:00
2017-05-09 13:21:36 +00:00
## Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer ](https://opencollective.com/nuxtjs#backer )]
< a href = "https://opencollective.com/nuxtjs/backer/0/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/0/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/1/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/1/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/2/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/2/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/3/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/3/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/4/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/4/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/5/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/5/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/6/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/6/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/7/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/7/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/8/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/8/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/9/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/9/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/10/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/10/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/11/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/11/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/12/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/12/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/13/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/13/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/14/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/14/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/15/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/15/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/16/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/16/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/17/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/17/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/18/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/18/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/19/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/19/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/20/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/20/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/21/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/21/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/22/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/22/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/23/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/23/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/24/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/24/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/25/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/25/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/26/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/26/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/27/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/27/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/28/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/28/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/backer/29/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/backer/29/avatar.svg" > < / a >
## Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor ](https://opencollective.com/nuxtjs#sponsor )]
< a href = "https://opencollective.com/nuxtjs/sponsor/0/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/0/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/1/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/1/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/2/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/2/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/3/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/3/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/4/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/4/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/5/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/5/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/6/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/6/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/7/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/7/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/8/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/8/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/9/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/9/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/10/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/10/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/11/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/11/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/12/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/12/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/13/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/13/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/14/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/14/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/15/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/15/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/16/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/16/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/17/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/17/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/18/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/18/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/19/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/19/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/20/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/20/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/21/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/21/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/22/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/22/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/23/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/23/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/24/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/24/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/25/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/25/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/26/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/26/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/27/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/27/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/28/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/28/avatar.svg" > < / a >
< a href = "https://opencollective.com/nuxtjs/sponsor/29/website" target = "_blank" > < img src = "https://opencollective.com/nuxtjs/sponsor/29/avatar.svg" > < / a >
2017-02-11 13:54:24 +00:00
