mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-05 21:53:56 +00:00
150 lines
4.1 KiB
Markdown
150 lines
4.1 KiB
Markdown
<p align="center"><img align="center" src="http://imgur.com/V4LtoII.png"/></p>
|
|
<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://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://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>
|
|
<a href="https://gitter.im/nuxt/nuxt.js"><img src="https://img.shields.io/badge/GITTER-join%20chat-green.svg" alt="Gitter"></a>
|
|
</p>
|
|
> Nuxt.js is a framework for server-rendered Vue applications (inspired by [Next.js](https://github.com/zeit/next.js))
|
|
|
|
## 🚧 Under active development, 1.0 will be released soon :fire:
|
|
|
|
## Links
|
|
|
|
- 📘 Documentation: [https://nuxtjs.org](https://nuxtjs.org)
|
|
- 🎬 Video: [1 minute demo](https://www.youtube.com/watch?v=kmf-p-pTi40)
|
|
- 🐦 Twitter: [@nuxt_js](https://twitter.com/nuxt_js)
|
|
|
|
## Getting started
|
|
|
|
```
|
|
$ npm install nuxt --save
|
|
```
|
|
|
|
Add a script to your package.json like this:
|
|
|
|
```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.
|
|
|
|
Populate `./pages/index.vue` inside your project:
|
|
|
|
```html
|
|
<template>
|
|
<h1>Hello {{ name }}!</h1>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => {
|
|
return { name: 'world' }
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
And then run:
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
Go to [http://localhost:3000](http://localhost:3000)
|
|
|
|
So far, we get:
|
|
|
|
- Automatic transpilation and bundling (with webpack and babel)
|
|
- Hot code reloading
|
|
- Server rendering and indexing of `pages/`
|
|
- Static file serving. `./static/` is mapped to `/`
|
|
- 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
|
|
let config = require('./nuxt.config.js')
|
|
let nuxt = new Nuxt(config)
|
|
nuxt.build()
|
|
.then(() => {
|
|
// You can use nuxt.render(req, res) or nuxt.renderRoute(route, context)
|
|
})
|
|
.catch((e) => {
|
|
// An error happened during the build
|
|
})
|
|
```
|
|
|
|
|
|
## 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
|
|
|
|
This is mostly used for `nuxt generate` and tests purposes but you might found another utility!
|
|
|
|
```js
|
|
nuxt.renderRoute('/about', context)
|
|
.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
|
|
|
|
Please take a look at the [examples/](https://github.com/nuxt/nuxt.js/tree/master/examples) directory.
|
|
|
|
## Production deployment
|
|
|
|
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": {
|
|
"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`.
|
|
|
|
## Roadmap
|
|
|
|
https://github.com/nuxt/nuxt.js/projects/1
|