What should we use between VUE and NUXT?

Pros and cons with Vue CLI

Pros of Vue CLI

• Firstly, it has a Vue-router when installing, so we don’t have to set up the route structure ourselves in the beginning. Fantastic !!
• The document about Vue.js is very nice and easy to understand.
• The Vue-CLI hot reload is faster.
• If anyone is thinking of using lib from the outside, it won’t be a problem, just set at main.js file, you should be able to use it.

Cons with Vue CLI

• You have to build the Vuex configuration by yourself.
• When we create a route, we have to define every time by ourselves.

Now I am going to introduce you toNuxt.js

It’s a JavaScript Framework at BaseOn Vue.js (Vue, Vue-router, Vuex).
Developed from Vue.js to solve problems for websites that want to do SEO (Search Engine Optimization) to make the web site added to the first page of the Search Engine, making the web search through Google more easily found.

Nuxt.js helps to do SSR (Server Side Rendering). Normally, when we use Vue.js, the whole process takes place on the client-side, running from page loading and execute JavaScript will be run with all client resources on our website. The larger the size, the slower the machine.

By doing SSR, most processes will be moved to server-side, resulting in faster rendering.

When the browser request comes to the server, the server will read the js file that we have created by specifying the information inside and sending it back to the browser.

In addition to SSR, Nuxt.js has a structure that supports very easy-to-understand websites, such as having a routing management system without having to write it entirely. Just lay out the structure according to the folder, the project can be run, there is a layout system, and there is a plugin, module that supports SSR work, etc.

Nuxt.js project structure

• Assets are the parts in which files are stored used in the project.
  - Components are for creating and storing different components of vue.js.
  - Layouts are structures to implement on pages using <nuxt /> to display the content inside the layout.
  - Middleware will be applied to nuxt.js in order to call a function before it is rendered.
  - Pages are the parts used to display web pages, creating folders and files will affect the routing or URLs of the web. Nuxt manages the route through the pages folder and creates a .vue file, it can route the file name that we create. (except index.vue, no reference required)
  - Plugins are the parts that will work in your project.
  - Store is the part of Vuex that is used to manage states that all components can access and use.
  - .env is a configuration file that controls your environment.
  - .nuxt.config.js is used to configure the entire project at all the file, such as adding plugins, setting meta parts, header, loading plugin, can all be set at this file, example below.

Bring Bootstrap to work in the Nuxt.js project.

1. Go to the .nuxt.config.js file.
2. Add CND-style Bootstrap.css to the link.

3. Add Bootstrap.js as CND into the script.

Now you can use Bootstrap on your project. Without installation Vue-Bootstrap.

Pros of Nuxt.js

• It fixes the problems listed in the cons section of Vue CLI.

Cons of Next.js

• Next.js is slow for the hot reload.

The main idea of this blog is I would like to give some differences between Vue.js and Nuxt.js, so you can weigh your options and choose the language you think will work the best work for your project. In my next blog, I would love to share with you more about Kuxt.js.