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 |
|
26 | Add a script to your package.json like this:
|
27 |
|
28 | ```json
|
29 | {
|
30 | "scripts": {
|
31 | "start": "nuxt"
|
32 | }
|
33 | }
|
34 | ```
|
35 |
|
36 | After that, the file-system is the main API. Every .vue file becomes a route that gets automatically processed and rendered.
|
37 |
|
38 | Populate `./pages/index.vue` inside your project:
|
39 |
|
40 | ```html
|
41 | <template>
|
42 | <h1>Hello {{ name }}!</h1>
|
43 | </template>
|
44 |
|
45 | <script>
|
46 | export default {
|
47 | data: () => {
|
48 | return { name: 'world' }
|
49 | }
|
50 | }
|
51 | </script>
|
52 | ```
|
53 |
|
54 | And then run:
|
55 | ```bash
|
56 | npm start
|
57 | ```
|
58 |
|
59 | Go to [http://localhost:3000](http://localhost:3000)
|
60 |
|
61 | So 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
|
74 | const Nuxt = require('nuxt')
|
75 |
|
76 | // Launch nuxt build with given options
|
77 | let config = require('./nuxt.config.js')
|
78 | let nuxt = new Nuxt(config)
|
79 | nuxt.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 |
|
91 | 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()
|
92 |
|
93 | ```js
|
94 | app.use(nuxt.render)
|
95 | ```
|
96 |
|
97 | ## Render a specific route
|
98 |
|
99 | This is mostly used for `nuxt generate` and tests purposes but you might found another utility!
|
100 |
|
101 | ```js
|
102 | nuxt.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 |
|
118 | Please take a look at the [examples/](https://github.com/nuxt/nuxt.js/tree/master/examples) directory.
|
119 |
|
120 | ## Production deployment
|
121 |
|
122 | To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:
|
123 |
|
124 | ```bash
|
125 | nuxt build
|
126 | nuxt start
|
127 | ```
|
128 |
|
129 | For 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 | ```
|
143 | Then run `now` and enjoy!
|
144 |
|
145 | Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
|
146 |
|
147 | ## Roadmap
|
148 |
|
149 | https://github.com/nuxt/nuxt.js/projects/1
|