Nuxt.js is a framework for creating Vue.js applications, you can choose between Universal, Static Generated or Single Page application.
Its main scope is UI rendering while abstracting away the client/server distribution.
Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js.
Nuxt.js presets all the configuration needed to make your development of a server-rendered Vue.js Application more enjoyable.
In addition, we also provide another deployment option called: nuxt generate. It will build a statically generated Vue.js Application. We believe that option could be the next big step in the development of Web Applications with microservices.
Furthermore, you can also use Nuxt.js to create single page applications (
spa mode) quickly, useful to keep Nuxt features while working on backoffice applications.
As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.
Nuxt.js includes the following to create a rich web application development:
A total of only 57kB min+gzip (60kB with Vuex).
This schema shows what is called by Nuxt.js when the server is called or when the user navigates through the app via
You can use Nuxt.js as a framework to handle all the UI rendering of your project.
nuxt, it will start a development server with hot-reloading and Vue Server Renderer configured to automatically server-render your application.
If, for any reason, you prefer not to use server side rendering or need static hosting for your applications, you can simply use SPA mode using
nuxt --spa. In combination with the generate feature, it gives you a powerful SPA deployment mechanism without the need to use a Node.js runtime or any special server handling.
Take a look at the commands to learn more about usage.
If you already have a server, you can plug Nuxt.js by using it as a middleware. There is no restriction at all when using Nuxt.js for developing your Universal Web Applications. See the Using Nuxt.js Programmatically guide.
The big innovation of Nuxt.js comes with the
nuxt generate command.
When building your application, it will generate the HTML for every one of your routes and store it in a file.
Learn how to generate static websites (pre rendering) to improve both performance and SEO while eliminating hosting costs.
Video courses made by VueSchool to support Nuxt.js development.
For example, the following file structure:
-| pages/ ----| about.vue ----| index.vue
-| dist/ ----| about/ ------| index.html ----| index.html
With this, you can host your generated web application on any static hosting!
We don't want to manually generate the application every time we update the docs repository, it triggers a hook to Netlify which:
npm run generate
We now have an automated Static Generated Web Application :)
We can go further by thinking of an e-commerce web application made with
nuxt generate and hosted on a CDN. Every time a product is out of stock or back in stock, we regenerate the web app. But if the user navigates through the web app in the meantime, it will be up to date thanks to the API calls made to the e-commerce API. No need to have multiple instances of a server + a cache any more!
See How to deploy on Netlify? for more details on how to deploy to Netlify.
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!