nuxt

What is nuxt?

Nuxt is a powerful framework built on top of Vue.js that simplifies the development of universal or single-page Vue applications. It provides a robust structure for building scalable and maintainable applications, with features like server-side rendering (SSR), static site generation (SSG), and a powerful module ecosystem.

What are nuxt's main functionalities?

Server-Side Rendering (SSR)

Nuxt allows you to enable server-side rendering with a simple configuration. This improves SEO and initial load performance by rendering the HTML on the server.

export default {
  ssr: true,
  // other configurations
}

Static Site Generation (SSG)

Nuxt can generate a static version of your site, which can be deployed to any static hosting service. This is useful for blogs, documentation, and other content-heavy sites.

export default {
  target: 'static',
  // other configurations
}

File-based Routing

Nuxt uses a file-based routing system, where the directory structure of the `pages` folder defines the routes of the application. This simplifies the process of adding new routes.

/* Create a file named `pages/index.vue` */
<template>
  <div>Home Page</div>
</template>

Vuex Store Integration

Nuxt integrates seamlessly with Vuex, providing a centralized state management solution for your application. You can define your state, mutations, actions, and getters in the `store` directory.

/* Create a file named `store/index.js` */
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

Modules and Plugins

Nuxt has a rich ecosystem of modules and plugins that can extend the functionality of your application. Modules like `@nuxtjs/axios` and `@nuxtjs/pwa` can be easily integrated.

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa'
  ],
  plugins: [
    '~/plugins/my-plugin.js'
  ]
}

Other packages similar to nuxt

next

Next.js is a React framework that offers similar features to Nuxt, such as server-side rendering, static site generation, and a powerful plugin system. It is widely used in the React community and provides a robust solution for building modern web applications.

sapper

Sapper is a framework for building web applications with Svelte. It offers features like server-side rendering, static site generation, and a file-based routing system. Sapper is a good choice for developers who prefer the Svelte framework over Vue or React.

gridsome

Gridsome is a Vue.js framework for building static sites and apps. It is similar to Nuxt in that it provides static site generation and a powerful plugin system. Gridsome is particularly well-suited for building JAMstack sites with a focus on performance and SEO.

README

> Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by [Next.js](https://github.com/zeit/next.js))

🚧 Under development, 1.0 will be released soon :fire:

🎬 Video: 1 minute demo

🐦 Twitter: @nuxt_js

📓 How to use

$ npm install nuxt --save

Add a script to your package.json like this:

{
  "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:

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data: () => {
    return { name: 'world' }
  }
}
</script>

And then run:

npm start

Go to 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 /
• Config file nuxt.config.js
• Code splitting via webpack

Using nuxt.js programmatically

Nuxt is built on the top of ES2015, which makes the code more enjoyable and cleaner to read. It doesn't make use of any transpilers and depends upon Core V8 implemented features. For these reasons, nuxt.js targets Node.js 4.0 or higher (you might want to launch node with the --harmony-proxies flag if you running node <= 6.5.0 )

const Nuxt = require('nuxt')

const options = {
  routes: [], // see examples/custom-routes
  css: ['/dist/bootstrap.css'] // see examples/global-css
  store: true // see examples/vuex-store
  plugins: ['public/plugin.js'], // see examples/plugins-vendor
  loading: false or { color: 'blue', failedColor: 'red' } or 'components/my-spinner' // see examples/custom-loading
  build: {
    vendor: ['axios'] // see examples/plugins-vendor
  }
}

// Launch nuxt build with given options
let nuxt = new Nuxt(options)
nuxt.build()
.then(() => {
  // You can use nuxt.render(req, res) or nuxt.renderRoute(route, context)
})
.catch((e) => {
  // An error appended 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()

app.use(nuxt.render)

Render a specific route

This is mostly used for tests purpose but who knows!

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/ folder. If you want to launch one example to see it live:

cd node_modules/nuxt/
bin/nuxt examples/hello-world
# Go to http://localhost:3000

Production deployment

To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:

nuxt build
nuxt start

For example, to deploy with now a package.json like follows is recommended:

{
  "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.