UNPKG

4.17 kBMarkdownView Raw
1<p align="center"><img align="center" src="http://imgur.com/V4LtoII.png"/></p>
2<p align="center">
3 <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>
4 <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>
5 <a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/dt/nuxt.svg" alt="Downloads"></a>
6 <a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/v/nuxt.svg" alt="Version"></a>
7 <a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/l/nuxt.svg" alt="License"></a>
8 <a href="https://gitter.im/nuxt/nuxt.js"><img src="https://img.shields.io/badge/GITTER-join%20chat-green.svg" alt="Gitter"></a>
9</p>
10> Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by [Next.js](https://github.com/zeit/next.js))
11
12## 🚧 Under active development, 1.0 will be released soon :fire:
13
14## Links
15
16- 📘 Documentation: [https://nuxtjs.org](https://nuxtjs.org)
17- 🎬 Video: [1 minute demo](https://www.youtube.com/watch?v=kmf-p-pTi40)
18- 🐦 Twitter: [@nuxt_js](https://twitter.com/nuxt_js)
19
20## Getting started
21
22```
23$ npm install nuxt --save
24```
25
26Add a script to your package.json like this:
27
28```json
29{
30 "scripts": {
31 "start": "nuxt"
32 }
33}
34```
35
36After that, the file-system is the main API. Every .vue file becomes a route that gets automatically processed and rendered.
37
38Populate `./pages/index.vue` inside your project:
39
40```html
41<template>
42 <h1>Hello {{ name }}!</h1>
43</template>
44
45<script>
46export default {
47 data: () => {
48 return { name: 'world' }
49 }
50}
51</script>
52```
53
54And then run:
55```bash
56npm start
57```
58
59Go to [http://localhost:3000](http://localhost:3000)
60
61So far, we get:
62
63- Automatic transpilation and bundling (with webpack and babel)
64- Hot code reloading
65- Server rendering and indexing of `pages/`
66- Static file serving. `./static/` is mapped to `/`
67- Configurable with a `nuxt.config.js` file
68- Custom layouts with the `layouts/` directory
69- Code splitting via webpack
70
71## Using nuxt.js programmatically
72
73```js
74const Nuxt = require('nuxt')
75
76// Launch nuxt build with given options
77let config = require('./nuxt.config.js')
78let nuxt = new Nuxt(config)
79nuxt.build()
80.then(() => {
81 // You can use nuxt.render(req, res) or nuxt.renderRoute(route, context)
82})
83.catch((e) => {
84 // An error happened during the build
85})
86```
87
88
89## Using nuxt.js as a middleware
90
91You 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()
92
93```js
94app.use(nuxt.render)
95```
96
97## Render a specific route
98
99This is mostly used for `nuxt generate` and tests purposes but you might found another utility!
100
101```js
102nuxt.renderRoute('/about', context)
103.then(function ({ html, error }) {
104 // You can check error to know if your app displayed the error page for this route
105 // Useful to set the correct status status code if an error appended:
106 if (error) {
107 return res.status(error.statusCode || 500).send(html)
108 }
109 res.send(html)
110})
111.catch(function (error) {
112 // And error appended while rendering the route
113})
114```
115
116## Examples
117
118Please take a look at the [examples/](https://github.com/nuxt/nuxt.js/tree/master/examples) directory.
119
120## Production deployment
121
122To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:
123
124```bash
125nuxt build
126nuxt start
127```
128
129For example, to deploy with [`now`](https://zeit.co/now) a `package.json` like follows is recommended:
130```json
131{
132 "name": "my-app",
133 "dependencies": {
134 "nuxt": "latest"
135 },
136 "scripts": {
137 "dev": "nuxt",
138 "build": "nuxt build",
139 "start": "nuxt start"
140 }
141}
142```
143Then run `now` and enjoy!
144
145Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
146
147## Roadmap
148
149https://github.com/nuxt/nuxt.js/projects/1