Nuxt.js – Push your Vue app to the next level

Share

Introduction…

Current technological solutions allow us to create websites based on frameworks which save a lot of time. Websites based on frameworks such as Vue, React or Angular have an advantage of a lower server load cost and also, unfortunately, disadvantage – problem with rendering pages on the client side creates a problem with indexing pages in search engines.

What is Nuxt.js?

Nuxt.js is a framework for creating Vue.js applications, also in the main scope is UI rendering while abstracting away the client/server distribution. As a framework, nuxt.js forces specified files structure which one will help you in your development application as Asynchronous Data, Middleware, Layouts, Pages and Routing and makes your app more scalable.

How nuxt.js can help you with SEO?

Nuxt.js can render out an application in three ways:

  1. Server Rendered (Universal SSR)
  2. Single Page Applications (SPA)
  3. Static Generated (Pre Rendering).

Below you can see how Nuxt.js render vue application:

Project files structure:

Nuxt.js application files structure is created in a special way to provide a great starting point for both small and large applications.

  • assets – contains your un-compiled assets for example SCSS or JavaScript files
  • components – contains your Vue.js Components. Nuxt.js doesn’t supercharge the data method on these components
  • layouts – contains your Application Layouts (For example each layout file contains header and footer)
  • pages – contains your’s Views and Routes. Nuxt reads all the .vue files inside this directory and creates the application router list.
  • middleware – contains all middlewares with custom functions that can be run before rendering either a page or a group of pages (layouts)
  • plugins – contains your all Vue plugins that you want to run in your’s Application
  • static – all static files (for example images, txt)
  • store – here you should create your Vuex store as named index.js
  • nuxt.config.js – file contains your Nuxt.js application custom configuration

Let’s create the first Nuxt.js app

1. To create first app we will use tool named create-nuxt-app.

Create-nuxt-app  tool requires npx (npx is shipped by default since NPM 5.2.0)

npx create-nuxt-app project-name

…or of course use Yarn:

yarn create nuxt-app my-project

After the answer to requests for a project name and description it will ask you some questions:

2. Choose between integrated server-side frameworks you can choose between:

  • none (nuxt server by default)
  • express
  • koa
  • adonis
  • hapi
  • feathers
  • micro

In this case, we will use option named none.

3. Next it will ask to choose between UI kit framework. Take your favorite or take none to create a custom style from scratch.

  • none (from scratch)
  • bootstrap
  • vuetify
  • bulma
  • tailwind
  • element-ui
  • buefy

4. In the third step you have to choose which one of rendering you want to use:

  • Universal
  • SPA (Single Page App)

In this case, we will use the Universal rendering mode.

5. In next steps it will ask, do you want to include in your project:

6. In the last step of installation, you decide the way of installation NPM or YARN.

After installation, you have to only move into the project folder and type command to run your first Nuxt.js project.

NPM:

npm run dev

YARN:

yarn dev

Then you will see loaders creates server and client environments:

If everything is done you should see screen like below:

Now go to the link and you should see your first Nuxt.js server-side rendered webpage:

Also, you can check for make a sure by right-clicking on the website and check View Page Source. Below picture presents view of my page source:

Summary

As you can see start project with using Nuxt.js is very simple and the benefits of using it are great. I hope you step further to the NUXT level.

Comments
    Leave a Reply

    View Comments (0)...

    Related articles:

    VS Code Shortcuts for Mac/Windows/Linux

    VS Code Tricks – How To Work Faster