Nuxt.js: Framework for the Vue.js framework

Quote from the official site:

On October 25, 2016, the zeit.co team announced Next.js, a React application framework with server rendering. A few hours after this announcement, Nuxt.js was born - the embodiment of a similar idea for Vue.js.

Nuxt.js is a framework for creating universal applications on Vue.js using Node.js. With it, you can render the UI on the server and generate static sites.

It uses:

• Vue 2
• Vuex
• Vue router
• Vue-meta
• vue-loader
• babel-loader
• Webpack

Hello world Nuxt.js

Create the first universal application in two ways:
1) Using a template from vue-cli

If not installed vue-cli then install

npm install -g vue-cli 

Now we create a project using a pre-made template

 vue init nuxt-community/starter-template 

And run

 npm run dev 

2) Hands from scratch

Create a folder for the project and the file package.json

 { "name": "my-app", "scripts": { "dev": "nuxt" } } 

Here we have indicated how we will launch the application. Next, install Nuxt.js itself.

 npm install --save nuxt 

After everything is established in the folder of our project, we create the pages folder. It will store our pages with a .vue extension. Once launched, Nuxt converts them all into application routes. Create index.vue

 <template> <h1> Nuxt.js!</h1> </template> 

As you can see, Nuxt uses the same templating as Vue. And now we will launch our application.

 npm run dev 

It is available at http: // localhost: 3000 /

Blackjack and config

Nuxt also has its own required folders and the nuxt.config.js configuration file . You can customize site headers, enable global CSS, enable caching, and more.

Folder List:

• assets - SASS, LESS or JS source files
• components - Application components, for example, preloader description
• layouts - Templates, such as an error page.
• middleware - Allows you to define custom functions that can be run before displaying a page or group of pages (layouts).
• pages - Views (our pages) and by the way they are located in this folder it builds routes
• plugins - plugins
• static - Static files, such as robots.txt
• store - Vuex Storage

Underwater rocks

1. Check the correctness of writing the code, especially in the configuration file, because if it considers it to be broken, then it simply will not process it and will not display any errors.
2. Be careful with the folders, as it can start swearing at the absence of empty folders

Resources

Official site
Russian-language guide and documentation (Translation is not complete)